hover efekt

[Dread]

Hallo,
Ich habe ein problem zu dem ich nach langem suchen leider keine antwort gefunden habe. Ich habe ein button. dieser ist ein bild mit dem namen "home".
so ist er eingefasst
<div id="leisteoben">
<a href="home"><img src="buttons/home.jpg" style="border:0; alt="" /></a>
</div>

nun wull ich das, wen man mit der maus darüberfährt, ein anderes bild an stelle des vorigen erscheint.

ich habe alles ausprobiert aber nichts hat funktioniert.

ich hoffe ihr könnt mir helfen

[Alexander Brock]

Hallo Dread,

nun wull ich das, wen man mit der maus darüberfährt, ein anderes bild an stelle des vorigen erscheint.

Das, was du vorhast geht nicht mit CSS, aber mit JavaScript:

Du suchst die Eventhandler onMouseOut und onMouseOver sowie das image-Objekt.

Gruß
Alexander Brock

[Ashura]

Hallo Alexander.

Das, was du vorhast geht nicht mit CSS, aber mit JavaScript:

Nicht ganz korrekt.

Per a:hover kann man man dies auch ohne JS umsetzen und muss sich somit nicht auf JS verlassen...

Gruß, Ashura

[Alexander Brock]

Hallo Ashura,

Per a:hover kann man man dies auch ohne JS umsetzen und muss sich somit nicht auf JS verlassen...

Man kann das Bild natürlich als Hintergrund-Bild einbinden,
und das dann bei :hover auswechseln, aber dann haben weder
die Sehbehinderten noch die Suchmaschinen etwas davon.

Ob das vertretbar ist hängt von dem Einsatzzweck des Bildes ab.

Gruß
Alexander Brock

[Ashura]

Hallo Alexander.

(...) aber dann haben weder
die Sehbehinderten noch die Suchmaschinen etwas davon.

Das ist kein Argument. Du weißt sicher genau so gut wie ich, Screenreader und auch Suchmaschinen auf das alt="..." Attributund auf den Dateinamen achten. Das eigentliche Bild wird nicht erfasst.

Ob das vertretbar ist hängt von dem Einsatzzweck des Bildes ab.

Hier stimme ich aber zu.

Gruß, Ashura

[Alexander Brock]

Hallo Ashura,

Du weißt sicher genau so gut wie ich, Screenreader und auch Suchmaschinen auf das alt="..." Attributund auf den Dateinamen achten.

Nun, das alt-Attribut und der Dateiname verschwinden IMHO aus dem HTML-Code,
wenn das Bild als Hintergrund-Bild eingebunden wird.

Man könnte allerdings für die Suchmaschinen und Blindenbrowser
ein spacer-gif mit alt- und ev. longdesc- Attribut einfügen.

Gruß
Alexander Brock

[Cheatah]

Hi,

Nun, das alt-Attribut und der Dateiname verschwinden IMHO aus dem HTML-Code,
wenn das Bild als Hintergrund-Bild eingebunden wird.

der _Datei_name war nie drin ;-)

Man könnte allerdings für die Suchmaschinen und Blindenbrowser
ein spacer-gif mit alt- und ev. longdesc- Attribut einfügen.

Oder ein sinnvolles Element, welches dann ganz nebenbei auch von nicht-CSS-fähigen Browsern angezeigt wird.

Cheatah

[Dread]

also weiter komme ich leider immernoch nicht.
was müste ich den nun jetzt genau eingeben?
#home a:hover{background-image:bilder/home_o.jpg;}?
... oder ist es jetzt nur mit JS mäglich?..

Gruß Dread

[ziegenmelker]

Hallo,

also weiter komme ich leider immernoch nicht.
was müste ich den nun jetzt genau eingeben?
#home a:hover{background-image:bilder/home_o.jpg;}?
... oder ist es jetzt nur mit JS mäglich?..

warum schaust du nicht mal hier in selfhtml nach? Zuviel verlangt?

http://de.selfhtml.org/css/eigenschaften/hintergrund.htm#background_image

Btw, alt="" gehört nicht in das style-Attribut. Ein Browser bricht bei diesem Fehler die Weiterverarbeitung der Style-Anweisungen ab.

cu,
ziegenmelker

[Zeromancer]

Hallo,

was müste ich den nun jetzt genau eingeben?
#home a:hover{background-image:bilder/home_o.jpg;}?

würde(!) u.U. für einen 'überfahrenen' Verweis im umgebenden Element mit der 'id' home das entsprechende Bild anzeigen.

