nicht angemeldet
MouseOver-Bildergalerie???
Hallo.
Ich will gerne eine kleine simple Bildergalerie machen, die mit einem MouseOver-Effekt funktioniert. Das ganze soll technisch das gleiche sein, wie unter folgendem Link:
http://www.confino.com/LA_1913/a_dossier.html
Aus dem Quelltext meines Links werde ich aber nicht schlau. Sehr kompliziert und unübersichtlich programmiert.
Wie kriege ich es also hin, dass ich mit der Maus über die Zahlen fahre und an anderer Stelle die Bilder passend getauscht werden? Wäre über Hilfe sehr dankbar. Das ganze sollte so einfach wie möglich sein. Javascript?
Gruß,
Pippo
-
Hallo,
Das ganze sollte so einfach wie möglich sein. Javascript?
du fährst mit der Maus über einen Link, welcher die Funktion aufruft. Per Parameter übergibst du der Funktion die Adresse des Bildes:
function BildWechseln(adresse) { document.images["MeinBild"].src = adresse; }[...]
<a href="#" onMouseOver="BildWechseln('MeineAdresse.gif')">1</a>MfG. Christoph Ludwig
--
Wo die Sprache aufhört, fängt die Musik an...
Selfcode: ie:( fl:| br:^ va:| ls:/ fo:| rl:? n4:) ss:) de:] js:) ch:{ sh:) mo:) zu:)
Go to this-
Hallo,
Das ganze sollte so einfach wie möglich sein. Javascript?
du fährst mit der Maus über einen Link, welcher die Funktion aufruft. Per Parameter übergibst du der Funktion die Adresse des Bildes:
function BildWechseln(adresse)
{
document.images["MeinBild"].src = adresse;
}> > [...] > > `<a href="#" onMouseOver="BildWechseln('MeineAdresse.gif')">1</a>`{:.language-html} > > > > MfG. Christoph Ludwig Schon mal Danke für deine Antwort! Aber ich krieg es irgendwie nicht hin! Sorry. Ich habe jetzt folgenden Quelltext: ~~~html <html> <head> <title>Unbenanntes Dokument</title> </head> <body> <a><img src="null.jpg" /></a><br><br> <a href="">1</a> <a href="">2</a> <a href="">3</a> </body> </html>Wenn ich jetzt mit der Maus über die 1 fahre, dann soll das Bild null.jpg gegen eins.jpg getauscht werden. bei 2 wird es zwei.jpg und bei 3 ändert sich das bild in drei.jpg
es wäre super, wenn du oder jemand anderes mir da mal helfen könnte. tut mir leid, dass ich hier arbeit weiterschiebe...
-
Ich habs! Danke!
-
Hallo,
Wenn ich jetzt mit der Maus über die 1 fahre, dann soll das Bild null.jpg gegen eins.jpg getauscht werden. bei 2 wird es zwei.jpg und bei 3 ändert sich das bild in drei.jpg
<html> <head> <title></title> <script type="text/javascript"> function WechsleBild(adresse) {document.images["MeinBild"].src=adresse;} </script> </head> <body> <img src="null.jpg" name="MeinBild"><br><br> <a href="#" onmouseover="WechsleBild('eins.jpg')">1</a> <a href="#" onmouseover="WechsleBild('zwei.jpg')">2</a> <a href="#" onmouseover="WechsleBild('drei.jpg')">3</a> </body> </html>Sobald du über den Link fährst, wird die Funktion WechsleBild() auferufen. Diese Funktion erwartet einen Parameter der die spätere Adresse des Bildes bestimmt. Falls du auf den Link klicken solltest, wird die Seite durch das # nicht verändert.
Per Javascript wird dann das Bild aufgerufen.document.images["MeinBild"]
spricht das bild an und mit .src=adresse weist du die per parameter übergebene adresse zu
MfG. Christoph Ludwig
--
Wo die Sprache aufhört, fängt die Musik an...
Selfcode: ie:( fl:| br:^ va:| ls:/ fo:| rl:? n4:) ss:) de:] js:) ch:{ sh:) mo:) zu:)
Go to this-
[latex]Mae govannen![/latex]
<img src="null.jpg" name="MeinBild"><br><br>
<a href="#" onmouseover="WechsleBild('eins.jpg')">1</a>
<a href="#" onmouseover="WechsleBild('zwei.jpg')">2</a>
<a href="#" onmouseover="WechsleBild('drei.jpg')">3</a>Sobald du über den Link fährst, wird die Funktion WechsleBild() auferufen. Diese Funktion erwartet einen Parameter der die spätere Adresse des Bildes bestimmt. Falls du auf den Link klicken solltest, wird die Seite durch das # nicht verändert.
...sondern an den Seitenanfang gesprungen. Und ohne JS passiert außer dem Genannten gar nichts.
Dann doch lieber die vernünftige Alternative, in der das Bild im href-Attribut notiert ist und dieses von JS verarbeitet sowie die Default-Funktionalität des Links unterbunden wird. Benötigt natürlich dann zusätzlich noch onclick und eine entsprechende Rückgabe. Beide Events (mouseover und click) natürlich _bevorzugt_ nur im script zugewiesen und nicht als Attribut im HTML. So, dann schreib das mal ;)
Außerdem fehlt dem image-Element das erforderliche "alt"-Attribut.
Cü,
--
Ash nazg durbatulûk, ash nazg gimbatul,ash nazg thrakatulûk, agh burzum-ishi krimpatul
selfcode sh:( fo:| ch:? rl:( br:< n4:# ie:{ mo:| va:) js:) de:> zu:) fl:( ss:| ls:?
Mein Selfhtml-Kram-
Hallo,
Dann doch lieber die vernünftige Alternative, in der das Bild im href-Attribut notiert ist und dieses von JS verarbeitet sowie die Default-Funktionalität des Links unterbunden wird. Benötigt natürlich dann zusätzlich noch onclick und eine entsprechende Rückgabe. Beide Events (mouseover und click) natürlich _bevorzugt_ nur im script zugewiesen und nicht als Attribut im HTML. So, dann schreib das mal ;)
<html> <head> <title>blablabla</title> <script type="text/javascript">function WechsleBild(adresse) { document.images["MeinBild"].src=adresse; }</script> <head> <body> <img src="null.jgp" name="MeinBild" alt="Bild"><br><br> <a href="#" onClick="return false;" onMouseOver="WechsleBild('eins.jpg')">1</a> <a href="#" onClick="return false;" onMouseOver="WechsleBild('zwei.jpg')">2</a> <a href="#" onClick="return false;" onMouseOver="WechsleBild('drei.jpg')">3</a> <br><br> <noscript> Um die Galerie benutzen zu können, ist Javascript notwendig. Du hast Javascript in deinem Browser deaktiviert. Aktiviere Javascript. </noscript> </body> </html>besser? ;)
Außerdem fehlt dem image-Element das erforderliche "alt"-Attribut.
ist aber für die Funktionalität erst einmal irrelevant...
MfG. Christoph Ludwig
--
Wo die Sprache aufhört, fängt die Musik an...
Selfcode: ie:( fl:| br:^ va:| ls:/ fo:| rl:? n4:) ss:) de:] js:) ch:{ sh:) mo:) zu:)
Go to this-
[latex]Mae govannen![/latex]
besser? ;)
Wenn ich das wahrheitsgemäß beantworte, werde ich im hohen Bogen aus dem Forum geworfen und auf ewig geblockt.
Cü,
--
Ash nazg durbatulûk, ash nazg gimbatul,ash nazg thrakatulûk, agh burzum-ishi krimpatul
selfcode sh:( fo:| ch:? rl:( br:< n4:# ie:{ mo:| va:) js:) de:> zu:) fl:( ss:| ls:?
Mein Selfhtml-Kram-
Hallo,
Wenn ich das wahrheitsgemäß beantworte, werde ich im hohen Bogen aus dem Forum geworfen und auf ewig geblockt.
warum? Ist es denn soo schlecht? :)
MfG. Christoph Ludwig
--
Wo die Sprache aufhört, fängt die Musik an...
Selfcode: ie:( fl:| br:^ va:| ls:/ fo:| rl:? n4:) ss:) de:] js:) ch:{ sh:) mo:) zu:)
Go to this-
Hi,
warum? Ist es denn soo schlecht? :)
nun ja... Zum einen fehlt ein Vorlader, ohne den ein Mouseover nicht glatt läuft, zum anderen ist ein Sourcewechsel ungünstig, falls die Bilder unterschiedliche Grössen haben. Ausserdem ist das Name-Attribut für Bilder unschön, eine Referenzierung via Dom wäre empfehlenswert.
Gruesse, Joachim
--
Am Ende wird alles gut.-
Hallo,
nun ja... Zum einen fehlt ein Vorlader, ohne den ein Mouseover nicht glatt läuft, zum anderen ist ein Sourcewechsel ungünstig, falls die Bilder unterschiedliche Grössen haben. Ausserdem ist das Name-Attribut für Bilder unschön, eine Referenzierung via Dom wäre empfehlenswert.
Ich weis, nur der Treaderöffner ist anscheinend kein profi oder so ... da kann man das doch "einfach" halten oder? ;)
MfG. Christoph Ludwig
--
Wo die Sprache aufhört, fängt die Musik an...
Selfcode: ie:( fl:| br:^ va:| ls:/ fo:| rl:? n4:) ss:) de:] js:) ch:{ sh:) mo:) zu:)
Go to this-
[latex]Mae govannen![/latex]
nun ja... Zum einen fehlt ein Vorlader, ohne den ein Mouseover nicht glatt läuft, zum anderen ist ein Sourcewechsel ungünstig, falls die Bilder unterschiedliche Grössen haben. Ausserdem ist das Name-Attribut für Bilder unschön, eine Referenzierung via Dom wäre empfehlenswert.
Ich weis, nur der Treaderöffner ist anscheinend kein profi oder so ... da kann man das doch "einfach" halten oder? ;)
Die von mir gestellte Aufgabe ging zum Einen an dich; ich warte übrigens immer noch auf die Lösung; und des weiteren ist es gerade einem Nicht-Profi gegenüber Unsinn, fehlerhafte Lösungen anzubieten. Und nein, eine _sinnvollere_ Lösung als deine beinhaltet nicht unbedingt die Anforderung, auf Event-Attribute im HTML zu verzichten, sondern diese dann sinnvoll zu verwenden
Cü,
--
Ash nazg durbatulûk, ash nazg gimbatul,ash nazg thrakatulûk, agh burzum-ishi krimpatul
selfcode sh:( fo:| ch:? rl:( br:< n4:# ie:{ mo:| va:) js:) de:> zu:) fl:( ss:| ls:?
Mein Selfhtml-Kram
-
-
-
-
-
-
-
-
-