Cursor ändert sich nicht zum Zeiger in UseMap / Bereich

Habe ich den folgenden HTML-code, die ich nicht auf der Arbeit ganz rechts in allen Browsern:

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

Bin ich versucht zu ändern, den cursor zum pointer, wenn Sie sich über einen Teil des usemap. Aber es funktioniert nicht in Chrome/Safari.

Jede Hilfe wird geschätzt.

InformationsquelleAutor der Frage nitin | 2011-07-05

  1. 36

    Chrome und Safari nicht unterstützt ändern der CSS-map oder area-Elemente. Die einzige einfache Möglichkeit, einen Mauszeiger über ein Gebiet zu haben:

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

    InformationsquelleAutor der Antwort Nico Westerdale

  2. 20

    Alle diese Lösungen sind hacks, die nicht gut funktionieren (für mich ist Sie überhaupt nicht arbeiten). Nach viel goggling, und mehr nachdenken beschloss ich, das problem, dass der browser einfach nicht wissen, wie zu machen die area-element, es kann daher nicht formatiert werden. Wenn Sie mit HTML5-Elemente, die Sie sollten vertraut sein mit dieser Herausforderung. Das ist, wenn die Glühbirne ging..

    Dies zu umgehen, stellen Sie einfach den area-tag ein block-level element. Dann können Sie Stil, wie gebraucht. Hat Super geklappt für mich:

    area {
  display: block;
  cursor: pointer;
}

    InformationsquelleAutor der Antwort elDuderino

  3. 10

    Sollte diese Arbeit auf IE, Firefox, Chrome und 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>

    InformationsquelleAutor der Antwort Jirapong

  4. 4

    IE nicht unterstützt ändern cursor in der area-tag.

    Was Sie tun müssen, ist Stich es mit 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>

    dies ist auch in Ihrem 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";
    }
}

    Dies wird zwei Dinge tun:

    • Können Sie ganz einfach ändern Sie die Bild-auf der Grundlage der imagemap Sie Blättern über.
    • Geben Ihnen die illusion, dass nur der Teil der areamap scolled über änderungen der cursor.

    InformationsquelleAutor der Antwort Webmaster

  5. 2

    Hatte ich ein ähnliches Problem. Die Lösung war das Attribut hinzufügen href="#" dem Bereich zu tun, anstatt einen CSS-hack.

    InformationsquelleAutor der Antwort aromerooca

  6. 1

    Fand ich eine tolle Lösung mit Jquery!

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

    InformationsquelleAutor der Antwort Davis

Schreibe einen Kommentar