Hover-Effekt

LaLinda

Aaaalso: http://www.pic-ture.de/funcolor/home.html - Wenn man mit der Maus über die Elemente in den gestrichelten Linien geht, soll das T-shirt (o.ä.) als foto erscheinen. Ich weiß, dass ältere Versionen vom Internet Explorer den hover-Effekt nicht erkennen und mir wurde gesagt, ich soll da einen Link reinlegen. Allerdings möchte ich, dass die Bilder nach wie vor in der CSS-Datei bleiben und nicht, dass sie auf jeder Seite extra geladen werden (ist das sinnvoll?)

Also die Frage: Kann man auch das Vorhandensein eines BILDES und die Tatsache, DASS der Div-Bereich einen Link erhält, per CSS definieren?

liebe grüße.... Linda

Thonixx

Ja das geht....
Ich such noch schnell den Link: aaah da: http://www.dynamicdrive.com/style/csslibra…p-image-viewer/

Und dass das Bild im CSS liegt, geht nie

jojo87

Ansonsten löst ein kleines Javascript das Problem für den IE < 7:
http://htmldog.com/articles/suckerfish/

Gruß,
Jojo

sejuma

Sieh dir mal den Quelltext der CSS-Datei deiner Demoseite an. Hier ein Auszug bzgl. Caps:

Code

#cap {
   position: absolute;
   top: 363px;
   left: 44px;
    background-image:url(hintergrundbilder/cap_l.gif);
	background-repeat:no-repeat;
	width: 88px;
	height: 81px;
	}
    #cap:hover {
    position: absolute;
	background-repeat:no-repeat;
   top: 363px;
   left: 44px;
    background-image:url(hintergrundbilder/cap_e.gif);
    width: 88px;
	height: 81px;
}

Alles anzeigen

Die Bilder liegen also sozusagen doch in der CSS-Datei:
Das "Normalbild" als Hintergrundgrafik im #cap und das Hoverbild als Hintergrundgrafik im #cap:hover

Der HTML-Teil ist recht simpel:

Code

<div id="cap"></div>

Im IE 7 klappt das. Im IE6 kann ich es momentan leider nicht testen.

Eine weitere Möglichkeit so etwas zu realisieren findest du hier erklärt.

synaptic

meines wissens nach interpretiert der ie6 das hover nur bei links....
hab auch mal probiert so einen hover-effekt auf ein div zu legen, was net geklappt hatte...deshalb hab ich dann verschiedene klassen mit css gebaut und dann mit nem javascript und onmouseover die klassennamen gewechselt.
sah dann so aus:

Code

<style type="text/css">
klasse1{
background:url('pfadzumbild/bild1.jpg');
}


klasse2{
background:url('pfadzumbild/bild2.jpg');
}
</style>


<div id="cap" onmouseover="this.className='klasse2';" onmouseout="this.className='klasse1';"></div>

Alles anzeigen

Thonixx

Ähmm hier gehts doch nicht um einen Bildhovereffekt !?

Der Ersteller des Threads will doch, dass man durch Überfahren eines Linkes oder Textteil, etc... ein jeweiliges Bild zum Vorschein kommt. Oder war das falsch von mir?

sejuma

Genau! Und das kann man mit einem Link (Blindlink ohne Zielseite) und Hover lösen.
Man benötigt lediglich zwei unterschiedliche Hintergrundgrafiken: Eine für den Normalzustand und eine für den Hoverzustand.

Hover-Effekt

Tags

Benutzer online in diesem Thema