Antworten zum Thema „CSS - Bildermenü ohne JAVA möglich ? Nur in CSS“

[nostra87]

Hallo Leute!

Ich möchte demnächst Seiten in Divs umsetzen. Ich habe zwar nichts
gegen die tabellarische Struktur einzuwenden, allerdings sollte man so
langsam up to date sein.

Ich benötige ein Link oder evtl. einen Tipp. Ich möchte nämlich einfache
Navigationen, mittels Bildern (auch rollOver), umsetzen und das Ohne
einen JAVA Script.

Über google konnte ich zwar einige Seiten finden, jedoch war die
Umsetzung immer recht Problematisch. Könnt ihr mir da evtl. helfen ?

 

[MyBad]

AW: CSS - Bildermenü ohne JAVA möglich ? Nur in CSS

Das funktioniert auch super ohne JS nur mit CSS. Hier mal ein Beispiel:

HTML

<a href="#" class="button"></a>

CSS

/* Normalzustand */
.button{
display: block;
width: 100px; /*breite deines bildes*/
height: 20px; /*höhe deines bildes*/
background-image: url(bild1.jpg);
}

/* Rollover */
.button:hover{
background-image: url(bild2.jpg);
}

Das wars schon.

 

[HansHansa]

AW: CSS - Bildermenü ohne JAVA möglich ? Nur in CSS


Listamatic: one list, many options - Using CSS and a simple list to create radically different list options

Hier solltest Du fündig werden.

 

[nostra87]

Das funktioniert auch super ohne JS nur mit CSS. Hier mal ein Beispiel:

HTML

<a href="#" class="button"></a>

CSS

/* Normalzustand */
.button{
display: block;
width: 100px; /*breite deines bildes*/
height: 20px; /*höhe deines bildes*/
background-image: url(bild1.jpg);
}

/* Rollover */
.button:hover{
background-image: url(bild2.jpg);
}

Das wars schon.

Oh, sieht sehr leicht aus und macht sogar sinn !
Werde ich mal gleich ausprobieren.

@HansHansa

Vielen dank für deine Linksammlung :lol:
Sehr nett von dir !

@

Zuerst habe ich nicht die Möglichkeit, die Schaltfläche frei nach
Wahl zu positionieren. Desweiteren stelle ich fest, dass der
RollOver-Effekt nicht funktioniert

Edit: Whups. Die RollOver funktion, geht doch einwandfrei
Jetzt noch mit der Position experimentieren

Edit²: Genial. Nun habe ich diese Version noch verbessert.
Durch einen Float lässt sich das Menü horizontal anpassen.

Danke