PDA

Archiv verlassen und diese Seite im Standarddesign anzeigen : Variable grösse für Imagemap Bild


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?

urvater
30.11.2009, 15:53:35
Das wirst du nur mit Javascript oder ähnlichem hinbegommen, wenn die Größe deines DIV und deiner Grafik nicht eh feste Werte beinhalten. Bei Höhen und Breitenangaben in einer festen Maßeinheit wie px,com etc. ändert sich die Größe des DIV bzw. der Grafik nicht mit. Sie haben ja einen festen Wert.
Anders sieht es da bei em etc. aus.