Derzeit bin ich damit beschäftigt, eine neue Homepage für mich zu erstellen. Da ich etwas Farbe ins Spiel bringen will, sollen die Links einen farbigen Rollovereffekt haben.

Ich habe ein <div> mit dem link darin. wenn ich jetzt mit der Maus über das div gehen, soll die Hintergrundgrafik gewechselt werden.

Jemand Ahnung, wie ich sowas realisieren kann ?

btw.: Rollover mit ner normalen Grafik (nicht Hintergrund) wär kein problem, aber ich brauchs fürn Hintergrund.

Freu mich auf hilfreiche Antworten.

Alcapone

"Everything, that can go wrong, will go wrong" Murphy's Law

Warum JavaScript verwenden? Das geht auch mit CSS.

Quellcode:.deindivtag { background-image: url(bg.png); }
.deindivtag:hover { background-image: url(neuer_bg.png); }
Kompatibilität: * - IE

Wenn es auch mit dem IE funktionieren soll, bleibt dir eine weitere Möglichkeit:

Quellcode:A.deinlink { display: block; width: <breite des bildes>; height: <höhe des bildes>; background-image: url(bg.png); }
A.deinlink:hover { background-image: url(neuer_bg.png); }
Oder eben per JS, wobei ich das zuletzt verwenden würde:

Gib deinem DIV-Tag eine id (<div id="meincoolerdivtag" onmouseover="mausdrauf();" onmouseout="mausweg();">)

Danach musst du die 2 JS-Funktionen implementieren:
Quellcode:function mausdrauf()
{
document.getElementById("meincoolerdivtag").style.backgroundImage = "neuer_bg.png";
}
function mausweg()
{
document.getElementById("meincoolerdivtag").style.backgroundImage = "bg.png";
}
Nicht getestet, aber das sollte es tun.

Rambo Engineer @ Drippy's 2fort - finest TFC 1.5 || Bild Upload || The world's most advanced open source database

Obwohl die folgende Methode die beste der gelisteten ist, kann man auch hier noch etwas hermspielen.

Zitat:

K-Putt postete
Quellcode:A.deinlink { display: block; width: <breite des bildes>; height: <höhe des bildes>; background-image: url(bg.png); }
A.deinlink:hover { background-image: url(neuer_bg.png); }


Speichere deine Bilder in folgender Form:

Mouseover oben, Normal unten. Css hierfür:
Quellcode:a.deinlink { display: block; width: <breite des bildes>; height: <1/2 höhe des bildes>; background-image: url(bg.png); background-position:bottom; }
a.deinlink:hover { background-position:top; }
Erspart dir JS-Preload oder das Warten auf's Laden wenn die Maus erst mal drüber ist.

ist jedoch wiederum nicht IE kompatibel...

Ich verwende meist sowas:
Quellcode:<span onclick="location.href='deine_url'" class="button_normal" onmouseover="this.className='button_hover'" onmouseout="this.className='button_normal'">deine Beschriftung für den Link</span>

css:
.button_normal
{
    color: #FFFFFF;
    background-color: #000000;
    border: 1px solid #000000;
    padding: 3px 5px 3px 5px;
    margin-right: 5px;
}
.button_hover
{
    color: #000000;
    background-color: #FFFFFF;
    border: 1px solid #000000;
    padding: 3px 5px 3px 5px;
    margin-right: 5px;
    cursor: pointer;
}
Valider CSS/JS Code, der sowohl im IE, wie auch in allen anderen Browsern anstandslos funktioniert.

Ich habe hier als Hintergrundsänderung eine Farbe genommen; für dein Beispiel würde ich jedoch die Idee von Pepe nehmen (1 Bild für beide Zustände).

#edit
müsste es heut zu tage nicht Laser-over heissen? o_0

Zitat:

Megge postete
ist jedoch wiederum nicht IE kompatibel...

Rambo Engineer @ Drippy's 2fort - finest TFC 1.5 || Bild Upload || The world's most advanced open source database

das funktioniert? ich dachte immer, das bild wird dann skaliert und nicht abgeschnitten

"Herr Keuner sagte: «Schwierig ist, diejenigen zu belehren, auf die man zornig ist. Es ist aber besonders nötig, denn sie brauchen es besonders.»" - Bertolt Brecht
-
"Hier gibt's was auf die Ohren" - Thewall.de bei last.fm (Was ist last.fm?)

Nein, das Bild wird nicht skaliert.

Stell dir vor, du willst einen Hintergrund, der sich immer wiederholt.
Da wäre es doch unangebracht, wenn der Hintergrund mit der größe des Elements skalieren würde.

Rambo Engineer @ Drippy's 2fort - finest TFC 1.5 || Bild Upload || The world's most advanced open source database

ja okay. ich hab nicht beachtet, das es sich um ein hintergrundbild handelt. da hab ich eine größenangabe noch nie benutzt. ich war jetzt fälschlicherweise von einem normalen bild (<img>) ausgegangen (aus welchem unerklärlichem Grund auch immer =)), und da wird bei größenangaben ja skaliert. wie dem auch sei. wieder was gelernt.

"Herr Keuner sagte: «Schwierig ist, diejenigen zu belehren, auf die man zornig ist. Es ist aber besonders nötig, denn sie brauchen es besonders.»" - Bertolt Brecht
-
"Hier gibt's was auf die Ohren" - Thewall.de bei last.fm (Was ist last.fm?)

vorallem ist das auch nich die grösse des bildes sondern die des anchors