web-dev-qa-db-fra.com

Le curseur ne change pas en pointeur dans le cas Usemap/area

J'ai le code HTML suivant que je ne parviens pas à faire fonctionner correctement dans tous les navigateurs:

<div id ="right_header">     
        <img id = "usemapsignin" src="/images/sign-in-panel-wo-FB.png" usemap = "#signin">
</div>      
        <map name = "signin" >
            <area shape = "rect" coords = "30,10, 150, 50" target = "_blank" alt = "signin" id="signin"
                    onMouseOver="document.images['usemapsignin'].style.cursor='pointer'"
            onMouseOut="document.images['usemapsignin'].style.cursor='auto'"/>
            <area shape = "rect" coords = "0,113, 172, 150" target = "_blank" alt = "restowner" id = "restowner"
                onclick = "alert('Hello Restaurant Owner!')"   />
        </map>

J'essaie de changer le curseur en pointeur lorsque je suis déplacé sur une partie du plan Us. Mais cela ne fonctionne pas dans Chrome/Safari.

Toute aide serait appréciée.

htmlcursorarea
21
nitin

Chrome et Safari ne prennent pas en charge la modification du code CSS des éléments de carte ou de zone. Le seul moyen simple d’obtenir un pointeur de souris sur une zone est d’avoir:

<area ... href="javascript:void(0);" />
37
Nico Westerdale

Toutes ces solutions sont des bidouilles qui ne fonctionnent pas bien (pour moi, elles ne fonctionnaient pas du tout). Après avoir longuement réfléchi et réfléchi, j'ai déterminé que le problème était que le navigateur ne savait tout simplement pas comment rendre l'élément area, il ne pouvait donc pas être stylé. Si vous utilisez des éléments HTML5, vous devez être familiarisé avec ce défi. C'est à ce moment que l'ampoule s'est éteinte ..

Pour contourner ce problème, il suffit de définir la balise area comme un élément de niveau bloc. Ensuite, vous pouvez le styler au besoin. A bien fonctionné pour moi:

area {
  display: block;
  cursor: pointer;
}
20
elDuderino

Cela devrait fonctionner sur IE, Firefox, Chrome et Safari.

<img id="img_id" src="image.gif" border="0" usemap="#map4" />
<map id ="map4" name="map4">
    <area  shape ="poly" coords="5, 0, 100, 10, 94, 66, 0, 50" 
           href="javascript:void(0);"
           onmouseover="document.getElementById('img_id').style.cursor='pointer';" 
           onmouseout="document.getElementById('img_id').style.cursor='';"> 
</map>
10
Jirapong

IE ne prend pas en charge le changement de curseur dans la balise area.

Ce que vous devez faire, c'est tromper avec JS.

<img id="someimage" scr="images/image.jpg" usemap="#myareamap" />

<map name="myareamap">
   <area shape="poly" alt="test" title="test" coords="0,0, 50,50, 50,100, 0,100, 0,0"  onmouseover="changeimage('someimage', 'newimagesrc')" />
</map>

c'est dans votre javascript

function changeimage(id, imagesrc){
    document.getElementById(id).src = imagsrc;
    if (imagesrc = "images/image.jpg"){
       document.getElementById(id).style.cursor = "default";
    } else {
       document.getElementById(id).style.cursor = "pointer";
    }
}

Cela fera deux choses:

  • Vous permettra de changer facilement l'image en fonction de la carte d'imagerie sur laquelle ils défilent. 
  • Vous donnera l'illusion que seule la partie de l'areamap déplacée change le curseur.
4
Webmaster

J'ai eu un problème similaire. La solution a été d'ajouter l'attribut href="#" à la zone au lieu de procéder à un piratage CSS.

2
aromerooca

J'ai trouvé une bonne solution avec Jquery!

$('area').hover(function(){
    //Set your cursor to whatever
    $('body').css('cursor', 'help');
}, function() {
    //set your cursor back to default
    $('body').css('cursor', 'initial');
})
1
Davis