Salut les codeurs,
J'aurais une question sur un vieux tuto de notre ami Grafikart concernant la création du carte intéractive avec jQuery (https://www.youtube.com/watch?v=olKD4nAE81A).
Je ne sais pas si c'est moi ou si il ne l'explique pas vraiment, mais je ne comprends pas à quoi sert la img avec png transparent, qu'on relie à map avec usemap. Il dit qu'on "comprendra plus tard pourquoi créer cette balise" sauf qu'il ne l'explique pas au final, ou alors j'ai raté le moment. Aussi, comment se fait il que récuperer l'index au mouseover ne fonctionne que si cette img est au dessus de .overlay avec z-index ?
Bref j'espère avoir été assez clair,
Merci d'avance à ceux qui prennent le temps de répondre !
P.S. : Voici le code pour ceux qui ne veulent pas se taper toute la vidéo
.map{
width:998px; height: 978px; position: relative;
background:url(images/cartefrance.png) left top no-repeat;
}
.map .overlay{
width:998px; height: 978px; position: absolute;
background:url(images/cartefrance.png) 998px top no-repeat;
top:0; left:0;
z-index: 1;
}
.map img{
position:absolute;
top:0; left:0;
z-index: 2;
}
<script type="text/javascript">
jQuery(function($){
$('.map').append('<div class="overlay">');
$('.map area').mouseover(function(){
var index = $(this).index();
var left = -index * 998 - 998;
$('.map .overlay').css({
backgroundPosition : left+"px 0px"
});
});
$('.map').mouseout(function(){
$('.map .overlay').css({
backgroundPosition : "998px 0px"
});
});
});
</script>
</head>
<body>
<div class="map">
<img src="images/vide.png" width="999" height="978" usemap="#Map"/>
<map name="Map">
<area>
<area>
....
</map>
Redrum