zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Rollover mit "Preload" - Funktioniert aber nicht

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 28.12.2008, 17:45
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 08.02.2008
Beiträge: 3
maxpec befindet sich auf einem aufstrebenden Ast
Standard 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
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 28.12.2008, 18:08
EvT EvT ist offline
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 11.09.2006
Ort: Bad Wildungen
Beiträge: 2.220
EvT ist jedem bekanntEvT ist jedem bekanntEvT ist jedem bekanntEvT ist jedem bekanntEvT ist jedem bekanntEvT ist jedem bekannt
Standard

Zitat:
Zitat von maxpec Beitrag anzeigen
Ich habs jetzt so versucht zu realisieren:

a.home:link{
...
background-position: 0 -50;
...
}
-50 was? Kilometer?
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 28.12.2008, 19:30
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 08.02.2008
Beiträge: 3
maxpec befindet sich auf einem aufstrebenden Ast
Standard

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;
	}
Nun noch die Site
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>
Die css ist valide lt. Check. Aber was ich auch probiere, es funktioniert einfach nicht.

Geändert von maxpec (28.12.2008 um 19:47 Uhr)
Mit Zitat antworten
  #4 (permalink)  
Alt 28.12.2008, 20:19
Benutzerbild von Elchi3
Benutzer
neuer user
 
Registriert seit: 23.12.2008
Ort: Verden(Aller)
Beiträge: 64
Elchi3 befindet sich auf einem aufstrebenden Ast
Standard

Hallo,

vielleicht liegt es an der Pseudoklasse ":link"
Link-Pseudoklassen schließen sich gegenseitig aus, da ein Link nur den Status 'Besucht' oder 'Nicht besucht' haben kann (der Gegenspieler hier ist: :visited).

Nimm mal bei "a.home:link" das ":link" weg.

Wozu brauchst du ein Bild im Link, wenn du doch ein Hintergrundbild per CSS setzt?

Gruß,
<Elchi3>
Mit Zitat antworten
  #5 (permalink)  
Alt 28.12.2008, 21:19
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 08.02.2008
Beiträge: 3
maxpec befindet sich auf einem aufstrebenden Ast
Standard

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
Mit Zitat antworten
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ä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


Alle Zeitangaben in WEZ +2. Es ist jetzt 12:55 Uhr.