Map hover effekt auf area?

[musclebreast]

Hallo,

ich habe folgende Landarte und in dieser bestimme ich die einzelnen bereiche mit dem area Tag:

 <img src="\img\customization\pdd\test.png" width="6908" height="652" border="0" alt="Product" usemap="#Map">
  <map name="Map">
    <area shape="rect" coords="3700,30,4200,140"
          onclick="Group(1700603);" alt="Development"[COLOR=#000080] onMouseOver=[COLOR=#0000FF]""[/COLOR][/COLOR]>
 
    <area shape="rect" coords="730,335,900,450"
          onclick="Group(1757270);" alt="Tools">

    
  </map>

Ich möchte jetzt gerne einen Mousehover Effekt wenn man über ein Area Bereich geht. Ich habe eine durchsichtige Grakif die ich reinladen müsste. Da die areas aber keine ID habe kann ich schwer eine Grafik reinladen...geht das überhaupt was ich vorhabe?

LG,

Lara

 

[Tronjer]

Interessante Frage, diesen Fall hatte ich noch nicht, aber was macht denn dein Click-Event?

Wäre ich mit diesem Problem konfrontiert, würde ich in Reihenfolge drei Dinge ausprobieren.

- Erste Überlegung: Wenn click() funktioniert, sollte auch hover() klappen.
- Den einzelnen <areas> entweder CSS-Selektoren zuweisen, oder diese durch traversieren in JS adressieren.
- Falls beides nicht gelingt, ein unsichtbares Div mit darin verschachtelten Blockelementen per position:absolute über dem Image platzieren, und darin per CSS oder JS Einzelbilder laden.

 

[threadi]

Ich vermute anhand deiner Beschreibung, dass es dir darum geht bei Mausberührung eines <area>-Elements das Bild im <img>-Element auszutauschen? Dafür brauchst Du nicht zwingend eine ID. Das geht auch ohne. Es wäre lediglich hilfreich, wenn das <img>-Element eine ID oder einen Namen hätte.

Um eine Grafik in einem <img>-Element auszutauschen reicht theoretisch folgender Code:

document.getElementById("IdDesImgElements").src="neuegrafik.png";

Hinweis: Achte auf die Schreibweise des Pfades zu dem Bild. Der von dir angegebene Pfad wird so nur auf deinem lokalen System vermutlich funktionieren. Im Web sind die Schrägstriche nicht diese \ sondern diese /.

 

[Tronjer]

Ich vermute anhand deiner Beschreibung, dass es dir darum geht bei Mausberührung eines <area>-Elements das Bild im <img>-Element

Das wäre die vierte Möglichkeit. Man wechselt einfach das komplette src Image beim Hovern über ein <area> Element. Aber auch in diesem Fall benötigt es einen Eventhandler oder CSS-Selektor auf dem entsprechenden Element.

 

[musclebreast]

Hallo Jungs,

danke für eure tollen Beiträge....also der mouseover funktion geht. Schaut in mein Beispiel. Die Funktion test wird aufgerufen.

<script>
function test() {

    alert('drin');
}

</script>



<img src="\img\customization\pdd\test.png" width="6908" height="652" border="0" alt="Product" usemap="#Map">   <map name="Map">     <area shape="rect" coords="3700,30,4200,140"           onclick="Group(1700603);" alt="Development"[COLOR=#000080] onMouseOver=[COLOR=#0000FF]"test();"[/COLOR][/COLOR]>       <area shape="rect" coords="730,335,900,450"           onclick="Group(1757270);" alt="Tools">         </map

also mein ganze image will ich nicht austauschen sondern ja nur nen hover effekt auf den area bereich legen. Irgendwie habe ich da ne schleife heute im Gehirn:) Aber kann ich direkt auch nen moushover effekt im area laden ohne meine funktion aufzurufen in der ich alles ausführen will? Weil in meiner funktion muss ich ja dann genau wieder auf das entsprechende area zugreifen, was ja nicht so elegant geht.

LG,

Lara

 

[Tronjer]

Ich kenne deine Seite nicht, aber mal angenommen, die Karte hätte zehn Länder und beim Hovern soll das unter dem Cursor befindliche Land farblich hervorgehoben werden, dann wäre Threadis Ansatz der einfachste.

Erstelle 11 Grafiken in der Größe deiner image-map. Die erste ist "neutral" und bei den anderen zehn wird jeweils ein Land eingefärbt. Ich würde an die Dateinamen fortlaufende Zahlen anhängen und diese beim Funktionsaufruf als Parameter übergeben. In die zehn <aereas> kommen nun als onmouseover das korrespondiere und als onmouseout das neutrale Bild.

Also bsw. so (ungetestet):

<area shape="rect" coords="3700,30,4200,140"
          onclick="Group(1700603);" alt="Development" onMouseOver="wechselBild(1)" onmouseout="standardBild()">


<script>
function wechselBild(Nr) {
     document.getElementById("IdDesMapImages").src="'wechselbild' + Nr + '.png'";
}

function standardBild() {
     document.getElementById("IdDesMapImages").src="standardbild.png";
}
</script>

Willst du es hingegen rein mit CSS machen und hast nur ein großes und zehn kleine Bilder, dann käme die dritte Lösung aus meinem vorherigen post in Frage.

 

[Tronjer]

Falls der CSS-Ansatz nicht verständlich gewesen sollte:

Erstelle ein Div und weise diesem das große Bild als background-image zu. Eine Imagemap ist hier überflüssig. In das Div kommen <p> Container mit den kleinen src images. Verschiebe die Container per CSS, bis alle kleinen Bilder perfekt über dem background-image positioniert sind. Zum Schluss bekommen die <p> innerhalb dieses Divs ein visibility: hidden, und mit dem angehängten :hoher ein visibility: visible zugewiesen.

 

[musclebreast]

Hallo,

danke. Ich werde den letzten Ansatz mal probieren...es ist eine karte mit über hundert teilen..die splitten ist kaum möglich:) Ich werde euch berichte wie gut es lief...

einen schönen abend euch...