Objectifs :

1. Créer un « Zoom » dans un article, autrement dit un message qui s’affiche au survol d’un mot ou d’une expression par la souris.
2. Faire en sorte que ce « Zoom » soit intégré dans la feuille de style pour être utilisé à plusieurs reprises.
3. Adopter le style particulier de ce template pour que le « zoom » ait la même apparence que les blocs de la barre latérale.

Démonstration :

Survolez ce texte avec la souris

Mise en oeuvre :

J’ai dans un premier temps cherché s’il existe un plugin qui permet de réaliser ceci. Malgré mes recherches, je n’ai rien trouvé de concluant.

Comme en outre je souhaitais quelque chose qui s’adapte totalement à la feuille de style de ce superbe template, j’ai donc finalement décidé de mettre les mains dans le camboui.

Cela faisait bien longtemps que je n’avais pas manipulé les lignes de codes en html, php, javascript et à l’intérieur des styles css. Ce fut donc l’occasion d’une sympathique remise à niveau.

Première étape : trouver sur le Net des exemples permettant d’arriver à mes fins. J’en ai trouver deux, dont celui que j’ai fini par adopter. En voici le « listing » dégoté à cette adresse :

<script type="text/javascript">
<!-- function toggleDiv(id,flagit) {
if (flagit=="1")
{ if (document.layers) document.layers[''+id+''].visibility = "show"
else if (document.all) document.all[''+id+''].style.visibility = "visible"
else if (document.getElementById) document.getElementById(''+id+'').style.visibility = "visible"
}
else
if (flagit=="0")
{ if (document.layers) document.layers[''+id+''].visibility = "hide"
else if (document.all) document.all[''+id+''].style.visibility = "hidden"
else if (document.getElementById) document.getElementById(''+id+'').style.visibility = "hidden"
}
}
//-->
</script>

Il était indiqué de placer ce code dans le header, mais sans davantage d’infos. Après plusieurs tentatives, j’ai fini par découvrir un article du Codex de Wordpress sur l’utilisation du Javascript qui donnait un peu plus de détails :

Javascript in Template Files

To use Javascript repeatedly within your site, you can either set the call for the Javascript, or the script itself, in the head of your header.php template file, between the meta tags and the style sheet link, no differently than you would if you were using Javascript in any HTML page.

J’obtenais donc le lieu précis où introduire le code, précisément entre les meta tags et les liens de feuille de style. Pour ce template particulier, il s’agissait donc d’ouvrir le fichier Apparence>Éditeur>En-tête (header.php) et de placer le script entre les lignes :

<meta name="generator" content="WordPress <?php bloginfo('version'); ?>" /> <!-- leave this for stats -->

et

 <link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" />

Une solution alternative est de créer un fichier spécialement dédié aux fonctions Javascripts, puis d’appeler notre fonction dans le header ainsi :

<script type="text/javascript" src="/scripts/toggleDiv.js"></script>

Il s’agit ensuite de définir un style css pour les DIV qu’on va utiliser. Là encore, deux solutions :

1. Rester dans la page du header et introduire le script :

<style type="text/css">#div1, #div2, #div3 {position:absolute; top: 100; left: 200; width:200; visibility:hidden}</style>

2. Ou aller directement définir nos DIV dans la page de style css :

#div1, #div2, #div3 {position:absolute; top: 100; left: 200; width:200; visibility:hidden}

On peut désormais créer un ou plusieurs DIV au sein de notre article/page. Un exemple basique :

<div id="div1">Ceci est est le texte à afficher dans le « Zoom ».</div>

Pour peu qu’on ait bien sûr paramétré le texte à survoler :

<a onmouseover="toggleDiv('div1',1)" onmouseout="toggleDiv('div1',0)" href="#">Texte survolé</a>

Application au template Aspire

Dans le cadre de ce template, je souhaitais reprendre le format des blocs affichés dans la barre latérale droite. J’ai donc modifié la feuille de style (style.css) ainsi :

#zoom1, #zoom2, #zoom3 {position:absolute; top: 100; left: 200; width:200; visibility:hidden}
#zoom1 h2, #zoom2 h2, #zoom3 h2 {position:relative; font:bold 16px "Trebuchet MS"; color:#602600; margin:0 -6px; text-align:center; background:url(images/sidebar-title-line.jpg) center bottom no-repeat; padding:3px 0 18px 0;}
 
.zo-bot {background:url(images/sidebar-bottom2.jpg) center bottom repeat-x;}
.zo-top {background:url(images/sidebar-top.jpg) center top repeat-x;}
.zo-right {background:url(images/sb-border.gif) right top repeat-y;}
.zo-left {background:url(images/sb-border.gif) left top repeat-y;}
.zo-rb {background:url(images/sidebar-rb.jpg) right bottom no-repeat;}
.zo-lb {background:url(images/sidebar-lb.jpg) left bottom no-repeat;}
.zo-rt {background:url(images/sidebar-rt.jpg) right top no-repeat; width:100%}
.zo-lt {position:relative; background:url(images/sidebar-lt.jpg) left top no-repeat; padding:10px 10px 15px 10px; width:147px; overflow:hidden;}

• Ligne 1 : Définition des DIV zoom à des positions initiales sans grande importance : elles seront adaptées en fonction de la position des textes à survoler (vous pouvez jouer sur les paramètres top et left, ou les faire glisser en mode « Visuel » de l’éditeur). Noter quand même que cette position initiale est celle qui s’affichera dans l’affichage « Visuel » de l’éditeur de votre article/message.
• Ligne 2 : Définition du style « Titre 2 » au sein du DIV. L’objectif est de le conformer à celui des blocs latéraux, tout en ajoutant la petite barre décorative. Cette ligne est donc un copier/coller de la définition des « Titre 2 » (#sidebars h2) dans cette même feuille de style.
• lignes 4-11 : Définitions des éléments visuels du bloc, encore une fois quasi copiés-collés de la définition des «sidebar».
• ligne 4 : petite modification un peu spéciale : j’ai du créer une image «sidebar-bottom2.jpg» pour que l’intégralité du bloc apparaisse avec un fond de la même couleur. L’image originale était en effet trop courte en hauteur par rapport aux autres éléments « bottom » et un cadre blanc n’était pas couvert par le fond.
  Bref, j’ai utilisé la partie haute de l’image voisine pour compléter l’image «sidebar-bottom2.jpg», et tout marche alors parfaitement. Vous pouvez la télécharger ici si vous le souhaitez

À partir de là, la définition spécifique de nos DIV à ajouter dans nos articles/pages devient (code utilisé pour la démonstration) :

<div id="zoom2" style="position: absolute; left: 262px; top: 59px; width: 170px; z-index: 2; background-image: url(http://fevre.olivier.free.fr/blog/wp-content/uploads/body-bg.jpg); text-align: center;">
<div class="zo-bot"><div class="zo-top"><div class="zo-right"><div class="zo-left">
<div class="zo-rb"><div class="zo-lb"><div class="zo-rt"><div class="zo-lt">
<h2>Objectif</h2>
Créer un <em><strong><span style="color: #993300; font-size: larger; margin:10;">« Zoom »</span></strong></em> dans un article, autrement dit un message qui s'affiche au survol d'un mot ou d'une expression par la souris.</div>
</div></div></div></div>
</div></div></div></div>

À vos modifs !

Tags: css, feuille de style, javascript, onmouseout, onmouseover, template