Zones réactives HTML
Zones HTML réactives
Pour réaliser une zone réactive HTML, soit une zone transparente et cliquable, on utilise les balises HTML "map" et "area" associés aux attributs name et usemap d'une image.
Dans le body:
Explication
L'image est liée à la zone réactive via l'attribut usemap et le nom "mamap".
◊ shape = type de forme (rect pour rectangle, circle pour cercle ou poly pour polygone).
◊ coords = les 4 coordonées de la zone réactive. Soit point de départ (0,0) et point d'arrivée (ici la taille de l'image: hauteur, largeur).
Pour un rectangle, coordonnées des coins supérieurs gauche et inférieur droit. Pour un polygone, coordonnées de chaque angle. Pour un cercle, coordonnées du centre et de la dimension du rayon.
Exemple avec un script javascript pour image survolée. Dans le body:
Note: L'image survolée est réalisé en javascript via le nom de l'image (name="monimg) et les deux évènements manuels "onmouseover" et "onmouseout".
Dans le body:
<img src="img1.gif" usemap="#mamap" alt="">
<map name="mamap"><area shape="rect" coords="0,0,10,100" href="https://www.easy-micro.org"></map>
<map name="mamap"><area shape="rect" coords="0,0,10,100" href="https://www.easy-micro.org"></map>
Explication
L'image est liée à la zone réactive via l'attribut usemap et le nom "mamap".
◊ shape = type de forme (rect pour rectangle, circle pour cercle ou poly pour polygone).
◊ coords = les 4 coordonées de la zone réactive. Soit point de départ (0,0) et point d'arrivée (ici la taille de l'image: hauteur, largeur).
Pour un rectangle, coordonnées des coins supérieurs gauche et inférieur droit. Pour un polygone, coordonnées de chaque angle. Pour un cercle, coordonnées du centre et de la dimension du rayon.
Exemple avec un script javascript pour image survolée. Dans le body:
<a href="javascript:;" onmouseover= "document.monimg.src='image2.gif';" onmouseout= "document.monimg.src='image1.gif';"><img name="monimg" src="image1.gif" usemap="#mamap"></a>
<map name="mamap"><area shape="rect" coords="0,0,10,100" href="https://www.easy-micro.org"></map>
<map name="mamap"><area shape="rect" coords="0,0,10,100" href="https://www.easy-micro.org"></map>
Note: L'image survolée est réalisé en javascript via le nom de l'image (name="monimg) et les deux évènements manuels "onmouseover" et "onmouseout".