image map hovereffekt für area-bereich

Einklappen
X
 
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

  • image map hovereffekt für area-bereich

    Hallo,

    ich hab mir eine image map gebastelt.
    Die Areabereiche sind alle Poligone, nun möchte ich bei mouseover ein .png Bild an der Stelle des Bereiches anzeigen lassen ohne die komplette Mapgrafik auszutauschen.

    Code:
    <img src="grafik.jpg" usemap="#map" width="300" height="240">
    <map name="map">
    <area shape="poly" coords="12,23,..." href="seite.html" alt="text">
    ...
    </map>
    Ich hab mal ein wenig mit onmouseover herumgespielt, doch leider komme ich nicht zu dem gewünschten Ergebniss.

    onmouseover="setAttribute(\'style\',\'background: transparent url(hover.png) center no-repeat; height: 40px; width: 40px; display: block;\')" onmouseout="setAttribute(\'style\',\'background: transparent;\')"

    onmouseover="this.className='over'" onmouseout="this.className='out'"

    Ist mein Vorhaben überhaupt möglich, hat jemand schon einmal ein ähnliches Problem gehabt?

  • #2
    also background-image würde funktionieren, wenn kein bild darüber läge ;-). erstelle ein div (meinetwegen innerhalb der area) und verpass dem die eigenschaft display: none.

    dann hast du zwei möglichkeiten. ich zeige mal nur die einfache variante. beim überfahren eines bereichs bindest du das bild ein per
    PHP-Code:
    document.getElementById('dein_bild_div').innerHTML '<img ...>'
    und positionierst das div mit
    PHP-Code:
    // relative oder absolute
    document.getElementById('dein_bild_div').style.position 'relative';
    document.getElementById('dein_bild_div').style.top 50px;
    document.getElementById('dein_bild_div').style.left 100px;
    document.getElementById('dein_bild_div').style.zIndex 100;
    document.getElementById('dein_bild_div').style.display 'block'
    so vom prinzip her.

    peter
    Nukular, das Wort ist N-u-k-u-l-a-r (Homer Simpson)
    Meine Seite

    Kommentar


    • #3
      hey danke für die Tipps, ich bin nicht grad der JS Hacker
      habe aber trotzdem mal etwas gebastelt.

      Code:
      ...
      <script language="JavaScript">
      function over(p_id, p_top, p_left) {
      var id = p_id;
      var top = p_top;
      var left = p_left;
      document.getElementById(id).innerHTML = '<img src="hover.png">';
      document.getElementById(id).style.position = 'absolute';
      document.getElementById(id).style.top = top;
      document.getElementById(id).style.left = left;
      document.getElementById(id).style.display = 'block';
      }
      
      	function out(p_id) {
      	var id = p_id;
      	document.getElementById(id).style.display = 'none';
      	}
      </script>
      
      </head><body>
      <area shape="poly" coords="10,12..." href="link.html" onmouseover="over(1, 10, 10)" onmouseout="out(1)">
      <div id="1" style="display: none;"></div>
      das funktioniert alles soweit alles schon super, aber das .png Bild flackert beim hovern , jedenfalls dann wenn der link und das div auf der gleichen posi sind, ansonsten funktionierts wunderbar.
      gibt es irgendwelche Konflikte???

      Kommentar

      Lädt...
      X