Anfängerfrage zu imagemap und mouseover

[thomaskeil]

Ich bin noch Anfänger und bastele gerade an Folgendem herum:

Ich habe ein Bildelement mit einer imagemap (in GIMP gemacht) mit verschiedenen klickbaren Bereichen mit links versehen:

<img style="width: 983px; height: 114px; position: absolute; left: 63px; top:
8px;" alt="alternativtext" src="images/bild0.png" usemap="#map" />

<map name="map">
<area shape="rect" coords="12,1,200,97" href="link1.html" />
</map><br>

Das funktioniert problemlos, die imagemap besteht in Wahrheit aus vielen shapes, ist jetzt nur ein Beispiel, ich will es ja begreifen.

Jetzt möchte ich, das bei Überfahren des links mit der Maus ein anderes Bild angezeigt wird und bei Verlassen wieder das alte. Ich suche schon eine ganze Weile herum und wollte es wie folgt machen, aber ich bringe es einfach nicht zum funktionieren:

<area shape="rect" coords="12,1,200,97" onMouseOver="src='images/bild1.png'";
onMouseOut="src='images/bild0.png'"; href="link0.html" />

Kann mich da Jemand in die richtige Richtung schubsen?

 

[JannisL]

AW: Anfängerfrage zu imagemap und mouseover

http://www.jacobi22.com/pontiac/testbild/test.html

Imagemap mit Mouseover - mediengestalter.info

Code kannst ja einfach aus dem Quelltext entnehmen

 

[thomaskeil]

AW: Anfängerfrage zu imagemap und mouseover

Danke, da muss ich mich noch weiter reinknien. Der code ist mir an vielen stellen einfach noch zu hoch, und es scheinen da einige java-Funktionen zu definieren sein.

Und in dem Mediengestalter-Forum das Du verlinkt hast, finde ich unter anderem Folgendes:

"Das wird mit ner IMagemap nicht funktionieren also am besten gleich wieder vergessen."

Damit verstehe ich aber immer noch nicht wieso??

 

[sokie]

AW: Anfängerfrage zu imagemap und mouseover

<area shape="rect" coords="12,1,200,97" onMouseOver="src='images/bild1.png'";
 onMouseOut="src='images/bild0.png'"; href="link0.html" />

kann nicht funktionieren, weil du dich hier im Area-element befindest. Area hat aber keine Eigenschaft "src".
wenn du einen Bildwechsel beim 'hover' über dem <img> haben willst, kannst du das am <img onmouseover=...> so machen. In deinem Beispiel musst du allerdings dein Ziel für den Bildwechsel (also das <img>) zunächst selektieren, und dann den Wechsel iniziieren.

um das einfach zu halten, könntest du deinem Bild eine id geben, und die styles dafür gleich auch auslagern, so wird das ganze übersichtlicher:

<img id="bildMitMap" alt="alternativtext" src="images/bild0.png" usemap="#map" />

css:

#bildMitMap{
  width: 983px; 
  height: 114px; 
  position: absolute; 
  left: 63px; 
  top: 8px;"
}

im head Bereich kannst du dir nun eine Funktion formulieren, dass dein img auswählt und die Eigenschaft "src" entsprechend deiner Angaben manipuliert, zB:

<script type="text/javascript">
  function mausOver(bild){
    document.getElementById("bildMitMap").src = bild;
  }
  function mausOut(){
    document.getElementById("bildMitMap").src = "/images/bild0.png";
  }
</script>

der Aufruf der funktion im area wäre dann etwa:

<area shape="rect" coords="12,1,200,97" onMouseOver="mausOver('images/bild1.png')"
  onMouseOut="mausOut()" href="link0.html" />

"Das wird mit ner IMagemap nicht funktionieren also am besten gleich wieder vergessen."

solche Aussagen sind natürlich wenig hilfreich (und so auch nicht wahr).
hier ein Beispiel, was man mit diesem Bildwechsel per imagemap machen kann (allerdings hier mit jQuery unterstützt):

 

[thomaskeil]

AW: Anfängerfrage zu imagemap und mouseover

@Sokie: Ja genau, um die Effekte wie im Beispiel geht es. Ich hatte auch noch weiter gebastelt und hatte noch eine Erklärung gefunden, die mir recht simpel erschien und ohne Definition einer Funktion auskommt (soweit bin ich leider noch nicht, das ich mit damit auskenne: http://www.web-toolbox.net/webtoolbox/java/mouseover-erklaerung/mouseover-simpel.htm

Ich habe wie Du schreibst dem Bild erstmal eine ID gegeben:

<img name="bild" style="width: 983px; height: 114px; position: absolute; left:
63px; top: 8px;" alt="menu" src="images/nav0.png" usemap="#map" />

und dann in der image map (natürlich zu jedem shape):

<map name="map">
<area shape="rect" coords="12,1,200,97" href="index.html"
onMouseOver="bild.src='images/bild1.png'" onMouseOut="bild.src='images/bild0.png'" />

..u.s.w.... </map>

Es funktioniert und ich finde es auch einleuchtend, aber aus Neugier: Hat Deine Methode mit der Definition einer Funktion Vorteile, die ich noch nicht überblicke?

 

[sokie]

AW: Anfängerfrage zu imagemap und mouseover

Die Vorteile des definierens von funktionen in einem eigenen script Bereich fallen bei deinem einfachen Beispiel vielleicht weniger ins Auge, aber wenn die funktion umfangreicher wir, sieht man sehr schnell, dass der Code der Seite so augeblasen wird, dass selbst die fehlersuche praktisch nicht mehr möglich ist. Zum Anderen spart man so schnell eine Menge Zeilen code, weil in deinem Fall die Funktion jedes Mal beschrieben werden muss, bei dem definieren der funktion im head-script-bereich nur per einfachen Aufruf des funktionsnamen (ggf mit parametern) im Markup erscheint.
Modernes Javascript versucht allerdings ganz ohne diese "inline-Events" wie onload,onmouseover, onmouseout etc auszukommen, um den HTML-Text der Seite strukturiert und schlank zu halten.
Dem würde allerdings vorausgegangen sein, dass die styles auch nicht inline notiert wurden, sondern in einem stylebereich, oder einer css datei.

 

[thomaskeil]

AW: Anfängerfrage zu imagemap und mouseover

Danke für die schnelle Hilfe Jetzt habe ich glaube ich vom Grundsatz her verstanden. Ich bleibe mal dran und wenn mein mouseover etwas komplexeres auslösen soll versuche ich mich mal an den Funktionen, und solange mein "inline-event" nur einen einzigen Befehl auslöst lasse ich es wie es ist, zumindest solange ich noch nicht besser verstehe. Ich bin ja schon froh, vom Texteintippen in den Kompozer bis dahin gekommen zu sein.
Danke nochmal für die Erklärung, jetzt habe ich wenigstens über copy & paste hinaus auch ein paar Zusammenhänge verstanden.

 

[sokie]

AW: Anfängerfrage zu imagemap und mouseover

ich hab nochmal nachgesehen, meine "inline-events" heissen richtig event-handler. Die richtigen Begrifflichkeiten sind ja für eine etwaige Recherche wichtig.

Da hast du dir ein schönes kleines Projekt als einstieg ausgesucht, viel Erfolg beim weiteren "entdecken"