hover

[nixdorf]

Hallo,

ich möchte den hover-efeckt ausnutzen, wenn ich mit der Mouse auf ein Bild gehe soll ein anderes Bild angezeigt werden, bzw. das bild in einer anderen Farbe dagestellt werden, ist daß möglich?

Gruß Nixdorf

[Nicolas]

Sicher ist das möglich! Hast du Fireworks zu Verfügung?
Damit müsste das gehen, wenn ich mich nicht irre!
Benutz doch auch mal die Suche, dort dürfte auch was stehen!

[rewboss]

Es würde mit einfachem CSS geben, wenn der Internet Explorer da nur ein bisschen mitspielen würde. Für den Browser musst du das <img>-Element in einem <a>-Element einpacken.

Du brauchst zwei Bilder (sagen wir: bild1.jpg und bild2.jpg) und zusätzlich noch ein transparentes GIF. So sieht der CSS-Code dann aus:

a.bild:link { background: url(bild1.jpg); }
a.bild:hover { background: url(bild2.jpg); }
a.bild img {
 width: 200px; height: 150px; /* oder was auch immer */
 border: 0;
}

Und der HTML-Code:

<a href="#" onclick="return false;" class="bild"><img src="transparent.gif" /></a>

Der onclick-Handler verhindert, dass der Browser zum Seitenanfang springt, sollte der User probeweise draufklicken -- es sei natürlich denn, du willst tatsächlich, dass das ein echter Link wird.

[walter]

Die JavaScript-Lösung wollen wir Dir nicht vorenthalten:

Siehe hier wenn Dus selbst Code willst (Beispiel anhand von Button, exakt gleich funktionierts auch mit Bildern:
http://de.selfhtml.org/javascript/beispiele/buttons.htm

Ansonsten bietet auch Dreamweaver und Fireworks Möglichkeiten das ohne selbst getippten Code zu machen.
Unter DW z.B. Einfügen -> Grafikobjekte -> Rolloverbild! Einfach mal Hilfe benutzen.

Aber ich würde wohl auch eher auf CSS zurückgreifen wie Rewboss erklärt!

[akratellio]

hallo nixdorf,

wie rewboss schon sagt am besten mit css..

so z.b.

<style type="text/css">
<!--
a{
width:10px; //hier muss die breite und evtl. die höhe des bildes hin
border:0;
background:url(bilder/bild1.gif) no-repeat 50% 0;
}
a:hover{
background:url(bilder/bild2.gif) no-repeat 50% 0;
}
//-->
</style>

<a href="xyp.php"></a>

und benutze nicht onclick, funktioniert mit deaktivierten javascript nicht.

mfg

akratellio

[rewboss]

und benutze nicht onclick, funktioniert mit deaktivierten javascript nicht.

onclick kann man in meinem Beispiel ruhig benutzen, denn dabei geht es lediglich darum, zu verhindern, dass wenn man versehentlich auf dem Link klickt, die Seite zum Anfang zurückspringt. Das ist lediglich eine Frage der Bequemlichkeit, auf die man eigentlich verzichten kann.