Discussion :

[solorac]

Bonjour la communauté,

J'ai trouvé un excellent tuto sur les maps (http://cyberzoide.developpez.com/html/map.php3) mais j'ai l'impression qu'il ne s'applique qu'aux images insérées via du html.
Or mon image est insérée via une div en css.

Comment faire donc pour faire une zone réactive dans cette image ?

Je ne trouve rien.

Merci pour votre aide

voici mon code :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
<div id="headerv">      
        <map name="mail" id="id_mail">
      	<area shape="rect" coords="730,200,990,220" href="#" usemap="#mail" alt=""/>
	</map>
 
	</div>

[Invité]

Bonjour,

où est le CSS concerné ?

[solorac]

Eh bien, je voudrais mettre une zone réactive dans une image qui est définie dans une div.

[Invité]

Merci, je sais lire.

Ca ne répond pas à ma question...

Et tant que tu y es, explique-nous pourquoi tu n'utilises pas simplement une balise <img /> ?

[solorac]

Tout simplement parce que je ne veux pas insérer mon image avec img.
Mais peut-être que ce n'est pas possible de mettre une ZR dans mon image !

Code css :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
div#headerv{
background: url(../images/visiteurs/headid4-v1.png) no-repeat;
width:1000px;
height:230px;
margin-top:10px;	
}

[Invité]

Une solution, avec une image vide (1px x 1px transparente).

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
<div id="headerv">
	<img src="../images/vide.png" usemap="#mail" />
	<map name="mail">
		<area shape="rect" coords="730,200,990,220" href="#MENU"/>
	</map>
</div>

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
div#headerv {
	background: url(../images/visiteurs/headid4-v1.png) no-repeat;
	width:1000px;
	height:230px;
	margin-top:10px;	
}
div#headerv > img { position:absolute; display:block; width:100%; height:100%; top:0; left:0; right:0; bottom:0; }

[solorac]

Merci, je vais tester ta solution.