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 22 janvier 2019 - Semaine 04 - Saint Vincent (Demain: Saint Barnard)
Aujourd'hui, c'est l'anniversaire de Frank Leboeuf (1968-51 ans), footballeur français (défenseur). Autre 22 janvier: 1981 - Début de la série américaine Dallas sur les écrans français (TF1).
Haut de page Easy-Micro