CSS Hover in IE - Wie?

Re(2): CSS Hover in IE - Wie?

stefs — Tue, 18 Sep 2007 14:32:36 GMT

sakarament, die ganze zeit ein broken file oben gehabt

Re: CSS Hover in IE - Wie?

stefs — Sat, 15 Sep 2007 01:57:33 GMT

es geht noch einfacher: http://www.tapirpirates.net/css_mouseover/


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE>CSS-Mouseover</TITLE>
<style type="text/css">

.mouseover {
	position:			absolute;
	overflow:			hidden;
	background-repeat:	no-repeat;
}

.imageOne {
	background-image:	url( 'image.gif' );
	width:				200px;
	height:				200px;
	left:				100px;
	top:				100px;
}

.imageTwo {
	background-image:	url( 'image2.gif' );
	width:				100px;
	height:				100px;
	left:				400px;
	top:				400px;
}


A.mouseOver {
	background-position:left top;
}

A.mouseOver:hover {
	background-position:left bottom;
}


</style>
</HEAD>

<BODY>
<a href="#" style="background-image:url('image.gif');">normaler textlink</a>
<a class="mouseover imageOne" href="#"></a>
<a class="mouseover imageTwo" href="#"></a>
</BODY>
</HTML>

anmerkung:
wollts nur mal ausprobieren, obs so auch geht. und voilá: weder internetzexplorer 6 noch ff machen faxen. sonstige browser hab ich nicht ausgetestet.

arbeitsweise der methode:
- bild ist ein hintergrundbild, dessen ausrichtung bei mouseover einfach verschoben wird

vorteil an der methode:
- relativ einfach. für einen neuen mouseover-effekt musst nur eine neue css-klasse erstellen. alternativ kannst sogar mit einer kombination aus klassen und style-tags arbeiten, dann wärs glaub ich ganz bequem. add: habs grad ausprobiert, funkt
- es ist nur ein bild, welches beim start sofort geladen wird

nachteil der methode:
- bild und mouseoverbild müssen die selbe größe besitzen
- nicht sonderlich elegant, die beiden bilder einfach zu einem bild übereinanderzustückeln

Re(5): CSS Hover in IE - Wie?

Dr. Watson — Thu, 06 Sep 2007 12:55:19 GMT

Verstehe ja, aber sollten die Bilder nicht sowieso schon geladen werden? Denn
display ist ja auch block; und nicht auf none;. Nur die visibility ist auf
hidden;.
Von daher sind ja beide Bilder schon "da".

Schon, aber das :Hover Bild wirst erst geladen, wenn du den Hover auch tatsächlich ausführst - unabhängig von display oder visibility.

Trotzdem will ich vorher noch unbedingt das schaffen, dass ich die visbility
mit einem Hover von hidden; auf visbile; setzen kann, das könnte in Zukunft
recht nützlich sein. Weißt du da Rat?

Was funktioniert denn nicht? Die visiblity sollte man in einem Hover schon ändern können...obwohl...wird das Hover überhaupt ausgeführt, wenn das nicht nicht visible ist? Sollte schon der Fall sein, kann ich aus dem Kopf aber jetzt nicht beantworten.

So wie ich das zur Zeit geschrieben habe, habe ich zwei verschiedene Tags mit
unterschiedlicher ID. Und ohne JS kann ich in CSS ja nicht die Attribute von
einem Tag beflussen, wenn ich mich in einem anderen befinde.

Doch, könnte klappen, da gehts dann aber wirklich in die Tiefen von CSS.
Mit dem * Selektor kann man Elemente Treffen, die sich zwischen 2 anderen befinden.

Angenommen du hast nun folgenden aufbau
Body
A-Tag-1
A-Tag-2

Dann könnte evtl. folgendes funktionieren, um den A-Tag-1 beim Hovern von A-Tag-2 zu ändern:

BODY * A-Tag-2:Hover { /*statements*/ }

Das trifft wohlbemerkt alles, was zwischen BODY und A-Tag-2 ist.

Sorry für das viele "könnte" und "sollte", aber mir fehlt die Zeit um das jetzt zu testen, vielleicht ists aber einen Versuch wert.

edit1

Jetzt noch eine völlig andere Idee. Du hast im A-Tag immer noch die Möglichkeit, ein Bild zu positionieren, zu welchem Zweck auch immer. Das blendest du per Default aus (A IMG display none), und beim A:Hover ein (A:Hover IMG { display: ...} ).

Somit könntest du sowohl ein background-image beim A:Hover definieren, als auch ein inline-image, das beim Hover erscheint, und dieses im A-Tag positionieren.

Beispiel:
A-TAG mit Hintergrund dem Bild, darin ein display:none Image.

Beim A-TAG:Hover setzt du display: block beim Bild.

Für das Bild selbst setzt du noch ein IMG { position: absolute; } mit genauer Positionierung, dann kannst du beim A:Hover den IMG Tag triggern, und das Bild nach belieben positionieren.

