image Carte w/Rollovers à base d'images Délimité par AREA Coordonnées, si possible jQuery

Question

Fondamentalement, je besoin ceci:

http://plugins.jquery.com/project/maphilight

... mais au lieu d'avoir juste les balises <AREA> recieve une bordure ou de remplissage En cas de retournement, demandez-leur de recevoir une image d'arrière-plan. L'image doit être découpée par la forme du <AREA> s.

Des idées?

Fondamentalement, la configuration j'est la suivante:

<img usemap="#map" /> 
<map name="map"> 
    <area coords="foo,bar"> 
    <area coords="foo,bar"> 
    <area coords="foo,bar"> 
</map> 

Et je veux changer au survol de l'image d'arrière-plan de chaque étiquette AREA.

Une version fausse de ce que je veux est ici:

tankedup-imagerie. com/css_dev/rollover.html

... sauf qu'ici, notez qu'il ne s'agit pas d'une "vraie" carte-image, les zones de survol ne sont pas vraiment liées par des balises AREA.

Answer 1

OK, ma solution.

Commencez avec une carte d'image comme ceci:

<img src="nav.jpg" id="main-nav" usemap="#imagemap" />    

<map id="imagemap" name="imagemap"> 
    <area id="item1" href="item1.shtml" shape="poly" coords="153,52,484,6,492,43,158,74" /> 
    <area id="item2" href="item2.shtml" shape="poly" coords="95,96,287,84,289,112,95,118,97,118" /> 
</map> 

Ensuite, j'utilise jQuery pour échanger l'attribut SRC du IMG lorsque l'utilisateur passe au-dessus de chaque AREA spécifique, puis retourner le IMG à l'état bloqué sur passage à la souris

$(document).ready(function() { 

//set off state 
var nav_off = "/images/nav-off.jpg"; 

// functions for over and off 
function over(image) { 
    $("#main-nav").attr("src", image); 
} 
function off() { 
    $("#main-nav").attr("src", nav_off); 
} 

$("#imagemap area").hover(
    function() { 
     var button = $(this).attr("id"); 
     over("/images/nav-" + button + ".jpg"); 
    }, 
    function() { 
     off(); 
    }); 

}); 

Cela pourrait probablement être combiné avec CSS Sprites en quelque sorte, l'échange background-position de quelque image en cas de tonneau.

Answer 2

Je ne pense pas que vous pouvez le faire avec une vraie carte d'image:

<img usemap="#map" /> 
<map name="map"> 
    <area coords="foo,bar"> 
    <area coords="foo,bar"> 
    <area coords="foo,bar"> 
</map> 

Mais, il y a un moyen de faire ce que vous voulez avec seulement HTML et CSS en utilisant une variante de la CSS sprites technique. Un tutoriel sur la façon de le faire est ici: http://www.noobcube.com/tutorials/html-css/css-image-maps-a-beginners-guide-/

Un bref aperçu de cette technique:DEMO Code

d'abord, créez votre image comme vous le feriez normalement. Ensuite, créez vos superpositions en doublant la taille de la toile de votre image et en plaçant le pointeur dans la nouvelle moitié inférieure de l'image. Vous finirez avec quelque chose comme ceci:

I hope your image looks better than this. http://demo.raleighbuckner.com/so/1369820/test.jpg

Vient ensuite le code HTML et CSS. Nous allons utiliser une liste non ordonnée:

<style> 
    #fakeMap { 
     list-style: none; margin: 0; padding: 0; /* removes the default UL styling */ 
     position: relative;      /* allows the LIs to be positioned */ 
     width: 200px;        /* width of the image */ 
     height: 100px;       /* height of the image */ 
     background: url(test.jpg) no-repeat 0 0; /* shows the image */  
    } 
    #fakeMap li { 
     position:absolute; /* these will be the "area" elements */ 
    } 
    #fakeMap a { 
     display:block;  /* along with the width and height, makes the link */ 
     width:100%;   /* clickable for the full size of the LI   */ 
     height:100%; 
     text-indent:-5000px; /* pushes the text of the link offscreen */ 
    } 

    /* Set up each LI to be the right size and positon. */ 
    #maplink1 { width:15px; height:15px; top:10px; left:10px; } 
    #maplink2 { width:20px; height:20px; top:30px; left:30px; } 
    #maplink3 { width:80px; height:30px; top:20px; left:70px; } 

    /* Set the image for all of the links. */ 
    #fakeMap a:hover { background: url(test.jpg) no-repeat; } 

    /* Set the position of the bg for each link individually. */ 
    #fakeMap #maplink1 a:hover { background-position:-10px -110px; } 
    #fakeMap #maplink2 a:hover { background-position:-30px -130px; } 
    #fakeMap #maplink3 a:hover { background-position:-70px -120px; } 
</style> 

<ul id="fakeMap"> 
    <li id="maplink1"><a href="link1.htm">Link 1 Text</a></li> 
    <li id="maplink2"><a href="link2.htm">Link 2 Text</a></li> 
    <li id="maplink3"><a href="link3.htm">Link 3 Text</a></li> 
</ul>