Mouseover effekt
lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript
aussehen
beispiel
bild
button
club
code
definieren
effekt
erzeugen
gesicht
grafik
http
image
mache
paar
part
teddy
teil
url
verweis
-
Hallo, ich hätte gerne einen Mouseover effekt.
Die Seite lautet http://trainercard-club.12hp.de/vorlage_n.php
Mein aktueller Code:
<div align="left" width="100%"> <img id="button1" src="Images/Trainercard-club-homepage-parts/button-1a.gif" width="15,8%" onmouseover="this.src = Images/Trainercard-club-homepage-parts/button-1b.gif" /><img id="button2" src="Images/Trainercard-club-homepage-parts/button-2a.gif" width="17%" onmouseover="this.src = Images/Trainercard-club-homepage-parts/button-2b.gif" /><img id="button3" src="Images/Trainercard-club-homepage-parts/button-3a.gif" width="28%" onmouseover="this.src = Images/Trainercard-club-homepage-parts/button-3b.gif" /><img id="button4" src="Images/Trainercard-club-homepage-parts/button-4a.gif" width="21%" onmouseover="this.src = Images/Trainercard-club-homepage-parts/button-4b.gif" /><img id="button5" src="Images/Trainercard-club-homepage-parts/button-5a.gif" width="18,5%" onmouseover="this.src = Images/Trainercard-club-homepage-parts/button-5b.gif" /> <script type="text/javascript" language="JavaScript"> <!-- Bild01 = new Image(); Bild01.src = "http://www.trainercard-club.12hp.de/Images/Trainercard-club-homepage-parts/button-1b.gif"; Bild02 = new Image(); Bild02.src = "http://www.trainercard-club.12hp.de/Images/Trainercard-club-homepage-parts/button-2b.gif"; Bild03 = new Image(); Bild03.src = "http://www.trainercard-club.12hp.de/Images/Trainercard-club-homepage-parts/button-3b.gif"; Bild04 = new Image(); Bild04.src = "http://www.trainercard-club.12hp.de/Images/Trainercard-club-homepage-parts/button-4b.gif"; Bild05 = new Image(); Bild05.src = "http://www.trainercard-club.12hp.de/Images/Trainercard-club-homepage-parts/button-5b.gif"; //--> </script>
tut sich aber überhaupt nichts mouseover ähnliches :(
Beitrag zuletzt geändert: 25.9.2011 5:42:11 von trainercard-club -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
-
trainercard-club schrieb:
Hallo, ich hätte gerne einen Mouseover effekt.
tut sich aber überhaupt nichts mouseover ähnliches :(
Wo hast du denn den Teil, wo du die Grafiken als Link / Verweis deklarierst?
Soweit ich das sehen kann hast du nur ein paar Bilder, nichts was einen onmouseover erzeugen könnte!
//EDIT:
<script language="JavaScript"> <!-- button1= new Image(); button1.src = "knopf.jpg" button2= new Image(); button2.src = "email.jpg" /* usw. für alle Grafiken, die am Mouse-Over-Effekt beteiligt sind */ //--> </script>
Nehmen wir mal an, wir haben einen Button, über den wir eine email Senden wollen. Die Bilder für den Austausch werden hier vorgeladen und abgelegt, damit diese sofort aus dem Cache geladen werden. Alle für den Mouse-Over-Effekt verwendeten Grafiken müssen hier definiert, d.h. mit der Eigenschaft "src" (source = Quelle) versehen werden.
Das war unser JavaScript Teil.. Nun müssen wir noch das Bild und den Link erstellen:
<a href="mailto:deine.mail@gmx.de" onmouseover="austausch1.src='email.jpg';" onmouseout="austausch1.src='knopf.jpg';"> <img src="knopf.jpg" border="0" width="71"height="60" name="austausch1"> </a>
< a href> gibt den Link an und <img> das Bild..
Beitrag zuletzt geändert: 25.9.2011 6:11:31 von kill-a-teddy -
trainercard-club schrieb:
kill-a-teddy schrieb:
Wo hast du denn den Teil, wo du die Grafiken als Link / Verweis deklarierst?
Soweit ich das sehen kann hast du nur ein paar Bilder, nichts was einen onmouseover erzeugen könnte!
ähh... wie mache ich das denn?
Bei dir würde des ungefähr so aussehen:
<a href="Link1" onmouseover="austausch1.src='Images/Trainercard-club-homepage-parts/button-1a.gif';" onmouseout="austausch1.src='Images/Trainercard-club-homepage-parts/button-1b.gif';"> <img id="button1" src="Images/Trainercard-club-homepage-parts/button-1a.gif" width="15,8%"></a>
Btw:
Selfhtml Thema: Verwaise
Beitrag zuletzt geändert: 25.9.2011 6:16:16 von kill-a-teddy -
kill-a-teddy schrieb:
trainercard-club schrieb:
kill-a-teddy schrieb:
Wo hast du denn den Teil, wo du die Grafiken als Link / Verweis deklarierst?
Soweit ich das sehen kann hast du nur ein paar Bilder, nichts was einen onmouseover erzeugen könnte!
ähh... wie mache ich das denn?
Bei dir würde des ungefähr so aussehen:
<a href="Link1" onmouseover="austausch1.src='Images/Trainercard-club-homepage-parts/button-1a.gif';" onmouseout="austausch1.src='Images/Trainercard-club-homepage-parts/button-1b.gif';"> <img id="button1" src="Images/Trainercard-club-homepage-parts/button-1a.gif" width="15,8%"></a>
Btw:
Selfhtml Thema: Verwaise
ok, das habe ich jetzt gemacht, passiert aber irgendwie trotzdem nichts mousover ähnliches
-
trainercard-club schrieb:
ok, das habe ich jetzt gemacht, passiert aber irgendwie trotzdem nichts mousover ähnliches
Weil du es net angepasst hast. Du hast den Code nur im ersten Button (button1a und button1b) und nirgens sonst.. Alle anderen sind noch immer ganz normale Bilder, die müsstest du auch zu buttons machen!
Noch dazu hast du button-1a gar nicht eingefügt, nur button-1b...
Bild01 = new Image();
Bild01.src = "http://www.trainercard-club.12hp.de/Images/Trainercard-club-homepage-parts/button-1b.gif";
Da fehlt
Bild06 = new Image();
Bild06.src = "http://www.trainercard-club.12hp.de/Images/Trainercard-club-homepage-parts/button-1a.gif";
-
@trainercard-club
Schaue Dir mal dieses Beispiel an, funzt garantiert.
Quelltext:
<html><head><title>OnMouseOver mit Bildern (Javascript)</title> </head> <body> <style type="text/css"><!-- img:hover {cursor: pointer;} body {font-family: Verdana, Arial, sans-serif; font-size:1em; font-weight:bold;} --> </style> <script type="text/javascript"> // Ordnerpfad der Bilder var f = "img/"; // Ein Array, damit sich Bilder bequem mit Zahlen anprechen lassen var b = new Array(); b[0] = new Image(); b[0].src = f+ "01.gif"; b[1] = new Image(); b[1].src = f+ "02.gif"; b[2] = new Image(); b[2].src = f+ "06.gif"; b[3] = new Image(); b[3].src = f+ "07.gif"; b[4] = new Image(); b[4].src = f+ "08.gif"; b[5] = new Image(); b[5].src = f+ "09.gif"; b[6] = new Image(); b[6].src = f+ "10.gif"; b[7] = new Image(); b[7].src = f+ "11.gif"; // Eine Funktion, damit der Quelltext der Seite kuerzer & ueberschaulicher wird, und // zwei Variablen innerhalb der Funktion, damit Zahlen der Funktion uebergeben werden koennen function zeige( variable1 , variable2 ) { document.images[variable1].src = b[variable2].src; } </script> <img name="button1" src="img/01.gif" onmouseover="zeige('button1','1')" onmouseout="zeige('button1','0')" /> <img name="button2" src="img/06.gif" onmouseover="zeige('button2','3')" onmouseout="zeige('button2','2')" /> <br /> ^^ Zeige auf ein Bild, dann ändert es sich. <br /><br /><br /> <img name="button3" src="img/10.gif" onmouseover="zeige('button4','5')" onmouseout="zeige('button4','4')" /> <img name="button4" src="img/08.gif" onmouseover="zeige('button3','7')" onmouseout="zeige('button3','6')" /> <br /> ^^ Zeige auf ein Bild, dann ändert sich das andere. <noscript> <br /><br /><h2>Sorry, für das Beispiel muss Javascript aktiviert sein.<br /><img src="img/05.gif" /></h2> </noscript> </body></html>
Vergiss allerdings nicht, dass OnMouseOver -Funktionen stets JavaScript -abhängig sind.
Wer ohne JavaScript surft, bekommt die tollen Effekte dann nicht zu Gesicht.
Tipp: Mit CSS gehts auch ohne JavaScript.
LG, Menschle -
menschle schrieb:
@trainercard-club
Schaue Dir mal dieses Beispiel an, funzt garantiert.
Quelltext:
<html><head><title>OnMouseOver mit Bildern (Javascript)</title> </head> <body> <style type="text/css"><!-- img:hover {cursor: pointer;} body {font-family: Verdana, Arial, sans-serif; font-size:1em; font-weight:bold;} --> </style> <script type="text/javascript"> // Ordnerpfad der Bilder var f = "img/"; // Ein Array, damit sich Bilder bequem mit Zahlen anprechen lassen var b = new Array(); b[0] = new Image(); b[0].src = f+ "01.gif"; b[1] = new Image(); b[1].src = f+ "02.gif"; b[2] = new Image(); b[2].src = f+ "06.gif"; b[3] = new Image(); b[3].src = f+ "07.gif"; b[4] = new Image(); b[4].src = f+ "08.gif"; b[5] = new Image(); b[5].src = f+ "09.gif"; b[6] = new Image(); b[6].src = f+ "10.gif"; b[7] = new Image(); b[7].src = f+ "11.gif"; // Eine Funktion, damit der Quelltext der Seite kuerzer & ueberschaulicher wird, und // zwei Variablen innerhalb der Funktion, damit Zahlen der Funktion uebergeben werden koennen function zeige( variable1 , variable2 ) { document.images[variable1].src = b[variable2].src; } </script> <img name="button1" src="img/01.gif" onmouseover="zeige('button1','1')" onmouseout="zeige('button1','0')" /> <img name="button2" src="img/06.gif" onmouseover="zeige('button2','3')" onmouseout="zeige('button2','2')" /> <br /> ^^ Zeige auf ein Bild, dann ändert es sich. <br /><br /><br /> <img name="button3" src="img/10.gif" onmouseover="zeige('button4','5')" onmouseout="zeige('button4','4')" /> <img name="button4" src="img/08.gif" onmouseover="zeige('button3','7')" onmouseout="zeige('button3','6')" /> <br /> ^^ Zeige auf ein Bild, dann ändert sich das andere. <noscript> <br /><br /><h2>Sorry, für das Beispiel muss Javascript aktiviert sein.<br /><img src="img/05.gif" /></h2> </noscript> </body></html>
Vergiss allerdings nicht, dass OnMouseOver -Funktionen stets JavaScript -abhängig sind.
Wer ohne JavaScript surft, bekommt die tollen Effekte dann nicht zu Gesicht.
Tipp: Mit CSS gehts auch ohne JavaScript.
LG, Menschle
Entschuldige meine unwissenheit ^^
Klappt super mit den ersten 2, nur sobald ich was dazu mache ( sollen insgesammt 5 sein ) kommt nichts gutes mehr bei raus :(
könntest du mir vielleicht noch so ein Beispiel für 5 Stück zeigen?
Wäre echt sehr nett :D -
trainercard-club schrieb:
...
könntest du mir vielleicht noch so ein Beispiel für 5 Stück zeigen?
Wäre echt sehr nett :D
Ich bin mal so frei..
Beispiel mit 5 Bildern
Habe den Qelltext abgeändert, vielleicht ist es mit den jetzigen Zahlen etwas leichter zu verstehen.
Brauchst jetzt nur noch die Bilder austauschen, und die <img> Tags um Höhe & Weite zu ergänzen.
Qelltext
<html><head><title>OnMouseOver mit 5 Bildern (Javascript)</title> <style type="text/css"><!-- img:hover {cursor: pointer;} body {font-family: Verdana, Arial, sans-serif; font-size:1em; font-weight:bold;} --> </style> <script type="text/javascript"> // Ordnerpfad der Bilder var f = "img/"; // Ein Array, damit sich Bilder bequem mit Zahlen anprechen lassen var b = new Array(); // Button 1 b[1] = new Image(); b[1].src = f+ "01.gif"; //over b[2] = new Image(); b[2].src = f+ "02.gif"; //out // Button 2 b[3] = new Image(); b[3].src = f+ "03.gif"; //over b[4] = new Image(); b[4].src = f+ "04.gif"; //out // Button 3 b[5] = new Image(); b[5].src = f+ "05.gif"; //over b[6] = new Image(); b[6].src = f+ "06.gif"; //out // Button 4 b[7] = new Image(); b[7].src = f+ "07.gif"; //over b[8] = new Image(); b[8].src = f+ "08.gif"; //out // Button 5 b[9] = new Image(); b[9].src = f+ "09.gif"; //over b[10] = new Image(); b[10].src = f+ "10.gif"; //out // Eine Funktion, damit der Quelltext der Seite kuerzer & ueberschaulicher wird, und // zwei Variablen innerhalb der Funktion, damit Inhalte der Funktion uebergeben werden koennen function zeige( Button_ID , Zahl ) { document.images[Button_ID].src = b[Zahl].src; } </script> </head> <body> 5 Bilder <br /><br /> <img id="button1" src="img/02.gif" onmouseover="zeige('button1','1')" onmouseout="zeige('button1','2')" /> <img id="button2" src="img/04.gif" onmouseover="zeige('button2','3')" onmouseout="zeige('button2','4')" /> <img id="button3" src="img/06.gif" onmouseover="zeige('button3','5')" onmouseout="zeige('button3','6')" /> <img id="button4" src="img/08.gif" onmouseover="zeige('button4','7')" onmouseout="zeige('button4','8')" /> <img id="button5" src="img/10.gif" onmouseover="zeige('button5','9')" onmouseout="zeige('button5','10')" /> <noscript> <br /><br /><h2>Sorry, für das Beispiel muss Javascript aktiviert sein.<br /><img src="img/05.gif" /></h2> </noscript> </body></html>
Beitrag zuletzt geändert: 26.9.2011 19:58:33 von menschle -
Jetzt wurde schon so schön gesagt das da kein JS für gebraucht wird und keiner schreibt wie...
Also mal ganz kurz.
CSS bietet die möglichkeit mit der Pseudoklasse :hover auf alles einzugehen wo du mit der maus drüber gehst.
So kann man zb auch bestimmte bereiche mit andern bildern versorgen.
Angenommen du hast einen Link und den willst du mit css ein anderes bild zuweisen wenn du drüber fährst, dann könnte das auf die schnelle so aussehen:
a { background: url(img/bild1.png) no-repeat top left;} a:hover { background: url(img/bild2.png) no-repeat top left;}
Und fertig ist das ganze mit CSS. Prüfe ob es in allen browsern funktioniert und bastle im zweifel ein work-around für den win-IE
Viel spass damit
PS:
den hover-effekt kann man auf alle erdenklichen html-elemente anwenden. -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
