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 ]
Lundi 18 mars 2019 - Semaine 12 - Saint Cyrille de Jérusalem (Demain: Saint Joseph)
Aujourd'hui, c'est l'anniversaire de Luc Besson (1959-60 ans), réalisateur et producteur français, de Xavier Deluc (1958), acteur français et de Laetitia Hallyday (1975). Autre 18 mars: 1314 : supplice de Jacques de Molay, grand maître des Templiers.
Haut de page Easy-Micro