onmouseover ohne javascript?

[angiebali]

Liebe Profis,

ich möchte eine neue navigation erstellen mit tabelle. Background ist jeweils ein gif.image.
On mouseover soll das background-image wechseln (und die linkfarben). Leider wechseln nur die linkfarben, aber nicht das image.
Das problem ist, ich will kein javascript verwenden (nur css), da zu viele benutzer java deactivieren. Geht das? Wenn ja, Wiiiiieeeee?

Habe .upbutton und .downbutton eingegeben, es geht einfach nicht. Verflixte technik

Kann mir jemand den goldenen code verraten? Was mache ich falsch? Danke für tips.
Ich beneide die jungs die sich mit all dem kram auskennen, hut ab!

pc laie antje

 

[sycorx]

hey,

css is ja ein recht komplexes und flexibles Modding-Script, wie man es auch an folgenden beispiel erkenen kann, denn es lässt sich ein rollover menu programmieren mit css ohne jegliche js - scripte, das beste daran ist die folgende methode funktioniert fast in allen browser (Auch unter linux), aber ab den etwas neueren versionen.

was man "schreiben" muss is folgendes:


CODE
<style>
a.set // CSS Klasse beim Tag <a> - damit man auch gleich den Button verlinken kann.
{
display:block; // Damit die Grafikposition richtig interpretiert wird.
background-image:url(OriginalBild.png);
width:92px; height:20px // dazugehörige Breite u. Höhe angeben für korrekte Darstellung

}

#button1:hover {background-image:url(RollOverBild.png);} // Schlieslich beim herüberfahren der Maus neus Bild laden.
</style>




..das ganze ruft man dann so auf:


CODE
<a href="#" class="set" id="button1"></a>




man brauch nix weiter angeben, die grafik wird dann dort wo das <a> Tag steht automatisch geladen! - zusätzlich sollte man sich bei größeren menus (ab 5 buttons) die bilder in die cache vorraus laden.

dazu gibt es verschiedene methoden einmal per js oder ganz simpel die grafiken versteckt mit 1x1 pixel größe laden!

bsp: <img src="Bild" width="1" height="1"> - am code ende oder wo anders, das is optional.

fertig.

für weitere buttons muss man die klasse mit indikatoren bestücken also für den nächsten button set1 dann set2 usw das selbe bei den ID's des Rollover.

ID's werden immer, permanent, mit einem # vor dem parameter angegeben, dies sollte man sich merken. - ich hoffe mal das alles dabei ist, was du benötigst

 

[angiebali]

Oh spitze, danke vielmals, werde ich ausprobieren

 

[Gaba]

ich finde du hast das ganze sehr kompliziert gemacht:
CODE
a.link {
backgroundimage: url(deinbild.jpg);
font-color: green;
}
a.link:hover {
backgroundimage: url(deinbild2.jpg);
font-color: black;
}




Das ist doch viel eifacher?