Map dans un image CSS

Version imprimable

14/09/2017, 16h31
solorac

Map dans un image CSS
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:

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>
14/09/2017, 16h40
Invité

Bonjour,

où est le CSS concerné ?
14/09/2017, 16h42
solorac

Eh bien, je voudrais mettre une zone réactive dans une image qui est définie dans une div.
14/09/2017, 16h44
Invité

Merci, je sais lire.

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

Et tant que tu y es, explique-nous pourquoi tu n'utilises pas simplement une balise <img /> ?
14/09/2017, 16h50
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:

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

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

Code:

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:

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; }

14/09/2017, 17h05
solorac

Merci, je vais tester ta solution.