Re(5): CSS Hover in IE - Wie?

Dr. Watson — Thu, 06 Sep 2007 12:55:19 GMT

Verstehe ja, aber sollten die Bilder nicht sowieso schon geladen werden? Denn
display ist ja auch block; und nicht auf none;. Nur die visibility ist auf
hidden;.
Von daher sind ja beide Bilder schon "da".

Schon, aber das :Hover Bild wirst erst geladen, wenn du den Hover auch tatsächlich ausführst - unabhängig von display oder visibility.

Trotzdem will ich vorher noch unbedingt das schaffen, dass ich die visbility
mit einem Hover von hidden; auf visbile; setzen kann, das könnte in Zukunft
recht nützlich sein. Weißt du da Rat?

So wie ich das zur Zeit geschrieben habe, habe ich zwei verschiedene Tags mit
unterschiedlicher ID. Und ohne JS kann ich in CSS ja nicht die Attribute von
einem Tag beflussen, wenn ich mich in einem anderen befinde.

Re(4): CSS Hover in IE - Wie?

kakazza — Thu, 06 Sep 2007 12:46:00 GMT

Verstehe ja, aber sollten die Bilder nicht sowieso schon geladen werden? Denn display ist ja auch block; und nicht auf none;. Nur die visibility ist auf hidden;.
Von daher sind ja beide Bilder schon "da".

Mit Bildern würde ich gerne nicht so viel herumarbeiten, da ich kein Bildbearbeitungsprogramm habe. Das mit dem Punkt im großen Bild hat ein Freund für mich erledigen müssen.

Ich werde mir die Lösung aber auf jeden Fall notieren.

Trotzdem will ich vorher noch unbedingt das schaffen, dass ich die visbility mit einem Hover von hidden; auf visbile; setzen kann, das könnte in Zukunft recht nützlich sein. Weißt du da Rat?

So wie ich das zur Zeit geschrieben habe, habe ich zwei verschiedene Tags mit unterschiedlicher ID. Und ohne JS kann ich in CSS ja nicht die Attribute von einem Tag beflussen, wenn ich mich in einem anderen befinde.

Und zwei background-images kann ich ja in einem Tag nicht laden, das eine visible (dot) und dass andere hidden (großes Bild)

Re(3): CSS Hover in IE - Wie?

Infosauger — Thu, 06 Sep 2007 08:39:30 GMT

IE 6.0.2900: Nein, es funktioniert nicht.

Re(3): CSS Hover in IE - Wie?

Dr. Watson — Thu, 06 Sep 2007 08:18:34 GMT

Scheint soweit ja zu funktionieren.

Aber als letzten Tipp, damit es perfekt wird, und weil die Ladezeit beim Mouseover nerven kann: Gib beide Grafiken in ein (1) Bild, setz bei beiden (A und A:Hover) das selbe Bild als Background-image, und positioniere es in beiden fällen mit Background-Position.

Hat den Vorteil, dass der Browser nur ein Bild laden muss, und beim Mouseover gibts keine Verzögerung.

Also wenn z.b. dein erstes Bild 300px hoch ist, dann ist auch dein A 300px hoch, und Background-position ist vertikal 0px, und horizontal center.
Im unteren Teil des Bildes, auf den nächsten 300px, ist dann das Hover Bild, dass du im A:Hover teil letztendlich mit der background-position vertikal 300px, horizontal center enthüllst, also den BG eigentlich nur nach unten "scrollst".

Re(2): CSS Hover in IE - Wie?

kakazza — Thu, 06 Sep 2007 00:30:45 GMT

Also ersetzten schaffe ich jetzt, das ist schonmal viel wert, danke

Aber die edit2-Version scheint nicht so ganz zu klappen, ich denke mein Code ist etwas falsch, da mir nicht klar ist, wie ich das visibility: hidden; auf visible triggern soll. (Ein unsichtbares Bild zu klicken/drüberzu'hovern' ist nicht so einfach :D


			a#p1hov {
				height: 113px;
				width: 170px;
				display: block;
				background-image: url("./bilder/P1_over.gif");
				background-repeat: no-repeat;
				background-position: center center;
				position: absolute;
				top: 147px;
				left: 109px;
				visibility: hidden;
				}
			a#p1hov:hover {
				height: 113px;
				width: 170px;
				display: block;
				background-image: url("./bilder/P1_over.gif");
				background-repeat: no-repeat;
				background-position: center center;
				position: absolute;
				top: 147px;
				left: 109px;
				visibility: visible;
				}

Und danke für die - endlich mal verständliche - Anleitung. Du bist der erste, der tatsächlich weiß von was er redet anstatt nur "ja, mach das mit , das sollte gehen" zu sagen.

Edit:
http://members.chello.at/alphaman/repairing_non_broken_code_for_inferior_browsers_working_in_IE.html
^-- Hier mal die Version mit dem Austauschen, lustig ist allerdings, wie Firefox und IE die Positionierung anders interpretieren, kA warum.