... oder ist es jetzt nur mit JS mäglich?..

Gruß Dread

ich löse es im Normalfall so:

a-Element:
----------

• Links als Blockelemente definieren http://de.selfhtml.org/css/eigenschaften/positionierung.htm#display
• Breite und Höhe angeben
• Hintergrundbild zuweisen

Pseudoformat :hover auf das a-Element anwenden:
----------------------------

http://de.selfhtml.org/css/eigenschaften/hintergrund.htm

Mit freundlichen Grüßen

André

[MudGuard]

Hi,

Man könnte allerdings für die Suchmaschinen und Blindenbrowser
ein spacer-gif mit alt- und ev. longdesc- Attribut einfügen.

Oder ein sinnvolles Element, welches dann ganz nebenbei auch von nicht-CSS-fähigen Browsern angezeigt wird.

Wie wärs damit:

Der Link enthält das normale Bild (inkl. alt-Attribut für die Textbrowser) und ist mit display:block und den Bildmaßen formatiert.

Bei :hover wird das Bild im Link auf display:none gesetzt und das :hover-Bild als Hintergrund in den Link eingesetzt.

Damit sind Textbrowser versorgt, CSS-unfähige Browser (da wird halt das hover-Bild nicht angezeigt) und CSS-fähige Browser (da sollte alles normal funktionieren).

Also so:

a:link, a:visited { line-height:91px; display:block; width:116px; height:91px; color:#000; }  
a img { border:none; }  
a:hover { background-image:url(ishover.png); color:black; }  
a:hover img { display:none; }

<a href="blablubb.html"><img src="nohover.png" alt="nohover"></a>

Firefox und Opera machens problemlos. IE kann ich grad nicht testen.

cu,
Andreas

[Ingo Turski]

Hi,

a:link, a:visited { line-height:91px; display:block; width:116px; height:91px; color:#000; }

seltsame Formatierungen, oder?

<span class="declarations">{ line-<span class="property">height

freundliche Grüße
Ingo

[MudGuard]

Hi,

seltsame Formatierungen, oder?
<span class="declarations">{ line-<span class="property">height

Das Ding erkennt halt line-height nicht richtig ...

cu,
Andreas

[Reni]

hallo!

Firefox und Opera machens problemlos. IE kann ich grad nicht testen.

IE6, winXP tut´s nicht :-(

Gruß,
Reni

[MudGuard]

Hi,

Firefox und Opera machens problemlos. IE kann ich grad nicht testen.
IE6, winXP tut´s nicht :-(

Probiers so:

a:link, a:visited { line-height:91px; display:block; width:116px; height:91px; border:none; }  
a img { border:none; }  
a:hover { background-image:url(ishover.png); border:0px solid white; }  
a:hover img { display:none; }

(da war was, daß IE innere Elemente bei :hover nur berücksichtigt, wenn sich am Element selbst was ändert - die "Änderung" der border läßt es in meinem IE 6 auf Win2k funktionieren)

cu,
Andreas

[Dread]

Da die Page nur ein Schulprojekt ist und außer meine Lehrer das niemand zu Gesicht bekommt ist das meiner Meinung vertretbar.

also,  a:hover habe ich schon ausprobiert. ... gleich als erstes.
aber vielleicht verwende ich den Rest falsch.

was müsste dann nach dem a:hover stehen.
davor ja #home

danke jetzt schon

ach ja, wo wir gerade bei Bildern sind. besteht die Möglichkeit ein bild als Hintergrund für einen div zu bestimmen?
ich hab es so probiert:

<div style="streifen_l" background-image:bilder/streifen_l.jpg;></div>
und auch das bild über die style.css datei in verschiedenen Variationen. aber leider kein erfolg

[Zeromancer]

Hallo Dread,

...besteht die Möglichkeit ein bild als Hintergrund für einen div zu bestimmen?

sicher.

<div style="streifen_l" background-image:bilder/streifen_l.jpg;></div>
und auch das bild über die style.css datei in verschiedenen Variationen.

http://de.selfhtml.org/css/eigenschaften/hintergrund.htm hilft dir da weiter.

Mit freundlichen Grüßen

André

[Orlando]

Hallo Alexander,

Das, was du vorhast geht nicht mit CSS, aber mit JavaScript:

http://aktuell.de.selfhtml.org/artikel/css/mouseover/

Bitte verderbe keine Anfänger.

Grüße
Roland