Veazio.com

Communication visuelle et Marketing

Vous devez activer javascript pour afficher ce contenu Un effet « text overlay » permet de recouvrir les images de votre site par du texte lorsque... Incrustez du texte au survol du curseur sur vos images

thumbnail_image_text_overlayUn effet « text overlay » permet de recouvrir les images de votre site par du texte lorsque l’on passe la souris dessus. Cela permet d’afficher des infos supplémentaires sans avoir à créer une légende, ni même changer l’aspect graphique de votre page. Cela peut ainsi contribuer à améliorer l’ergonomie et la lisibilité de votre site et à augmenter la qualité de  l’expérience utilisateur.

Cet article étant classé dans la partie WordPress, nous allons effectuer cette incrustation avec l’aide de plugins. Je rédigerai ultérieurement un article qui permettra d’insérer cet effet sans plugin, uniquement via du Html & CSS et qui ne s’adressera pas exclusivement aux utilisateurs de WordPress.

CSS3 Image & Text Overlay

C’est une extension permettant d’incruster du texte de manière automatique et efficace sur les images de votre site en utilisant le CSS. Ce texte pouvant bien entendu comporter des balises « titres » et des liens cliquables lorsque le pointeur de la souris survole l’image.

screenschot_overlay_css3image_486x355

Exemple d’incrustation de texte

Une fois ce plugin installé et activé, il vous suffit d’insérer le shortcode [overlay image][/overlay] de cette facon:

[overlay image="URL de l'image" <h2>Titre de l'image</h2>
<coded_p>Description de l'image</coded_p>
[/overlay]

Télécharger le plugin

D’autres plugins

Ce plugin n’est bien sur pas le seul à proposer ce genre de fonctionnalités. Si vous le trouvez trop basique, il en existe plein d’autres notamment basés sur jQuery et qui fonctionnent également trés bien. Cliquez sur l’image ci-dessous pour accéder à une page qui regroupe 30 plugins WordPress qui vous aideront à incruster du texte sur une image pendant un survol de la souris.

Overlay-Text-over-an-Image-with-a-Very-Simple-jQuery-Snippet_600x156
[Total : 0    Moyenne : 0/5]

No comments so far.

Be first to leave comment below.

Laisser un commentaire

%d blogueurs aiment cette page :