Supportnet / Forum / Webseiten/HTML
Mouseover effekt???
Frage
Hi Leute!
Ich bin gerade beim coden einer Website, allerdings stellt sich folgendes Problem: Ich weiß nicht, wie ich einen"Mouseover Effekt" coden soll....desshalb wollte ich euch fragen, ob mir weiterhelfen könnt?!
zur erklärung:
<table border="0" align="center">
<tr>
<td>
<a href="../Home/Home.html" >
<img src="../Pictures/Home.jpg" border="0" />
</a>
</td>
</tr>
........
sprich: da ist ein button(bzw Bild) namens Home.jpg und wenn man dort raufklickt, wird man zu home.html weitergeleitet!
wo und was muss ich einfügen, damit , wenn man mit der maus drüberfährt, sich der button verändert?
(ich habe ebenso ein button(bzw bild) angefertig, welches erscheinen soll, wenn man mit der Mouse drüberfährt!)
habs zu erst ausversehn in der falschen gruppe gepostet....... :)
Antwort 1 von rfb
das ist sehr gut aus dem Beispiel bei http://www.css4you.de/trickkiste/tr00028.html (dies Beispiel funktioniert übrigens mit der CSS-Variante von onmouseover und ist damit von JavaScript unabhängig)
Antwort 2 von Consti
ich hab das schon versucht...auch auf anderen seiten...aber es hat bei mir NIE geklappt.......ich weiß nun auch nich mehr, was ich machen soll.....
Antwort 3 von rfb
schreib mal deine Version hier rein, dann können wir schauen, wo es klemmt.
Antwort 4 von lynn
Hallo,
schau mal nach unter:
http://de.selfhtml.org/javascript/beispiele/buttons.htm
Das könnte dir weiterhelfen !
Viel Glück
schau mal nach unter:
http://de.selfhtml.org/javascript/beispiele/buttons.htm
Das könnte dir weiterhelfen !
Viel Glück
Antwort 5 von Friedel
Du solltest das ohne JavaScript machen, denn es geht ohne und es ist ohne nicht umständlicher. Am besten versuchst du es noch mal nach der Methode, die rfb in Antwort 1 vorschlägt
Antwort 6 von Consti
ich möchte eigentlich einen ganz einfachen code haben, da ich ein noch nicht ganz so fortgeschrittener coder bin... :)
also: mein mainordner nenn ich jett mal "Website" dort sind zwei ordner drin: Pictures und Home
in dem Pictures ordner sind die dateien button-Home.jpg (der ausgangs button)und button-Home-aktiv.jpg(der button,der erscheinen soll, wenn man mit der Mouse drüber fährt) drin!
im home ordner die zu bearbeitende datei: control.html
hier ein nur der wichtige teil der datei:
<html>
<head>
<base target="_top" />
</head>
<body bgcolor="#C0C0C0">
<table border="0" align="center">
<tr>
<td>
<a href="../Home/Home.html">
<img src="../Pictures/button-Home.jpg" border="0" name="home" />
</a>
</td>
</tr>
und so weiter...
jetzt will ich einen mouseover effekt einbringen....aber wie?
könnte einer von mir diesen "quellcode" so "modifizieren" , das ein Mouseover effekt dabei ist?!
Bitte! :)
ich habe schon vieles versucht....aber ich glaub ich bin zu doof dafür :D
also: mein mainordner nenn ich jett mal "Website" dort sind zwei ordner drin: Pictures und Home
in dem Pictures ordner sind die dateien button-Home.jpg (der ausgangs button)und button-Home-aktiv.jpg(der button,der erscheinen soll, wenn man mit der Mouse drüber fährt) drin!
im home ordner die zu bearbeitende datei: control.html
hier ein nur der wichtige teil der datei:
<html>
<head>
<base target="_top" />
</head>
<body bgcolor="#C0C0C0">
<table border="0" align="center">
<tr>
<td>
<a href="../Home/Home.html">
<img src="../Pictures/button-Home.jpg" border="0" name="home" />
</a>
</td>
</tr>
und so weiter...
jetzt will ich einen mouseover effekt einbringen....aber wie?
könnte einer von mir diesen "quellcode" so "modifizieren" , das ein Mouseover effekt dabei ist?!
Bitte! :)
ich habe schon vieles versucht....aber ich glaub ich bin zu doof dafür :D
Antwort 7 von rfb
Die Maße musst du natürlich anpassen an die Buttongröße, außerdem solltest du alle Dateien so umbenennen, dass nur kleine Buchstaben vorkommen.
<html>
<head>
<style type="text/css">
a.link {
display:block;
width:250px;
height:50px;
background-image:url(../Pictures/button-Home.jpg);
}
a.link:hover {
background-image:url(../Pictures/button-Home-aktiv.jpg);
}
body {
backgroeund:#c0c0c0;
}
.zentriert {
text-align:center;
margin-left.auto;
margin-rignt:auto; }
</style>
</head>
<body>
<div class="zentriert">
<a href="../Home/Home.html" class="link">Linktext</a>
</div>
</body>
</html>Antwort 8 von rfb
Achtung Tippfehler:
body {
background:#c0c0c0;
}Antwort 9 von Consti
cool, vielen Dank!!!
Ich werds gleich ausprobieren!
die namen der dateien sind eigentlich klein, ich hab sie nur ausversehen groß geschrieben! :)
Ich werds gleich ausprobieren!
die namen der dateien sind eigentlich klein, ich hab sie nur ausversehen groß geschrieben! :)
Antwort 10 von Consti
juhuuu!!!!
VIELEN DANK!!!
es funktioniert hervorragend!!!!!!!
VIELEN DANK!!!
es funktioniert hervorragend!!!!!!!
Antwort 11 von Friedel
Neuer Bug??? Ich habe Antwort 7 und 10 positiv bewertet. Daraufhin wurde der Balken rot!
Antwort 12 von Friedel
Sorry. Der Bug ist bei mir. Nach meinem Festplattencrash hat IE5.0 und IE5.5 nicht mehr funktioniert, aber IE funktioniert noch (alle 3 sind eigentlich auf einer anderen Platte). Aber irgendwie ist mein Mauszeiger im IE6 etwas weiter links oben als ich ihn sehe. Also doch System komplett erneuern.