Cette page présente des utilisations d'une image pour activer des liens hypertexte, des exemples de changement d'image au survol par la souris, et des exemples avec utilisation de javascript.
Les exemples:
Nous examinons ci-après des liens 'hypertexte' créés soit par la balise A, soit par la balise AREA.
n'est absolument pas sensible au passage de la souris.
Le lien ci-dessus réagit à l'événement 'OnMouseOut'; la réaction consiste à afficher une boîte-message avec un texte. Il a été créé par:
<a href="c_js.html" onMouseOut="alert('On a quitté le lien ...')">
Que se passe t-il, en quittant ce lien ?
</a>
Voici une zone contenant une image :
qui change quand la souris la
survole. Cela est obtenue en utilisant la sensibilité des zones
définies par la balise a ; le code HTML est :
<a href="javascript:alert('On clique ...')"
onMouseOver="document.images.doigt.src='../../u/lettres/main1.gif'"
onMouseOut="document.images.doigt.src='../../u/lettres/main.gif'">
<img name="doigt" src="../../u/lettres/main.gif" border="0" alt="main.gif">
</a>
Le passage de la souris provoque l'utilisation soit de l'image main.gif, soit de main1.gif (voir la valeur de onMouseOver et onMouseOver).
qui permet également un lien hypertexte, sans utilisation de la balise A;
le lien est créé dans la balise MAP; la liaison entre l'image et cette
balise est effectuée par l'identificateur 'changeA' présent
pour
Voici les lignes HTML:
<img src="../../u/lettres/let_a.gif" name="lettreA" usemap="#changeA" border="1">
<map name="changeA">
<area href=
"javascript:void(self.defaultStatus='il y a eu un clic sur A !!!')"
shape="rect" coords="0,0,30,30"
onMouseOver="document.images.lettreA.src='../../u/lettres/let_a1.gif'"
onMouseOut="document.images.lettreA.src='../../u/lettres/let_a.gif'">
</map>
mais encore
dont la sensibilité est limitée au passage de la souris à
gauche ou à droite de l'image, en définissant deux bandes
comme ci dessous :
<img src="../../u/lettres/let_b.gif" name="lettreB"
width="50" height="30" title="passez la souris sur la droite ou la gauche"
usemap="#changeB">
<map name="changeB">
<area href="javascript:void(alert('clic à GAUCHE'))"
title="la souris est du coté gauche"
shape="rect" coords="0,0,8,30"
onMouseOver="changeImage('lettreB','../../u/lettres/let_b1.gif')"
onMouseOut="changeImage('lettreB','../../u/lettres/let_b.gif')">
<area
onClick="alert('clic à DROITE')"
title="la souris est à droite"
shape="rect" coords="42,0,50,30"
onMouseOver="changeImage('lettreB','../../u/lettres/let_b1.gif')"
onMouseOut="changeImage('lettreB','../../u/lettres/let_b.gif')">
</map>
Le changement d'images est effectué par la fonction changeImage qui fixe, pour la balise img dont le nom est passé en paramètre (cf premier paramètre nomBaliseImg) le fichier image concerné (cf deuxième paramètre nomFic). Voici le code :
function changeImage(nomBaliseImg,nomFic) {
document.images[nomBaliseImg].src=nomFic
}
et enfin, un clic dans l'image ci-dessus change la couleur de ce texte (revenir à l'écriture en noir).
Cet exemple montre l'utilisation de fonctions javascript qui automatisent la création de liens par images. Voyons tout d'abord le code HTML :
<script language="JavaScript">
creeImageSensible("let_c", "../../u/lettres",
"javascript:void(document.getElementById('iFonction').style.color='green')")
</script>
où la fonction creeImageSensible génére un code HTML analogue à celui indiqué précédemment; voici le texte de cette fonction :
function creeImageSensible(fic, urlCible) {
var nbi=fic; // nom balise image
// génération de la balise img
document.write('<img src="' + fic + '" '
+'width="26" height="26" border="1"'
+'name="' + nbi + '" '
+'usemap="#m_' + nbi + '">\n')
// génération de la balise map
document.write('<map name="m_'+fic+'">\n')
// ici une seule balise area
document.write(' <area href="' + urlCible +'"\n')
document.write(' shape="rect" coords="0,0,26,26"\n' )
document.write(' onMouseOver="changeImage(\''+nbi+'\',\''+fic1+'\')"')
document.write(' onMouseOut= "changeImage(\''+nbi+'\',\''+fic +'\')"')
document.write(' >')
document.write('<'+'/map>') // fermeture /map
}
Des formes quelconques peuvent être sensibles, comme on le voit dans
l'image ci-contre des départements de l'Île de France.
Chaque forme est délimitée par un contour polygonal, défini par la suite
des extrémités de chaque segment du polygone. Il suffit d'indiquer la
suite des coordonnées dans l'image des extrémités
On voit ci-dessous une partie de la balise map où apparaissent
l'indication de la forme poly et la suite des coordonnées
(x1,y1,x2,y2 ...) pour trois départements.
<map name="carteDept">
<area shape="poly"
coords="173,59,188,58,189,67,178,71,168,66,173,59"
href="javascript:affDept('75')"
title="dept 75" alt="Paris">
<area shape="poly"
coords="204,32,247,28,282,68,288,98,273,129,244,136,
224,165,191,166,181,142,208,87,214,53,204,32"
href="javascript:affDept('77')"
title="dept 77" alt="Seine et Marne">
<area shape="poly"
coords="111,20,154,38,161,47,134,121,093,61"
href="javascript:affDept('78')"
title="dept 78" alt="Yvelines">
. . .
</map>
Modifier la taile d'une image (utilisation des styles et de javascript)
Quand la souris entre dans l'image, une zone apparaît; celle-ci
disparaît quand la souris sort de l'image. Cette zone, quand elle est
visible, permet de diminuer ou d'augmenter la taille de l'image en
cliquant sur -- ou
sur ++.
Ci-dessous, à droite, figurent (1)le code d'une fonction
javascript permettant de modifier la taille de l'image, (2)la
déclaration des styles appliqués respectivement à la zone
visible/invisible et à l'image, et (3)le code html mettant le
tout en place.
La zone qui apparaît/disparaît est identifiée par la valeur zE1
(attribut id de la balise span); l'image est identifiée par im1
(voir attribut id le la balise img).
Le code Html définit un élément sensible à la souris (cf onMouseOut et
onMouseOver) contenant la zone visible/invisible et l'image.
L'image est codée directement dans le code html, c'est à dire qu'il n'y a pas de référence à un fichier image !
La balise html ressemble à <img alt="" src="data:image/gif;base64,..." />
où ... est à remplacer par le codage en base64 des octets de l'image, qui est ici de type gif mais d'autres types d'images sont également acceptables.
Voici l'image : 
et voici la balise associée :
Le site suivant permet d'obtenir ce codage : webcodertools.com/imagetobase64converter