CCS Rollover/reagierender Bereich

niknaim

Hallo an euch,
nachdem ich jetzt 2 Stunden lang alle möglichen Foren durchsucht habe eineFrage an euch:

Ich habe eine Flöche von 800x 200 Pixeln perr CSS definiert. In dieser Fläche befinden sich 5 kleine Butoons (z.B. 20x20 px groß). Wenn ich auf einen dieser Buttons mit der Maus drüber gehen, soll die gesamte Hintergrundfarne (800x 200px) sich ändern. jedem der 5 Buttons ist dabei eine bestimmt Hintergrundfarbe für die Fläche zugeordnet.

Ist das mit Css hinzubekommen?

Gruss und danke schon mal vorab!

Niklas

P.S.:
Ein Hauptpoblem bei meinen Veruschen war,dass ich den Rollover Bereich einer Grafik mit CSS nicht eingrenzen konntem, oder geht das doch??

jojo87

Uh, da wirst du denk js für brauchen, rein mit css wird das schwierig resp. unmöglich.
Eine Idee hätte ich:
gestalte die Buttons so:

Code

[url='#']Buttontext[/url]
[url='#']Buttontext[/url]
etc.

CSS:

Code

#button1 {
width: 800px;
height:200px;
background: blue url(buttonbild1.jpg) no-repeat left center;
z-index:1;
}


#button2 {
width: 800px;
height:200px;
background: red url(buttonbild2.jpg) 50px center;
z-index: 2;
margin-left: 50px; 
}


etc...


#button1:hover {
z-index:100;
background: yellow url(buttonbild1.jpg) no-repeat left center;
}
etc

Alles anzeigen

Die Idee ist halt die, dass du jeden Link 800x200 groß machst und sie mit z-index übereinander versetzt anzeigen lässt. Dann lässt du bei Mouseover den entsprechenden Link komplett in den Vordergrund treten und die Hintergrundfarbe wechseln. Anders wird das ohne js wohl nicht gehen.
Allerdings bin ich mir nicht ganz sicher, obs wirklich funktioniert und du wirst auf alle Fälle Scrollbalken bekommen, auch wenn eigentlich alles ohne Scrollen zu sehen ist.
Probiers halt mal aus.

Frohes Neues,
Jojo

Tags