Suche Info bei Mousover Script

shazzy · 20 Januar 2007

Hi,
also erstmal muss ich sagen, dass ich nicht wirklich Ahnung von JS habe. Ich fummel mir das immer irgendwie zurecht, dass das passt.

Ich habe eine Seite, in der ein großes Bild ist, auf welchem Hotspots zu anderen Seiten liegen. Jetzt möchte ich, dass beim rüberfahren der Hotspots oben in einem DIV Container ein Text angezeigt wird, der erklärt, was es unter dem Link zu sehen gibt. Wichtig ist, dass die Textfarbe auch vom jeweiligen Hotspot abhängig ist, da es sich dabei um verschiedene Kategorien handelt.
Also irgendwo müsste quasi zu jeden Hotspot der Infotext und die Schriftfarbe hinterlegt sein.

Zur Veranschaulichung hier ein Bild:

Vielen Dank schonmal !

N10B · 21 Januar 2007

Code:

onMouseover="alleAttributeDieDuAuchInHTMLVerwendenKannst"

Web_spider · 21 Januar 2007

jo also:

HTML:

//Zur übersicht
<html>
<head>
<title>...</title>
<script type="text/javascript">
var texte = new Array(
"Info Text zu Hotspot 1",   //Index 0
"Info Text zu Hotspot 2",   //Index 1
"Info Text zu Hotspot 3",   //Index 2
"Info Text zu Hotspot 4");  //Index 3
function zeigeInfo(index, id){
document.getElementById(id).innerHTML = texte[index];
}

function versteckeInfo(id){
document.getElementById(id).innerHTML = "";
}
</script>
</head>
<body>
...
<!-- Top Container -->
<div id="top"></div>

<!-- Index 0 brauchen wir -->
<div id="Hotspot1" onmouseover="zeigeInfo(0,'top');" onmouseout="versteckeInfo('top');"></div>

<!-- Index 1 brauchen wir -->
<div id="Hotspot2" onmouseover="zeigeInfo(1,'top');" onmouseout="versteckeInfo('top');"></div>

<!-- Index 2 brauchen wir -->
<div id="Hotspot3" onmouseover="zeigeInfo(2,'top');" onmouseout="versteckeInfo('top');"></div>

<!-- Index 3 brauchen wir -->
<div id="Hotspot4" onmouseover="zeigeInfo(3,'top');" onmouseout="versteckeInfo('top');"></div>
...
</body>
</html>

Ich hoffe das kann dir nen bissle helfen und ein Ansatz geben.
Mit "innerHTML" kannst du auf den Inhalt von Blockelementen zugreifen.

Das Array oben speichert deine Texte und weißt automatisch Indexnummern zu die bei 0 beginnen und dann pro Text aufsteigen. Kannste dann mit "NamedesArrays[indexnummer]" zugreifen. Also:
"testArray[0]". Weiteres zu Arrays hier.

Mit "getElementById(id)" kannste anhand einer Id eines Html Elements auf dieses Zugreifen.

So den Rest müsstest du verstehen.

greez web_spider

Suche Info bei Mousover Script

shazzy

Neues Mitglied

N10B

Neues Mitglied

Web_spider

Neues Mitglied

Neueste Beiträge