notafake
30.11.2009, 11:22:04
Einen (guten) Montag morgen zusammen
Auf meiner Webiste habe ich als Navigation neu ein Bild mit einem Imagemap verwendet.
Also in diesem Sinne
<div id="navigation" >
<map name="map">
<area onmouseover="$('#partJAM').show();" shape="poly" coords="119,125,131,108,151,72" alt="partJAM" href="JAM" />
Das Image map habe ich mit GIMP erzeugt.
Dann habe ich die map-Teile im Bild ausgeschnitten, vergrössert und als einzelne Bilder über das div gelegt, bzw. über das Bild im div gelegt und so ausgerichtet, dass genau die ausgeschnittenen Teile überdeckt werden.
<div id="navigation" >
<img src="images/sized.png" alt="Corrupt Picture" style="margin-left: -159px; position: absolute; z-index: 10;" usemap="#map" />
<map name="map">
<area onmouseover="$('#partJAM').show();" shape="poly" coords="119,125,131,108,151,72" alt="partJAM" href="JAM" />
</map>
<img class="imgmenu" onmouseout="$('#partJAM').hide();" onclick="$('.hidden:visible').fadeOut(300); $('#home').fadeIn(500);" src="images/partJAM.png" id="partJAM" alt="Corrupt Picture" />
Per Javascript entsteht nun bei einem "mouseover" eine Art vergrösserungs-effekt.
Imagemap onmouseover = zeige grosser teilauschnitt des bildes.
So, nun läuft alles stabil, aber natürlich nur solange das Div genau die richtige grösse besitzt. Ich kann also nicht an verschiedene Bildschirmauflösungen anpassen, was ein Problem darstellt.
Hat jemand eine Idee wie ich dieses Problem angehen könnte?
Auf meiner Webiste habe ich als Navigation neu ein Bild mit einem Imagemap verwendet.
Also in diesem Sinne
<div id="navigation" >
<map name="map">
<area onmouseover="$('#partJAM').show();" shape="poly" coords="119,125,131,108,151,72" alt="partJAM" href="JAM" />
Das Image map habe ich mit GIMP erzeugt.
Dann habe ich die map-Teile im Bild ausgeschnitten, vergrössert und als einzelne Bilder über das div gelegt, bzw. über das Bild im div gelegt und so ausgerichtet, dass genau die ausgeschnittenen Teile überdeckt werden.
<div id="navigation" >
<img src="images/sized.png" alt="Corrupt Picture" style="margin-left: -159px; position: absolute; z-index: 10;" usemap="#map" />
<map name="map">
<area onmouseover="$('#partJAM').show();" shape="poly" coords="119,125,131,108,151,72" alt="partJAM" href="JAM" />
</map>
<img class="imgmenu" onmouseout="$('#partJAM').hide();" onclick="$('.hidden:visible').fadeOut(300); $('#home').fadeIn(500);" src="images/partJAM.png" id="partJAM" alt="Corrupt Picture" />
Per Javascript entsteht nun bei einem "mouseover" eine Art vergrösserungs-effekt.
Imagemap onmouseover = zeige grosser teilauschnitt des bildes.
So, nun läuft alles stabil, aber natürlich nur solange das Div genau die richtige grösse besitzt. Ich kann also nicht an verschiedene Bildschirmauflösungen anpassen, was ein Problem darstellt.
Hat jemand eine Idee wie ich dieses Problem angehen könnte?