javascript.. mehrere bilder einbinden?

grummelzwergi · 12.04.2008

hallöchen,

ich hab ein problem und zwar geht es um folgendes.. ich hab ein spielfeld in 3 teilen und wenn ich auf das erste bild gehe, sollen 4 spieler erscheinen (rollover-effekt), also wenn ich auf das erste spielfeld gehe (abwehr) dann sollen 4 spieler erscheinen und wenn man vom bild wieder weggeht, soll das bild wegsein.. ABER das spielfeld nicht!!! so nun habe ich es immerhin schon geschafft, dass ein bild erscheint, wenn ich auf das abwehrbild gehe.. und wie bekomm ich jetzt noch hin, dass die anderen 3 spieler auch noch erscheinen? das ist mein problem jetzt... hab grad erst mit javascript angefangen und komm nich so ganz weiter.. vielen dank schon einmal für die antworten

Code:

<?xml version="1.0"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>

	<head>
		<title>Feld mit Eventhandler (JavaScript)</title>

</head>


<body>
<img src="fcb/abwehr.jpg" height="303" width="200" name="abwehr"
onmouseover="leer.src='fcb/kahn.jpg';"
onmouseout="leer.src='fcb/leer.gif';"> 

<img src="fcb/mittel.jpg" height="303" width="200"
onmouseover="leer.src='fcb/ribery_2.jpg';" 
onmouseout="leer.src='fcb/leer.gif';">


<img src="fcb/angriff.jpg" height="303" width="200"
onmouseover="leer.src='fcb/toni.jpg';"
onmouseout="leer.src='fcb/leer.gif';">
<br />
<img src="fcb/leer.gif" name="leer" height="303" width="250"/>


</body>
</html>

josh_ · 20.04.2008

Eleganter wäre es, wenn Du es mit eigenen Event Listenern bzw. mehreren Listenern versuchst. Es gibt hierfür sehr elegante Frameworks. Eins davon ist z.B. die Yahoo User Interface Library (http://developer.yahoo.com/yui/). Ich weiß, dass man als Anfänger versuchen möchte, ohne den ganzen "Balast" eines Frameworks erstmal das Rad selbst zu erfinden. Aber ich denke mit der Event Klasse der YUI verstehst Du's trotzdem und bekommst ordentlich Arbeit abgenommen

Edit: Vielleicht einen kleinen Denkanstoß (auch ohne YUI durchführbar):

Du könntest Dein Problem so angehen, dass Du die Bilder beim Laden der Seite schon positionierst und dann per CSS versteckst, also visibility: hidden. Bei einem Mouseover könntest Du dann eine Funktion aufrufen, die die visibility der ganzen Abwehrspieler dann auf visible setzt. Bei Mouseout dann natürlich wieder hidden.

Ne andere Idee wäre z.B. Platzhalter <div>s für die Abwehrspieler zu erstellen, die zunächst auch versteckt sind. Dann kannst Du bei Mouseover in die jeweiligen divs die Bilder einfügen. Ob jetzt als <img>-Tag oder per background Eigenschaft der <div>s wäre Dir überlassen

HTH

javascript.. mehrere bilder einbinden?

grummelzwergi

Registriert

josh_

Aktives Mitglied