HTML - onmouseover/out Bilder
lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript
antwort
artikel
beispiel
bild
code
dank
extra
forum
hintergrundbild
http
jemand
maus
methode
mist
raten
sagen
tag
url
verschieben
zettel
-
Guten Abend liebe lima Community,
Ich will auf meiner Webseite Grafiken auswechseln, wenn die tag/maus">Maus drauf geht bzw. wieder runtergeht, jedoch sollen diese trotzdem ihren link beibehalten, also bei klick sollen sie noch genauso funktionieren...
<a align="left" href="hauptseite.php" target="main"><img src="hauptseite-normal.png" alt="Hauptseite" border=0> </a><br> <a align="left" href="chat.html" target="main"><img src=]"Chat-normal.png" alt="Chat" border=0> </a><br> <a align="left" href="register.html" target="main"><img src="Register-normal.png" alt="Register" border=0> </a><br> <a align="left" href="userpanel.html" target="main"><img src="UserPanel-normal.png" alt="User Panel" border=0> </a><br> <a align="left" href="howto.html" target="main"><img src="HowTo-normal.png" alt="How To" border=0> </a><br> <a align="left" href="voteforus.html" target="main"><img src="VoteforUs-normal.png" alt="Vote for Us" border=0> </a><br> <a align="left" href="http://fly-for-death.forumieren.eu/" target="_blank"><img src="Forum.png" alt="Forum" border=0> </a>
Die Bilder (XXX-normal.png) sollen wenn die Maus drüber geht einfach durch das Bild XXX-Maus.png ersetzt werden.
Ich habe ziemlich viele Varianten die Google ausspuckt ausprobiert entweder hats nicht funktioniert, oder der link ging nichtmehr...
Wie das ganze gemacht wird ist egal, ob mit CSS oder mit Javascript oder, oder, oder...
Ich wäre erfreut wenn mir jemand hier den Code poten könnte wie ich das machen muss...
danke
grüße
Zettel
Beitrag zuletzt geändert: 13.7.2010 17:59:15 von zettel -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
-
zettel schrieb:
Ich wäre erfreut wenn mir jemand hier den Code poten könnte wie ich das machen muss...
danke
grüße
Zettel
schau Dir mal diese Seite an.
Das hier wäre das Beispiel, was dabei herauskommt...
p.s.
Falsches Forum für das Thema.
lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript wäre das Richtige Forum
-
simuliertes schrieb:
zettel schrieb:
Ich wäre erfreut wenn mir jemand hier den Code poten könnte wie ich das machen muss...
danke
grüße
Zettel
schau Dir mal diese Seite an.
Das hier wäre das Beispiel, was dabei herauskommt...
p.s.
Falsches Forum für das Thema.
lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript wäre das Richtige Forum
erstmal danke für deine antwort, das habe ich versucht, jedoch funktioniert dann der link nichtmehr, weil ich im Style Tag kein " href="...." " haben kann...
Ach mist, das Forum habe ich gesucht...
kann man das vllt. dahin verschieben?
danke
grüße
Zettel -
zettel schrieb:
erstmal danke für deine antwort, das habe ich versucht, jedoch funktioniert dann der link nichtmehr, weil ich im Style Tag kein " href="...." " haben kann...
Ach mist, das Forum habe ich gesucht...
kann man das vllt. dahin verschieben?
danke
grüße
Zettel
Das Verweisziel schreibst Du nach wie vor immer noch in html.
also in dem Beispiel von mir (von selfhtml)
statt:
<p><a href="#"> </a></p>
das hier:
<p><a href="hiersollshingehen.html"> </a></p>
Lies Dir am besten in ruhe die Erklärungen dazu auf der Seite von selfhtml durch.
Das verschieben wird, hoffe ich, irgendwann ein Administrator für Dich übernehmen. Aber jetzt weißt Du ja wo Du Deine zukünftigen Fragen posten kannst...
-
danke für die Antwort, ich kanns leider gerade nicht testen, aber sage dir morgen bescheid obs geklappt hat ;-9
grüße
Zettel
edit: nein es funktioniert nciht, ich habs gerade ausprobiert...
kann mir vllt. eienr sagen wie das mti javascript funktioniert? am besten gleich am beispiel oben :D
Beitrag zuletzt geändert: 15.7.2010 16:29:35 von zettel -
zettel schrieb:
edit: nein es funktioniert nciht, ich habs gerade ausprobiert...
kann mir vllt. eienr sagen wie das mti javascript funktioniert? am besten gleich am beispiel oben :D
Zettel im seltensten fall schreibt Dir hier jemand eine Lösung die Du 1:1 übernehmen kannst.
Wenn Du Firefox benutzt ,kannst Du zB unter extras die Fehlerkonsole öffnen um rauszufinden woran es liegt.
Was funktioniert denn nicht? Hast Du einen Link zu der Seite , das man sehen kann was Du versucht hast?
Von javascript raten eigentlich alle immer ab es anzuwenden , wenn es auch ohne geht.
Und das tut es...
probiere also mal das hier:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <style> a.button1 { display:block; background-image:url(http://www.lima-city.de/images/layout/icons/emoticon_smile.png); width:120px; height:30px } a.button1:hover { background-image:url(http://www.lima-city.de/images/layout/icons/amazon.png); } a.button2 { display:block; background-image:url(http://www.lima-city.de/images/layout/icons/calculator.png); width:120px; height:30px } a.button2:hover { background-image:url(http://www.lima-city.de/images/layout/icons/page_white_code_red.png); } </style> </head> <body> <a class="button1" href="http://aktuell.de.selfhtml.org/artikel/css/mouseover/#a4" > </a> <a class="button2" href="http://aktuell.de.selfhtml.org/artikel/css/mouseover/#a4" > </a> </body> </html>
Natürlich musst Du noch die Bildadresse, die Bildhöhe und -breite, sowie die Linkadresse anpassen.
(und guck mal nach der css eigenschafft background-repeat )
edit:
hier noch ein paar, links auf die schnelle...
http://www.google.de/search?q=omouseover+button+&ie=utf-8&oe=utf-8&aq=t&rls=org.mozilla:de:official&client=firefox-a
http://www.on-mouseover.de/script1.htm
http://www.on-mouseover.de/css.html
Beitrag zuletzt geändert: 15.7.2010 19:48:33 von simuliertes -
Ich hätte auch noch was :
<a align="left" href="chat.html" target="main"><img src="Pfad zum normalen Bild ohne moueseover" onmouseover="this.src = 'Pfad zum Bild welches als mouseover dient'" onmouseout="this.src = 'Pfad zum Bild welches als mouseout dient-also das normale Bild wieder, wie ganz am Anfang'" width="Breite (z.B. 250)" height="Höhe (z.B.100)" alt="Chat" border=0> </a><br> -
metalstars schrieb:
Ich hätte auch noch was :
<a align="left" href="chat.html" target="main"><img src="Pfad zum normalen Bild ohne moueseover" onmouseover="this.src = 'Pfad zum Bild welches als mouseover dient'" onmouseout="this.src = 'Pfad zum Bild welches als mouseout dient-also das normale Bild wieder, wie ganz am Anfang'" width="Breite (z.B. 250)" height="Höhe (z.B.100)" alt="Chat" border=0> </a><br>
@simuliertes, hat funktioniert, danke :D
@metalstars, danke das aht auch funktioniert :-)
grüße -
Und hier das ganze nochmal ohne unschönes Bildernachladen ;)
-
@simuliertes, hat leider dochnicht funktioniert, trotzdem danke :D
@strange hat leider auch nicht funkltioniert, habe ge hört man kann css auch deaktivieren? könnt ihr mir vllt. sagen wie man überpfrüfen kann das das wirklich an ist?
danke
grpße
Beitrag zuletzt geändert: 17.7.2010 19:20:01 von zettel -
In diesem Threat wurden alle üblichen Methoden gezeigt, Thema könnte eigentlich geschlossen werden.....
simuliertes schrieb:
Zettel im seltensten fall schreibt Dir hier jemand eine Lösung die Du 1:1 übernehmen kannst.
Wenn Du Firefox benutzt ,kannst Du zB unter extras die Fehlerkonsole öffnen um rauszufinden woran es liegt.
Was funktioniert denn nicht? Hast Du einen Link zu der Seite , das man sehen kann was Du versucht hast?
Von javascript raten eigentlich alle immer ab es anzuwenden , wenn es auch ohne geht.
Und das tut es...
ansonsten, kein Kommentar mehr von meiner Seite her...
Beitrag zuletzt geändert: 17.7.2010 19:42:56 von simuliertes -
simuliertes schrieb:
In diesem Threat wurden alle üblichen Methoden gezeigt, Thema könnte eigentlich geschlossen werden.....
simuliertes schrieb:
Zettel im seltensten fall schreibt Dir hier jemand eine Lösung die Du 1:1 übernehmen kannst.
Wenn Du Firefox benutzt ,kannst Du zB unter extras die Fehlerkonsole öffnen um rauszufinden woran es liegt.
Was funktioniert denn nicht? Hast Du einen Link zu der Seite , das man sehen kann was Du versucht hast?
Von javascript raten eigentlich alle immer ab es anzuwenden , wenn es auch ohne geht.
Und das tut es...
ansonsten, kein Kommentar mehr von meiner Seite her...
Ich habe ja auch gesagt, das es mit der einen Methode funktioniert, jedoch meinte jemand danach ja, das es anders besser wäre, weil man die ladezeiten umgeht...
und das da oben habe ich wohl überlesen, tud mir leid... Meine Fehlerkonsole bei Firefox ist leer...
Ein link zur seite: http://zettel.lima-city.de/
Der Relevante Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd"> <html> <head> <style> a.button1 { display:block; background-image:url(hauptseite-normal.png); width:120px; height:30px } a.button1:hover { background-image:url(hauptseite-maus.png); } </style> <link href="link+backgroundcolor.css" rel="stylesheet" type="text/css"> </head> <title>Fly For Death v15!</title> <body> <a class="button1" name="hauptseite" align="left" href="hauptseite2.php" target="main"><img src="hauptseite-normal.png"alt="Hauptseite" border=0> </a><br>
(bei den anderen feldern ist es nicht eingebaut...)
Leider passiert aber einfach garnichts...
danke
grüße -
Na das ist ja schon einmal ein anfang....
Habe mir die mühe gemacht auf Deine Webseite zu gucken.
über die verwendung von Frames sag ich mal nix.
also diese Seite:
http://zettel.lima-city.de/navi.html
Jetzt nimm doch einfach mal den <img>-Tags bei der "Hauptseite" raus .
Erklärung:
im stylesheet wird ein Hintergrundbild erstellt, wenn vor dem Hintergrundbild allerdings ein anderes Bild ist (<img>) kann man natürlich das Hintergrundbild nicht sehen.
außerdem müssen die Werte width: und height exakt der Größe des Bildes entsprechen(!)
Wie gesagt, wäre ein zusätzlicher Link auch schön gewesen, das hätte einige mühe von Anfang an erspart
edit: Bitte gib Dir ein bisschen mühe und versuch auch selber ein bischen statt gleich zu sagen "es geht nicht" .
Benutze Deine englischkenntnisse, was könnte wohl background-image, witdh, height bedeuten?. google nach den befehlen und versuche sie irgendwie zu verstehen (zB nach "css hover, css height usw).
Wir können Dir immer nur Hilfestellungen geben, verstehen solltest Du es wenigstens ansatzweise aber auch um es gut umzusetzen
Beitrag zuletzt geändert: 17.7.2010 21:25:53 von simuliertes -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
