schon wieder: Image-Hover

[Nicola Straub]

Hi!

In http://forum.de.selfhtml.org/archiv/2004/8/88414/#m527043
gibt Ingo einen Tipp zum Gestalten eines Mouseover-Effektes mit
Bildern.

Ich hab - denke ich - generell das Hovern verstanden und
kriege es auch prinzipiell hin: Der Link bekommt ein
transparentes GIF und per CSS wird das Hintergrundbild
ausgetauscht:

http://physalia.de/tmp/kylltal.html
(oberstes Download-Icon im Content rechts)

Wobei ich nun voellig versage, ist das ganze mit unterschiedlichen
Bildern fuer unterschiedliche Links hinzukriegen. Ich kann ja kein
img fuer den Link verwenden, denn der ueberdeckte den (hinder-
gruendigen) Hover-Effekt. Ich kann ja aber im CSS nicht urs viele
Klassen fuer meine diversen Links (es werden 3 x 3) angeben.

Im genannten Posting erwaehnt Ingo IDs - aber ich steh auf
dem Schlauch: Wie (wo) verwende ich nun IDs? Oder muss ich
wirklich im Stylesheet 9 Abteilungen einrichten - nur weil
ich auf drei Seiten je drei Bilderlinks braucht? Kann doch
nicht... Oder?

Ach - und ich sehe grad: Im Mozilla wird das Hintergrundbild
gar nicht angezeigt ;-/

Danke fuer Eure Hilfe!

Herzliche Gruesse

Nicola

[Cheatah]

Hi,

Ich kann ja aber im CSS nicht urs viele
Klassen fuer meine diversen Links (es werden 3 x 3) angeben.

warum nicht? (Und was bedeutet "urs"?)

Ach - und ich sehe grad: Im Mozilla wird das Hintergrundbild
gar nicht angezeigt ;-/

Natürlich nicht, Du hast den Link im nicht-gehoverten Zustand ja auch als Inline-Element belassen, wodurch die Größenangaben nicht beachtet werden dürfen. Der IE macht das natürlich mal wieder verkehrt.

Cheatah

[Nicola Straub]

Hi!

warum nicht? (Und was bedeutet "urs"?)

urs = zig
Weil es mir nicht elegant scheint...

Ach - und ich sehe grad: Im Mozilla wird das Hintergrundbild
gar nicht angezeigt ;-/

Natürlich nicht, Du hast den Link im nicht-gehoverten Zustand ja auch als Inline-Element belassen, wodurch die Größenangaben nicht beachtet werden dürfen. Der IE macht das natürlich mal wieder verkehrt.

Hatt ich nicht ueberall 'block' geschrieben? Nochmal *nachguck*...

Gruss

Nicola

[Cheatah]

Hi,

urs = zig

danke. Woher stammt diese Bezeichnung, ist das Österreichisch?

Weil es mir nicht elegant scheint...

Doch doch.

Hatt ich nicht ueberall 'block' geschrieben? Nochmal *nachguck*...

Ich hab's jedenfalls nicht gesehen.

Cheatah

[Cybaer]

Hi,

Ich hab - denke ich - generell das Hovern verstanden und
kriege es auch prinzipiell hin: Der Link bekommt ein
transparentes GIF und per CSS wird das Hintergrundbild
ausgetauscht:

Was sieht der Surfer eigentlich, falls er in seinem Browser die Grafikanzeige deaktiviert hat?

Gruß, Cybaer

[Nicola Straub]

Hi!

Was sieht der Surfer eigentlich, falls er in seinem Browser die Grafikanzeige deaktiviert hat?

Ich wuerde tippen: Die ALT-Angabe? Oder wolltest du mich
drauf hinweisen, dass da noch nix drinsteht? Schon klar,
in den Links steht ja auch noch nix drin und so weiter.
Ich mach das, was ich kann immer lieber _nachdem_ ich das,
was ich nicht kann, hinbekommen hab. Ist halt meine Arbeits-
weise...

Gruss

Nicola

[Cybaer]

Hi,

Was sieht der Surfer eigentlich, falls er in seinem Browser die Grafikanzeige deaktiviert hat?
Ich wuerde tippen: Die ALT-Angabe?

Das ist gut! :-)

Und was sieht er, wenn CSS ausgeschaltet oder nicht vorhanden ist (oder die CSS-Datei wurde nicht geladen)?

Gruß, Cybaer

[Ingo Turski]

Hi,

Ich kann ja aber im CSS nicht urs viele
Klassen fuer meine diversen Links (es werden 3 x 3) angeben.

das wären dann 9 - wo ist das Problem dabei?

Im genannten Posting erwaehnt Ingo IDs - aber ich steh auf
dem Schlauch: Wie (wo) verwende ich nun IDs?

Wenn Du jeden Link _individuell_ einmalig kennzeichnen willst, wären IDs in der Tat sinnvoller als Klassen.
Also <a id="hotels" ...>.

