javascript.. mehrere bilder einbinden?

Dieses Thema im Forum "Web-Programmierung" wurde erstellt von grummelzwergi, 12.04.2008.

  1. grummelzwergi

    grummelzwergi Thread Starter Registriert

    Beiträge:
    3
    Zustimmungen:
    0
    Mitglied seit:
    03.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>
     
  2. josh_

    josh_ MacUser Mitglied

    Beiträge:
    467
    Zustimmungen:
    142
    Mitglied seit:
    09.06.2007
    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
     
Die Seite wird geladen...

Diese Seite empfehlen