Easy-Micro


LANGAGE Langage HTML
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:
<img src="img1.gif" usemap="#mamap" border="0" height="10" width="100" alt="" />

<map name="mamap">
<area shape="rect" coords="0,0,10,100" href="http://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" border="0" height="10" width="100" /></a>

<map name="mamap">
<area shape="rect" coords="0,0,10,100" href="http://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".


Suivez les aventures des skippers aquitains sur EasyVoile.com
Flux RSS Easy-Micro - Abonnez-vous Easy-Micro [ François Bisch ]
Mardi 25 juin 2019 - Semaine 26 - Saint Prosper (Demain: Saint Anthelme)
Aujourd'hui, c'est l'anniversaire de George Michael (1963-56 ans), auteur-compositeur-interprète anglais. Autre 25 juin: 1991 - La Croatie et la Slovénie proclament lеur indépendance de la Yοugoslavie.
Haut de page Easy-Micro