Oder muss ich
wirklich im Stylesheet 9 Abteilungen einrichten - nur weil
ich auf drei Seiten je drei Bilderlinks braucht?

Sofern alle diese Links dasselbe PDF-Downloadbild beim hovern bekommen sollen, könntest Du auch _eine_ Klasse verwenden: <a class="pdfdownload" style="background:url(images/pdf.gif) no-repeat;" ...> und dann im CSS die übrigen Eigenschaften und den hover definieren.

freundliche Grüße
Ingo

[Nicola Straub]

Hi!

Klassen fuer meine diversen Links (es werden 3 x 3) angeben.
das wären dann 9 - wo ist das Problem dabei?

9. In dem Ministylesheet. Und nur fuer die drei Seiten, wo
je drei von den Teilen gebraucht werden. Ist nicht so
elegant, oder? Drum denke ich, es gibt bestimmt bessere
Loesungen. Ich koennt es ja auch mit JS machen, aber das
waere halt auch nicht so elegant IMO. Hover klang so,
hmmm... "schlank", als ich das Montag las.

Im genannten Posting erwaehnt Ingo IDs - aber ich steh auf
dem Schlauch: Wie (wo) verwende ich nun IDs?
Wenn Du jeden Link _individuell_ einmalig kennzeichnen willst, wären IDs in der Tat sinnvoller als Klassen.
Also <a id="hotels" ...>.

Also was ich moechte, ist, dass es individuelle Bilder
sind, die beim Hovern ausgetauscht werden. Ich hab es so
verstanden, dass dies nur mit _Hintergrund_bildern mit
CSS geht. Also brauche ich unterschiedliche Hintergrundbilder
im Style... Soweit bin ich momentan. Komme aber grad auch
beim besten Willen nicht mehr weiter. Der Kleine Mann hatte
auch diese Nacht Wachzeit zwischen 3 und halb 5 und so langsam
addieren sich all die 4,5 h-Naechte zu einem Riesenhaufen
Watte in meinem Hirn ;-(

Sofern alle diese Links dasselbe PDF-Downloadbild beim hovern bekommen sollen, könntest Du auch _eine_ Klasse verwenden: <a class="pdfdownload" style="background:url(images/pdf.gif) no-repeat;" ...> und dann im CSS die übrigen Eigenschaften und den hover definieren.

Drum guck ich mir DAS hier dann genauer auch erst an, wenn
wieder Sinn im Kopf herrscht. Ab nach Hause ;-(

Danke Euch allen so far, leider muss ich jetzt wirklich
erst mal aussteigen. Ich reiche meine Loesung nach...

Muede Gruesse

nici-

[Cheatah]

Hi,

9. In dem Ministylesheet. Und nur fuer die drei Seiten, wo
   je drei von den Teilen gebraucht werden. Ist nicht so
   elegant, oder?

doch, das ist absolut in Ordnung. Dafür ist CSS da. Es _anders_ zu tun wäre nicht elegant.

Also was ich moechte, ist, dass es individuelle Bilder
sind, die beim Hovern ausgetauscht werden. Ich hab es so
verstanden, dass dies nur mit _Hintergrund_bildern mit
CSS geht.

Ja, allerdings kann CSS ein im Link enthaltenes <img> ausblenden.

Der Kleine Mann hatte
auch diese Nacht Wachzeit zwischen 3 und halb 5 und so langsam
addieren sich all die 4,5 h-Naechte zu einem Riesenhaufen
Watte in meinem Hirn ;-(

Lass Dich vom Verursacher des kleinen Mannes 'ne halbe Stunde kräftig knuddeln, das hilft :-)

Sofern alle diese Links dasselbe PDF-Downloadbild beim hovern bekommen sollen, könntest Du auch _eine_ Klasse verwenden: <a class="pdfdownload" style="background:url(images/pdf.gif) no-repeat;" ...> und dann im CSS die übrigen Eigenschaften und den hover definieren.

Das style-Attribut sollte hier dringend gestrichen werden. Genau das ist die Aufgabe der Klasse(n) bzw. ID.

Cheatah

[Ingo Turski]

Hi,

Ja, allerdings kann CSS ein im Link enthaltenes <img> ausblenden.

was in diesem Fall auch eine gute Lösung darstellen könnte, die ohne IDs auskommt (und auch ohne style-Attribute, die ich hier nur als Beispiel angebracht hatte;-)

Also gesetzt den Fall, es gibt 9 unterschiedliche Linkgrafiken (z.B. pdf1 bis pdf9) und beim hovern soll jewels die gleiche Hovergrafik angezeigt werden:

<a class="pdfdownload"><img src="pdf1.gif" alt="Linktext 1" title="Erklärung zu Link 1" /></a>

.pdfdownload { background: url(images/pdf.gif); }
.pdfdownload:hover img { visibility:hidden; }

Abgesehen von der Einsparung der IDs hätte das noch die Vorteile, daß ein alt-Text zur Verfügung steht und die hover-Grafik nicht erst beim hovrn geladen werden muß.

freundliche Grüße
Ingo