|
|||
Rollover mit "Preload" - Funktioniert aber nicht
Hallo zusammen,
also die Überlegung ist folgende: Ich möchte einen Rollover-Button mit "Preload"-Funktion haben. Die ganze Sache ist ein Fake, da beide Buttons aus einer einzigen Grafik bestehen. Der Button hat die Größe 80x50px - Die Grafik hat also die Gesamtgröße 80x100px. Ich habs jetzt so versucht zu realisieren: a.home:link{ background-image: url(home_gesamt.jpg); background-position: 0 -50; display: block; width: 80px; height: 50px; } a.home:hover{ background-image: url(home_gesamt.jpg); background-position: 0 0; } Der Link selbst ist in HTML über ein transparentes Gif gesetzt: <a href="index.html" class="home"><img src="transnav.gif" width="80" height="50" border="0" /></a> Weder im IE7 noch im Firefox wird der Background unter dem Link angezeigt. Im IE allerdings funktioniert der Hover-Effekt. Im Firefox sieht man beim Hovern ca 20px. Also ich bin jetzt ein wenig ratlos, weiß einfach nicht wo der Fehler stecken soll. Ich dachte, es liegt vielleicht an irgendwelchen Vererbungen, aber auch ausserhalb sämtlicher Divs auf einer blanken Seite bleibt das Ergebnis gleich. Vielleicht hat ja von euch jemand eine Idee. Viele Grüße Max |
Sponsored Links |
|
|||
Nene, sind schon Pixel gemeint
Fehler beim Abschreiben, sorry. Ich setz hier mal die kompletten Codes: Code:
/* CSS Document */ body { font-family:Arial, Helvetica, sans-serif; font-size: 100.1%; margin: 0; } #container{ background-color:yellow; width: 800px; text-align: left; margin: auto; padding: 0; } #head{ background-color:green; height: 100px; } #navi{ text-align: left; background-color: red; height: 150px; } a.home:link{ background-color: white; background-image:url(../images/home.jpg); background-position: 0 -50px; display: block; width: 80px; height: 50px; } a.home:hover{ background-image:url(../images/home.jpg); background-repeat: no-repeat; background-position: 0 0; } #frame{ background-color:blue; } Code:
<body> <div id="container"> <div id="head"> Head: Effekte</div> <!--Head Ende--> <div id="navi"> <a href="index.html" class="home"><img src="http://xhtmlforum.de/images/transnav.gif" width="80" height="50" border="0" /></a> </div><!--Navi Ende--> <div id="frame"> Text </div><!--Frame Ende--> </div><!--Container Ende --> </body> Geändert von maxpec (28.12.2008 um 19:47 Uhr) |
|
|||
Jawoll, nun klappt's... dickes Dankeschön
Das Bild sollte anfangs nur als Platzhalter in der Planungsphase dienen, ich dachte mir dann aber, dass ich's gleich transparent mache um eben später den wirklichen Button "durchscheinen" zu lassen. Die Buttons sind beschriftet, um die Skalierung beim Hovern mit verwenden zu können. Übrigens wäre ich nie darauf gekommen, dass es an der Pseudoklasse liegt, denn ein ähnliches Beispiel gibt es in meinem Lehrbuch (welches übrigens auch nicht richtig funktioniert). Da haben sich die Autoren anscheinend etwas verhaspelt... Aber Ende gut, alles gut Also DANKE nochmals - jetzt kanns weitergehen Viele Grüße Max |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
Mouseover funktioniert nicht (externe Methode) | blackhtml | CSS | 2 | 07.04.2009 18:49 |
Overflow hidden funktioniert im firefox nicht | Lena83 | CSS | 10 | 03.12.2008 19:18 |
dtd und css in php funktioniert im IE nicht!!! | da-lick | CSS | 17 | 09.06.2007 16:44 |
Java Rollover funktioniert nicht im Opera | devils_advocate | Javascript & Ajax | 2 | 08.03.2007 18:11 |
min-width funktioniert lokal | andip | Javascript & Ajax | 3 | 06.06.2006 21:13 |