La bulle de texte paramétrable

Vous avez pu voir dans une autre page à propos des bulles de texte la manière la plus simple de les afficher.

Ce procédé, s'il ne requiert pas de script puisqu'il fait partie des attributs reconnus par Html 4 a néanmoins des limites : il n'est pas possible de personnaliser ce genre d'évènement.

Si l'on veut obtenir un tel résultat, il est nécessaire, une fois de plus, de passer par Javascript.

Je vous propose donc celui-ci. Passez le curseur de votre souris sur les différentes parties du champignon :

Le résultat est nettement plus frappant que l'utilisation de l'attribut "TITLE" de Html 4.

Voyons les deux scripts à mettre en oeuvre, puisque cet évènement en comporte deux. ... ou plus exactement : le premier est un script et le second est une feuille de style :



<script type="text/Javascript" language="JavaScript">
<!--
IE4 = (document.all) ? 1 : 0;
NS4 = (document.layers) ? 1 : 0;
VERSION4 = (IE4 | NS4) ? 1 : 0;
if (!VERSION4) event = null;
function helpGetOffset(obj, coord) {
var val = obj["offset"+coord] ;
if (coord == "Top") val += obj.offsetHeight;
while ((obj = obj.offsetParent )!=null) {
val += obj["offset"+coord];
if (obj.border && obj.border != 0) val++;
}
return val;
}
function sansbulle () {
if (IE4) document.all.bulle.style.visibility = "hidden";
if (NS4) document.layers.bulle.visibility = "hidden";
}
function surbulle (event,texte) {
if (!VERSION4) return;
var ptrObj, ptrLayer;
if (IE4) {
ptrObj = event.srcElement;
ptrLayer = document.all.bulle;
}
if (NS4) {
ptrObj = event.target;
ptrLayer = document.layers.bulle;
}
if (!ptrObj.onmouseout) ptrObj.onmouseout =sansbulle;
var str = '<DIV
CLASS="bulleDIV">'+texte+'</DIV>';
if (IE4) {
ptrLayer.innerHTML = str;
ptrLayer.style.top = helpGetOffset (ptrObj,"Top")+160;
ptrLayer.style.left = helpGetOffset (ptrObj,"Left")+91;
ptrLayer.style.visibility = "visible";
}
if (NS4) {
ptrLayer.document.write (str);
ptrLayer.document.close ();
ptrLayer.document.bgColor = "lightyellow";
ptrLayer.top = ptrObj.y +100;
ptrLayer.left = ptrObj.x +200;
ptrLayer.visibility = "show";
}
}
// --></SCRIPT>

Deuxième écriture :

Feuille de style : réglages des dimensions des bulles et des caractéristiques des textes - ce deuxième script sera installé à la suite du premier, entre les balises <HEAD>, après le titre et les éventuelles balises de référencement



<STYLE TYPE='text/css'><!--

#bulle {

position: absolute;

}

DIV.bulleDIV {

width: 150px;

padding: 5px;

background: lightyellow;

border: 1px solid black;

 

color: blue;

font-family: Verdana;

font-style: Normal;

font-weight: Bold;

font-size: 11px;

line-height: 12px;

}

--></STYLE>



Les parties en couleur verte règlent les dimensions, la couleur et la bordure de bulle.

Les parties de couleur bleue règlent couleur, type de fonte, dimension de caractères et hauteur des interlignes.

Ce script (le premier, bien entendu) est prévu pour Explorer de même que Netscape ... mais ce dernier, comme d'habitude, ne réagit pas vraiment comme on le désire. Ici, son principal problème est de ne pas permettre l'affichage de la bulle en fonction de la position de la souris ... mais de la page. Le résultat : cette bulle s'affiche toujours au même endroit. L'aspect de la bulle est toutefois le même que sous Explorer, à condition d'ajouter la couleur de fond de celle-ci dans le premier script : lightyellow dans ce cas. Une fois de plus, Netscape n'interprête pas correctement les CSS.

en rouge, le paramétrage des distances d'affichage de la bulle pour IE. Left (gauche) peut devenir right (droite).

en fuchsia, la couleur de fond de la bulle, uniquement nécessaire à Netscape dans le script.

en brun, le paramétrage des distances d'affichage/bulle de Netscape ... mais qui sont presque aléatoires ...

vous règlerez les distances d'affichage par essais successifs : tout dépend de l'image que vous "découpez".

Car, en effet, il s'agit d'images ou de cartes dont les parties déclenchant l'apparition de la bulle au passage de la souris feront l'objet d'un découpage selon la technique du "mapping".

Dans l'exemple ci-dessus, les définitions du découpage (installées dans le <BODY>) sont les suivantes :

<P><MAP NAME=map1>

<AREA SHAPE=rect COORDS="92,126,130,150" HREF="#" onmouseover="surbulle(event,'bulbe partiellement enfoui')">

<AREA SHAPE=rect COORDS="99,92,119,121" HREF="#" onmouseover="surbulle(event,'pied blanc et lisse, devenant verdâtre')">

<AREA SHAPE=rect COORDS="96,74,121,89" HREF="#" onmouseover="surbulle(event,'anneau très léger, comme un voile')">

<AREA SHAPE=rect COORDS="64,33,153,72" HREF="#" onmouseover="surbulle(event,'chapeau blanc à verdâtre')">

</MAP><IMG USEMAP="#map1" SRC="../valchamp/valimage/amaphal3.jpg" WIDTH=240 HEIGHT=180 BORDER=0 ALIGN=bottom></P>

Les coordonnées des zones rectangulaires sont définies en pixels et le lien éventuel (ici, il est fictif) permet d'envoyer le visiteur vers une autre page (en ajoutant éventuellement un "TARGET=_blank" pour que celle-ci viennent s'installer SUR la page initiale, sans la faire disparaître lors de l'activation du lien. On fait suivre ensuite la commande "onmouseover" de la fonction définie par les scripts, en ajoutant le texte que l'on désire voir afficher.

Si vous utilisez un éditeur de pages Html de type "wysiwyg", il comporte normalement la possibilité de réaliser ces découpages de manière conviviale, sans devoir déterminer au pixel près les dimensions des zones activables. Utilisez donc cette fonction pour vous faciliter le travail ! Ajoutez ensuite aux lignes de définition AERA la partie [onmouseover="définition et texte"] tels que l'exemple ci-dessus.

Cela fait beaucoup d'espace pour un petit évènement, n'est-ce pas ! Mais il faut bien en passer par là si l'on veut encore et toujours améliorer son site ...

Allez, au boulot : c'est à votre tour, maintenant !

retour