onmouseover funktioniert nicht recht

[AAndreasKö]

Hallo,


ich habe eine Deutschlandkarte, welche mit acht Stecknadeln (für Hamburg, Berlin usw.) versehen ist. Wenn ich mit dem Mauszeiger über die Stecknadeln gehe, dann öffnet der onmousover-Effekt eine Bild. Doch dieses Bild überdeckt zwar die Deutschlandkarte, aber nicht die übrigen darauf angeordneten Stecknadeln.

Leider bin ich auch ein aboluter Beginner, was das angeht. Anbei mal der Code:

<style> 
body { /* gilt für das gesamt body tag (wer hätts gedacht) */
font-family: "DB Office"; /* schriftart */
} 
#quotes { 
position: absolute; /* wahlweise fixed wenn das teil mitscrollen soll */
right: 0; 
bottom: 0; 
} 
</style>

<script language="JavaScript">



<!--




function popUp(URL) {
day = new Date();
id = day.getTime();
eval("page" + id + " = window.open(URL, '" + id + "', 'toolbar=0,scrollbars=0,location=0,statusbar=0,menubar=0,resizable=0,width=877,height=629,left = 0,top = 0');");
}


function sizeUp(item) {

    item.width = 31;
    item.height = 47;
    
}

function sizeDown(item) {

    item.width = 26;
    item.height = 42;
    
}





//-->

--></script>





<div style="position: relative"><div style="z-index: 0"><img alt="Deutschlandkarte" src="https://www.google.de/bereich/gg/Standorte/Bilder/Landkarte%20Standorte_UGG_Gesamt.jpg" border="0"/>
<div style="position: absolute; left: 910px; top: 280px"><input type=image img src="https://www.google.de/bereich/gg/Standorte/Bilder/stecknadel.gif" onmouseover="sizeUp(src='https://www.google.de/bereich/gg/Standorte/Bilder/Desert.jpg')" onmouseout="src='https://www.google.de/bereich/gg/Standorte/Bilder/stecknadel.gif'"><figcaption><b>Berlin</b></figcaption></a></div>
<div style="position: absolute; left: 630px; top: 360px"><img src="https://www.google.de/bereich/gg/Standorte/Bilder/stecknadel.gif" onmouseover="sizeUp(src='https://www.google.de/bereich/gg/Standorte/Bilder/Desert.jpg')" onmouseout="src='https://www.google.de/bereich/gg/Standorte/Bilder/stecknadel.gif'"><figcaption><b>Duisburg</b></figcaption></a></div>
<div style="position: absolute; left: 870px; top: 360px"><img src="https://www.google.de/bereich/gg/Standorte/Bilder/stecknadel.gif" onmouseover="sizeUp(src='https://www.google.de/bereich/gg/Standorte/Bilder/Desert.jpg')" onmouseout="src='https://www.google.de/bereich/gg/Standorte/Bilder/stecknadel.gif'"><figcaption><b>Leipzig</b></figcaption></a></div>
<div style="position: absolute; left: 920px; top: 395px"><img src="https://www.google.de/bereich/gg/Standorte/Bilder/stecknadel.gif" onmouseover="sizeUp(src='https://www.google.de/bereich/gg/Standorte/Bilder/Desert.jpg')" onmouseout="src='https://www.google.de/bereich/gg/Standorte/Bilder/stecknadel.gif'"><figcaption><b>Dresden</b></figcaption></a></div>
<div style="position: absolute; left: 680px; top: 480px"><img src="https://www.google.de/bereich/gg/Standorte/Bilder/stecknadel.gif" onmouseover="sizeUp(src='https://www.google.de/bereich/gg/Standorte/Bilder/Desert.jpg')" onmouseout="src='https://www.google.de/bereich/gg/Standorte/Bilder/stecknadel.gif'"><figcaption><b>Frankfurt</b></figcaption></a></div>
<div style="position: absolute; left: 680px; top: 530px"><img src="https://www.google.de/bereich/gg/Standorte/Bilder/stecknadel.gif" onmouseover="sizeUp(src='https://www.google.de/bereich/gg/Standorte/Bilder/Desert.jpg')" onmouseout="src='https://www.google.de/bereich/gg/Standorte/Bilder/stecknadel.gif'"><figcaption><b>Karlsruhe</b></figcaption></a></div>
<div style="position: absolute; left: 840px; top: 570px"><img src="https://www.google.de/bereich/gg/Standorte/Bilder/stecknadel.gif" onmouseover="sizeUp(src='https://www.google.de/bereich/gg/Standorte/Bilder/Desert.jpg')" onmouseout="src='https://www.google.de/bereich/gg/Standorte/Bilder/stecknadel.gif'"><figcaption><b>M&uuml;nchen</b></figcaption></a></div>
<div style="position: absolute; left: 740px; top: 210px"><img src="https://www.google.de/bereich/gg/Standorte/Bilder/stecknadel.gif" onmouseover="sizeUp(src='https://www.google.de/bereich/gg/Standorte/Bilder/Desert.jpg')" onmouseout="src='https://www.google.de/bereich/gg/Standorte/Bilder/stecknadel.gif'"><figcaption><b>Hamburg</b></figcaption></a></div>

Es wäre wirklich wunderbar, wenn jemand von euch mir den Fehler aufzeigen könnte...aber bitte so, dass ich es auch verstehe:rtfm:

 

[Joose]

Du hast dich hier ein bisschen im Forum geirrt.
Java != JavaScript

Hab den Thread mal in den richtigen Bereich verschoben, vielleicht findet sich hier ja trotzdem jemand der dir helfen kann

 

[AAndreasKö]

Ach was...Java ist nicht gleich JavaScript???? Schon was gelernt:lol:

 

[Maggot]

Ich habe mich jetzt nicht durch deinen Code gewühlt aber wenn du das PopUp aufmachst, setz den z-wert des PopUps (mittels css) auf eine hohe zahl. So wird das PopUp als letztes gerendert und ist somit über allen anderen Elementen.

 

[AAndreasKö]

Hallo Patrick,

vielen Dank für die Info. Aber wie muss das aussehen? Wie gesagt...obwohl ein bisschen Ahnung mit CSS vorhanden ist, bin ich Beginner im Zusammenhang mit JavaScript ;(. Ich weiß leider nicht wie ich den z-index korrekt einbinde.

 

[AAndreasKö]

Okay Patrick.

Hab jetzt wieder den Draht zu CSS gefunden. Danke!

 

[Maggot]

Gehts jetzt?
Wo du es genau einbindest konnte ich dir nicht genau sagen weil ich mich durch deinen code nicht gewühlt habe. Das mit dem z-index war nur eine naheliegende Vermutung

 

[AAndreasKö]

Hallo Patrick,


läuft jetzt. Besten Dank.

Nun habe ich das nächste Problem.
Wie bekomme ich den Mouseover-Effekt (siehe oben) bzw. das Bild positioniert? Es soll links unten im Bild angezeigt werden. Derzeit wird es entsprechend neben der Maus angezeigt.

Vielen Dank für die Hilfe.
MfG

Andreas

 

[Maggot]

Das sind jetzt nurnoch CSS einstellungen wenn mich nicht alles täuscht. Da kann ich dir leider nicht viel weiterhelfen.

Ich würde irgednwie schauen das dass DIV (der MouseOver) unter dem Div vom Bild angezeigt wird.

 

[AAndreasKö]

Wie meinen Patrick?