animierte Buttons
Sabine
- dhtml
hallo an alle,
ich habe mit folgendem Quellcode einen animierten Button erstellt.
<a href="doc.htm"
onMouseOver='rollover.src="buttonrot.gif"'
onMouseOut='rollover.src="buttonblau.gif"'>
<img src="buttonblau.gif" name="rollover" border="0"></a>
So weit so gut. Wenn ich aber nun diesen Quellcode mehrmals untereinander setze (soll als Navigation dienen,
da braucht man ja mehr als nur einen Button) wechseln die oberen Buttons nicht mehr die Farbe sondern
immer nur der zuletzt angebrachte.
Kann mir jemand sagen, was ich falsch mache?
Vielen Dank schon im voraus.
Sabine
Hi Sabine
Aber Du änderst den name der anderen images? Die sollten nämlich besser nicht alle gleich heissen...
cheers
kaepten
Hallo Sabine,
Du mußt für jeden Button (eigentlich richtig ist: für jede Grafik/Bild ...) einen eigenen Namen vergeben, z.B. "rollover1" für den "nächsten" Button ...
Im Code könnte das dann folgendermaßen aussehen:
...
<a href="doc1.htm"
onMouseOver='rollover1.src="buttonrot1.gif"'
onMouseOut='rollover1.src="buttonblau1.gif"'>
<img src="buttonblau1.gif" name="rollover1" border="0"></a>
... natürlich müßen auch die jeweiligen Bilder und Verweise vorhanden sein ...
Grüße
Frankie
hallo an alle,
ich habe mit folgendem Quellcode einen animierten Button erstellt.
<a href="doc.htm"
»» onMouseOver='rollover.src="buttonrot.gif"'
»» onMouseOut='rollover.src="buttonblau.gif"'>
»» <img src="buttonblau.gif" name="rollover" border="0"></a>
So weit so gut. Wenn ich aber nun diesen Quellcode mehrmals untereinander setze (soll als Navigation dienen,
da braucht man ja mehr als nur einen Button) wechseln die oberen Buttons nicht mehr die Farbe sondern
immer nur der zuletzt angebrachte.Kann mir jemand sagen, was ich falsch mache?
Vielen Dank schon im voraus.
Sabine
hi sabine,
warum dhtml? hier ein kleines java script mit dem es auch ganz einfach geht.
die folgende source in eine datei packen z.B. button.js :
//
if (document.images) {
doc0 = new Image()
doc0.src = "001nr.gif"
}
function HighLight(i) {
if (document.images) {
var thang = document.images[i].src
var off = thang.lastIndexOf("nr")
if (off != -1) {
document.images[i].src = thang.substring(0,off) + "lt" + ".gif"
}
}
}
function Lightsoff(i) {
if (document.images) {
var thang = document.images[i].src
var on = thang.lastIndexOf("lt")
if (on != -1) {
document.images[i].src = thang.substring(0,on) + "nr" + ".gif" }
}
}
dann in der html datei einbinden:
<html>
<head>
<SCRIPT language="JavaScript" src="buttons.js"></SCRIPT>
</head>
<body>
<a href="site02.htm" target="target01" onmouseover="HighLight(0)" onmouseout="Lightsoff(0)"><img src="bild_nr.gif"></a>
</body>
</html>
die erste grafik heisst in diesem fall bild_nr.gif und wird mit bild_lt.gif ausgetauscht.
alles liebe
ole
(8-)>
Hallo!
Der Feherl liegt darin, daß Du einen Namen, rollover im Dokument mehrmals verwendest. Du must dann zum rollover1 nehmen.
Thilo