Edit2:
Ich habe jetzt IE6 und IE7 parallel laufen (dank http://tredosoft.com/IE7_standalone ) und es sieht so aus: IE6: verschoben, warum auch immer, IE7: perfektes Ergebnis.

Die Fragen sind also:
*) Wie lege ich die zwei 's übereinander, um eine 2. Version zu haben (mit visibility)
*) Gibt es einen Universalcode, damit der IE6 das auch checkt, oder soll ich einfach auf ein

Mehr als eine Warnung vom IE, dass er ein eventuell bösartiges Skript geblockt hat, bekomme ich nicht (auch nach dem laden des "bösen" Skripts).

Vielleicht liegt es daran?
Users with SP2 installed may not see it working correctly, because webservers have to send htc files with the mime-type set to text/x-component.

Re(2): CSS Hover in IE - Wie?

kakazza — Tue, 04 Sep 2007 20:49:09 GMT
Diese Lösung bedient sich auch JS, funktioniert aber leider bei mir nicht.
(csshover.htc im selben Verzeichnis wie .html)
Code hinzugefügt:



http://members.chello.at/alphaman/repairing_non_broken_code_for_inferior_browsers_(csshover.htc ).html

Mehr als eine Warnung vom IE, dass er ein eventuell bösartiges Skript geblockt hat, bekomme ich nicht (auch nach dem laden des "bösen" Skripts).

Vielleicht liegt es daran?
Users with SP2 installed may not see it working correctly, because webservers have to send htc files with the mime-type set to text/x-component.

Re(2): CSS Hover in IE - Wie?

kakazza — Tue, 04 Sep 2007 20:49:09 GMT
Diese Lösung bedient sich auch JS, funktioniert aber leider bei mir nicht.
(csshover.htc im selben Verzeichnis wie .html)
Code hinzugefügt:



http://members.chello.at/alphaman/repairing_non_broken_code_for_inferior_browsers_(csshover.htc).html

Mehr als eine Warnung vom IE, dass er ein eventuell bösartiges Skript geblockt hat, bekomme ich nicht (auch nach dem laden des "bösen" Skripts).

Vielleicht liegt es daran?
Users with SP2 installed may not see it working correctly, because webservers have to send htc files with the mime-type set to text/x-component.

Re(2): CSS Hover in IE - Wie?

kakazza — Tue, 04 Sep 2007 20:15:19 GMT
Ah, sehr gut zu wissen, dass es zumindest mit der Version 7 kompatibel ist.
Schön wäre natürlich, wenn es mit der Version 6 auch funktionieren würde.

Re: CSS Hover in IE - Wie?

nico — Tue, 04 Sep 2007 20:14:16 GMT
http://www.peterkroener.de/2007/07/11/drop-down-menue-mit-css-und-fast-ohne-javascript/

Re: CSS Hover in IE - Wie?

reisi1990 — Tue, 04 Sep 2007 20:06:12 GMT
Ich surfe mit IE7 (bin FF-Verweigerer...und stolz darauf) und bei mir klappts ohne Probs. Ich fahre auf den Punkt, dann erscheint das Bild.

lg reisi

CSS Hover in IE - Wie?

kakazza — Tue, 04 Sep 2007 19:22:44 GMT
Hi,

Ich bastle gerade ein bisschen herum und habe folgende Situation:
Ich verwende Hovers, um Bilder erscheinen zu lassen, wenn ich über ein anderes Bild mit der Maus fahre.

Sieht dann so aus, sofern man einen Browser wie Opera, Safari, Firefox..., aber nicht den IE verwendent:
http://members.chello.at/alphaman/repairing_non_broken_code_for_inferior_browsers.html
(Das Original beinhaltet natürlich mehr Elemente, das ist nur ein Teil als Biespiel)

Nun funktioniert das wie erwähnt nicht im IE6, wie es um den IE7 steht, weiß ich nicht. Ich habe aber erfahren, dass der IE :hover schon unterstütz, jedoch nur mit Elementen.

Nun endlich die Frage:
Kann ich den Code umschreiben, oder einfach ganz anderen CSS Code verwenden, um den gewünschten Effekt in IE und Gecko Browsern zu verwenden?
(Eine Konkrete Antwort habe ich bissher nicht bekommen, nur Gemurmel über Sachen wie 'a { background-image: url(URL); } a:hover { background-image... } das mich noch nicht weitergebracht hat )

Danke im *TRÖT*

Randnotizen:
*) Nein, JS ist keine Lösung, darum geht es mir im Grunde.
*) Der Punkt wird nicht einfach durch ein größeres Bild ersetzt, sondern das Bild mit dem Text legt sich darüber (transparentes gif)

Hier der Punkt:

und das Bild, das sich über den Punkt legt:

*) NEIN, der Text in den .gifs soll nicht lesbar sein, also keine Kommentare darüber.