Mit css eine Onmouseover navigation

[Mase]

Hallo,

ich habe eine Navigation mit Bildern mit Onmouseover effekt wie hier mit dem Hampelmann gemacht: http://www.fractatulum.de/fraccss/sample/hov2format2.htm

hier ist sie: http://www.sirnick.de/sirnick

aber die funktioniert nur in meinem IE 6 in Netscape 7 zum beispiel garnicht.
Warum ?

würde mich über Hilfe freuen

.mase

[Axel Richter]

Hallo,

ich habe eine Navigation mit Bildern mit Onmouseover effekt wie hier mit dem Hampelmann gemacht: http://www.fractatulum.de/fraccss/sample/hov2format2.htm

hier ist sie: http://www.sirnick.de/sirnick

aber die funktioniert nur in meinem IE 6 in Netscape 7 zum beispiel garnicht.
Warum ?

a.eins {
background-image: url(eins_dn_000.gif);
background-repeat : no-repeat;
width:120px;
height:55px;
}
a:link.eins {
background-image: url(eins_dn_000.gif);
background-repeat : no-repeat;
}
a:visited.eins {
background-image: url(eins_dn_000.gif);
background-repeat : no-repeat;
}
a:hover.eins {
background-image: url(eins_hi_000.gif);
background-repeat : no-repeat;
}

<div style="position:absolute; height:55px; width:120px; left:10px; top:115px;"><a href="#" class="eins"></a></div>

Breitenangaben werden nur bei Blocklevel-Elementen interpretiert. Ein a ist _kein_ Blocklevel-Element, sondern ein Inline-Element. Deshalb ist ein <a></a> genau 0px breit, also nicht zu sehen.
Bei http://www.fractatulum.de/fraccss/sample/hov2format2.htm
wird das durch ein display:block; im Style vom a umgangen. Das ist aber, meiner Meinung nach, nicht ganz sauber, weil das aus dem Inline-Element a kein Blocklevel-Element macht. Besser wäre es die Größe durch eine transparente Grafik zu erzeugen.

<div style="position:absolute; height:55px; width:120px; left:10px; top:115px;"><a href="#" class="eins"><img src="transparent.gif" height="55" width="120" alt="eins"></a></div>

viele Grüße

Axel

[Axel Richter]

Hallo,

Nochwas:

a.eins {
background-image: url(eins_dn_000.gif);
background-repeat : no-repeat;
width:120px;
height:55px;
}
a:link.eins {

a.eins:link {

background-image: url(eins_dn_000.gif);
background-repeat : no-repeat;
}
a:link.visited {

a.eins:visited {

background-image: url(eins_dn_000.gif);
background-repeat : no-repeat;
}
a:hover.eins {

a.eins:hover {

background-image: url(eins_hi_000.gif);
background-repeat : no-repeat;
}

Element.Klasse:Pseudoformat
siehe auch bei:
http://www.fractatulum.de/fraccss/sample/hov2format2.htm

viele Grüße

Axel

[Jan]

Hallo,

wird das durch ein display:block; im Style vom a umgangen. Das ist aber, meiner Meinung nach, nicht ganz sauber, weil das aus dem Inline-Element a kein Blocklevel-Element macht.

es geht um die anzeige und da formatiert display:block; ein inlineelement zu einem
blockelement welches sich dann auch so verhält und so formatiert werden kann.

Besser wäre es die Größe durch eine transparente Grafik zu erzeugen.

ne, die zeiten sind nun wirklich vorbei.
display:block ist schon die richtige variante.

Gruss, Jan aus Dresden

[Axel Richter]

Hallo,

es geht um die anzeige und da formatiert display:block; ein inlineelement zu einem
blockelement welches sich dann auch so verhält und so formatiert werden kann.

Ja, allerdings ist der Inhalt vom a-Element dann immer noch leer.
<a href="name.html" style="display:block; width:100px; height:20px;"></a>

Bist Du sicher, das soetwas von allen Browsern immer als Link interpretiert wird?
Dann wenigstens:
<a href="name.html" style="display:block; width:100px; height:20px;"> </a>

Besser wäre es die Größe durch eine transparente Grafik zu erzeugen.
ne, die zeiten sind nun wirklich vorbei.
display:block ist schon die richtige variante.

Was ist dagegen zu sagen? Man könnte sogar noch ein title-Attribut im img-Tag einsetzten, um den Link in Text-Browsern "sprechen" zu lassen. Dein leeres a-Element wird von Text-Browsern sicherlich nicht aussagekräftig interpretiert.

viele Grüße

Axel

[Mase]

Hi nochmal,

ich woltl noch fragen, meint ihr ich sollte die Bilder vorladen ? Ich meine im head. Und wenn ja, mit so einem Javascript oder kennt ihr eine bessere Möglichkeit ?

mfg

.mase

[Jan]

Hallo,

Ja, allerdings ist der Inhalt vom a-Element dann immer noch leer.
<a href="name.html" style="display:block; width:100px; height:20px;"></a>

darauf habe ich jetzt gar nicht geachtet, dass das element leer ist.

Bist Du sicher, das soetwas von allen Browsern immer als Link interpretiert wird?

die, die ich hier habe ja, aber ich würde das <a> element nicht leer lassen, nur in dem beispiel, ich bin davon ausgegangen, der link hat einen normalen text und der hintergrund wird bei over gewechselt, hier halt ein bild und woanders die farbe.
wenn da nur die hintergrundgrafik gewechselt werden soll würde ich das herömmlich mit <img> und js machen.
zumal die grafik dann die information alleine trägt und ätere browser diese css formatierung nicht anzeigen.

Besser wäre es die Größe durch eine transparente Grafik zu erzeugen.
ne, die zeiten sind nun wirklich vorbei.
display:block ist schon die richtige variante.
Was ist dagegen zu sagen? Man könnte sogar noch ein title-Attribut im img-Tag einsetzten,

das kann man auch bei dem <a> element

Dein leeres a-Element wird von Text-Browsern sicherlich nicht aussagekräftig interpretiert.

wie oben gesagt, so war die verwendung von mir nicht gedacht.

Gruss, Jan aus Dresden

[Mase]

Hi,

vielen Dank

schönen Tag noch

.mase