Mouseover mit Hintergrundbild

gurkerl · 11.10.2007, 13:05

Hallo!

Vorweg: Ich bin nur ein CSS-Laie

Mit CSS kann man ja bei Mouseover die Hintergrundfarbe wechseln lassen (siehe mein Script).
Ist es denn auch möglich, dass man in diesem Script die Befehle so umschreiben, dass sich ein Hintergrundbild ändert. Ohne dass das Script ausgebaut werden muss. Also mal ganz simpel ausgedrückt z.B. statt
bgcolor"FFFFFF" - bgimage"bg0.gif"
bgcolor"000000" - bgimage"bg1.gif"
Und wenn möglich, bei aktiviertem Modus - bgimage"test1.gif"

<td colspan="0" rowspan="0" valign="top" bgcolor="#FFFFFF">
<a href="test.html">
<span onMouseOver="BildI.style.backgroundColor='#000000';" onMouseOut="BildI.style.backgroundColor='#FFFFFF';">
<img src="test.gif" width="199" height="26" border="0" alt="" id="BildI">
</span>
</a>
</td>

Sonst habe ich immer die Mouseovers mit JavaScript gemacht (auch diese Sprache kann ich eigentlich nicht). Aber durch diese Lösung mit CSS würde ich mir viel Änderungsarbeit sparen, sollte mal z.B. ein NaviPunkt dazukommen.

Für die jenigen, die wissen wollen, warum das ganze: Ich erstelle im Photoshop ein GIF mit transparentem Text und transparentem Pfeil davor. Beim Mouseover soll sich sowohl der Pfreil, als auch der Text farblich verändern. Also würde ich zwei Hintergrundbilder machen, wo der linke Teil die Farben des Pfeils haben und der rechte Teil die Farben des Textes.

Ich hoffe, unter euch findet sich ein schlauer Fuchs, der mir da weiterhelfen kann.

Gruß
Sabine

rewboss · 11.10.2007, 20:14

Zitat:

Zitat von gurkerl

Mit CSS kann man ja bei Mouseover die Hintergrundfarbe wechseln lassen (siehe mein Script).

[...]

<span onMouseOver="BildI.style.backgroundColor='#000000';" onMouseOut="BildI.style.backgroundColor='#FFFFFF';">

Also, da hast du JavaScript und CSS zusammengewürfelt -- aber das ist eigentlich ein Umweg. JavaScript braucht man überhaupt nicht.

Schau dir diesen Code an:

Code:

<html>
<head>

<style type="text/css">
a:link, a:visited { background-color: #ffff00; }
a:hover, a:active { background-color: #000000; }
</style>

</head>

<body>

<a href="test.html">Dies ist ein Link</a>

</body>

</html>

a:link definiert die Eigenschaften für einen Link, a:active für einen Link, der gerade angeklickt wird, a:hover für einen Link, auf dem der Cursor steht, und a:visit für einen bereits besuchten Link. Du siehst, es geht auch ohne JavaScript.

Das geht auch mit Bildern. Anstatt im CSS eine Farbe zu definieren, definiert man eine Bilddatei:

Code:

<style type="text/css">
a:link, a:visited { background-image: url(bild1.gif); }
a:hover, a:active { background-image: url(bild2.gif; }
</style>

Man kann auch Farbe und Bild definieren:

Code:

<style type="text/css">
a:link, a:visited { background: #ffffff url(bild1.gif); }
a:hover, a:active { background: #000000 url(bild2.gif); }
</style>

...wenn das Bild nicht angezeigt werden kann, wird statt dessen die Farbe genommen -- bzw bei einem transparenten GIF oder PNG scheint die Farbe durch.

Ammersee · 11.10.2007, 21:05

Hallo,

also oben wurde es ja schon mal erklärt aber hier nocheinmal
http://ammerseekind.de/sabine
ich hoffe du findest dich zurecht

Grüße Ammersee

Ammersee · 11.10.2007, 21:07

hups wurde ja doch schon erklärt man bin ich ein dödel ich dachte des fängt oben an sry

gurkerl · 15.10.2007, 17:41

Ihr seid genial!

Besten Dank!