Rollover ohne Javascript(Bildwechsel)
lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript
background
beste lsung
bild
bildwechsel
elemente
genausowenig
hilfe
hintergrund
image
kontakt
mglichkeit
none
referenz
wechsel
-
Moin ihr :D
Ich suche einen Bildwechsel OHNE Javascript.
Früher hatte ich Bild-Rollover-Wechsel so gemacht:
<a href="index.php" onmouseover="home.src='images/homeh.jpg';" onmouseout="home.src='images/home.jpg';"><img src="images/home.jpg" width="57" height="39" border="0" alt="Startseite" name="home"></a>
Jetzt aber will ich dass nciht mehr.
Mit Hintergrund wechseln bei Rollover etc. ist mit CSS für mich kein Problem.
Aber wie will ich dass machen, dass sich ein Bild ändert?
Gréèze -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
-
Nun wie du schon gesagt hast, cih denke CSS ist die beste Lösung, eine möglichkeit wäre, dass du als Hintergrund-Bild das bild nimmt, und denn text durchsichtig machst.
Dass ist aber genausowenig profesionell... ich hoffe du findest besser hilfe :D -
Nun wie du schon gesagt hast, cih denke CSS ist die beste Lösung, eine möglichkeit wäre, dass du als Hintergrund-Bild das bild nimmt, und denn text durchsichtig machst.
Dass ist aber genausowenig profesionell... ich hoffe du findest besser hilfe :D
Ich denke doch, dass es mit CSS professioneller ist als mit JavaScript:
<style type="text/css">
a {
background-image:url(images/home.jpg);
}
a:hover {
background-image:url(images/homeh.jpg);
}
</style>
und der Link:
<a href='index.php'><img src='images/spacer.gif' width='57' height='39' border='0' alt='Startseite'></a>
spacer.gif ist eine transparente GIF-Grafik (z.B. 2x2px) -
Ach dass ist mir doch 100% klar dass es so geht :P aber nur dann muss ich ja 6 elemente definieren und mit spacer zu arbeiten ist genauso schlecht...
Aber danke für die Hilfe -
Nun ich habs jetzt so gemacht:
Ich weiss dadurch gibt es ein riseiges stylsheet, aber mir ist nciht besseres eingefallen:
.home { width: 57px; heigt: 39px; background-image:url('images/home.jpg'); background-repeat: none; } .home:hover { width: 57px; heigt: 39px; background-image:url(images/homeh.jpg); } .infos { width: 66px; heigt: 39px; background-image:url('images/infos.jpg'); background-repeat: none; } .infos:hover { width: 66px; heigt: 39px; background-image:url(images/infosh.jpg); } .referenzen { width: 116px; heigt: 39px; background-image:url('images/referenzen.jpg'); background-repeat: none; } .referenzen:hover { width: 116px; heigt: 39px; background-image:url(images/referenzenh.jpg); } .projekte { width: 102px; heigt: 39px; background-image:url('images/projekte.jpg'); background-repeat: none; } .projekte:hover { width: 102px; heigt: 39px; background-image:url(images/projekteh.jpg); } .kontakt { width: 95px; heigt: 39px; background-image:url('images/kontakt.jpg'); background-repeat: none; } .kontakt:hover { width: 95px; heigt: 39px; background-image:url(images/kontakth.jpg); } .weiteres { width: 93px; heigt: 39px; background-image:url('images/weiteres.jpg'); background-repeat: none; } .weiteres:hover { width: 93px; heigt: 39px; background-image:url(images/weiteresh.jpg); }
Danke für eure Antowrten! -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage