Um die CSS-Anwendungsbeispiele auf dieser Seite nötigenfalls besser nachvollziehen zu können, sind die jeweiligen Angaben für die Beispiele im unteren Teil dieser CSS-Datei mit entsprechenden Kommentaren versehen. Viel Spaß beim Nachbasteln!


Hier werden User-Beiträge ungefiltert wieder gegeben

Beitrag von Jean-Jacques Sarton

Guten Tag,
die Seite gefällt mir sehr gut, allerdings gibt es einige kleine Fehlern.

<a href="" class="hover" style="float:left; margin:0 20px 0 0;"a>

funktionniert nur weil die Seite erneut aufgerufen wird.

Eine Interne Marke lässt sich nicht mit aller Browser ansteuern. Opera würde an diese Stelle versagen wenn nicht neu geladen wäre, ebenso Webkit basierten Browser wie z.B. Konqueror 4.5.5. Google-Chrome 10 funktionniert dagegen gut. Wenn der Anwender das Anzeigen von Bildern unterbunden hat, dürfte es ein wenig schwierig sein den Sinn des Links heraus zu finden. Bei IE wird angezeigt, dass ein Bild vorhanden ist, bei FF ist nichts zu sehen, außer eine weiße Fläche.

Da ich großer Wert auf Zugänglichkeit lege, habe ich eine kleine html Datei mit mein Test Code angelegt. Mit FF, IE Google-Chrome funktionierte alles wunderbar, wobei ich IE6 und IE7 ein wenig per expression: ... behilflich sein musste.
Da ich Wert auf Barrierearmut lege und eine css basierte Lösung suchte, habe ich nachstehenden aufbau:

<li>

		<a href="">

		<img class="over" src="over.jpg">

		<img class="norm" src="norm.jpg">

		Link Text

		</a>

		</li>

Zur Steuerung des augeblendeten Bild setze ich das z-index des Bildes "over"
Die Größe der li,a,img elementen wird in EM festgelegt, a ist natürlich mit display:block versehen.

der entscheindenden CSS kode sieht so aus:

a:hover, a:active a:focus { attr für den Link text }
a:hover .over, a:active .over, a:focus .over { z-index:3 }

Da a:hover .class wird nicht von IE 6/7 verstanden. Das problem konnte ich mit der passende expression lösen:

a {
hover:expression(

this.onmouseover=new Function("this.firstChild.style.zIndex=3;"),

this.onmouseout=new Function("this.firstChild.style.zIndex=1"),

this.onfocus=new Function("this.firstChild.style.zIndex=3"),

this.onblur=new Function("this.firstChild.style.zIndex=1")

);

}

IE 7 benötigt eigentlich nur für focus und blur eine Hilfe.
IE 8 versteht mein css Anweisungen und benötigt keine extra Hilfe.

Nachteil meiner Kode ist die Verwendung von javascript für IE 6/7. Vorteil ist dass die Schaltflächen auf eine Änderung des Schriftgrades reagieren (alle Maßangabe erfolgen in em oder %).

Grüße und dank für die Beiträgen.

MfG,

Jean-Jacques Sarton

PS: die Slide Show funktioniert nicht unter Opera, einzelne Bilder untereinander und Konqueror 4.5.5. Die Show erscheint aber das oberen Rand der Bilder ist in der Höhe von (Bilder aus Wikipedia.org).
Bei chrome und midori (ebenfalls WebKit basiert ist es OK)

Nach oben