Rollover-Buttons (JPGs) in CSS per Positionierung! Wie mit alt-atributen?

[n3012]

Hallo... ich begrüße euch mal als Neuling hier :)
ich habe folgendes Problem...

Ich habe eine Navigation bestehend aus Bildern (Buttons) mit Rollover effekten per CSS erstellt.

Ich weiss nicht wer den Trick kennt aber man benutzt ein bild
wie dieses hier:

und verändert beim rollover nur die position des bildes... das hat den vorteil das man kein Preload braucht und kein Java benutzen muss.

da aber die bilder in der CSS datei als Background image für den < a > tag angeben werden, kann ich natürlich keine altatribute angeben

hier mal der link zur seite BeWiFO
und hier der link zur CSS datei: http://www.aightysix.de/test/shrd/navigation.css


zur erläuterung: die "grenze_1.jpg; grenze_2.jpg usw..." in der HTML datei sind nur die kleinen silbernern striche zwischen den Buttons.


Also meine Frage ist jetzt: wie kriege ich trotz alle dem AltATRIBUTE in die sache. denn wenn man die seite ohne grafiken anschaut sieht man keine LINKS mehr und die seite ist nicht mehr benutzbar.

ich hab auch schon überlegt die buttons BLANK zu machen und den LINK dann als text in der HTML auf den Button zu legen. aber das sieht leider blöd aus.

danke fürs durchlesen,
n3012

 

[koslowski]

Mahlzeit,

das was du brauchst heißt Image Replacement Technik.
Sehr gebräuchlich ist die Gilder/Levine Methode.
Dort wird der Linktext einfach nur von der HG-Grafik verdeckt

Dann kann man die Seite auch ohne Grafiken nutzen und vor allem die Sumabots können dann den Links noch folgen.

koslowski

 

[n3012]

huii dit ging ja schnell... danke erstmal.


versteh ich das jetzt richtig das ich den link text in ne span classe setze und in der CSS datei sage "overflow:hidden" ??

denn in der Levin methode seh ich garkeine besonderheit im CODE


Ps. bin auch nicht der erfahrenste Profi

 

[n3012]

neee, also hab jetzt mal nen bisschen rumprobiert... aber ich kriegs nicht hin. steh gerade vorm schwarzen loch. weil die beispiele dort für mich nicht verständlich sind... die benutzen da h1 und span classen aber ich weiss nicht wie ich die in mein dokument übertragen soll

 

[koslowski]

Mahlzeit,

also ich versuchs mal:

XHTML Code:

<ul id="navigation">
       <li id="navi01"><strong><span></span>Startseite</strong></li>
       <li id="navi02"><a href="inhaltsverzeichnis.htm"><span></span>Inhaltsverzeichnis</a></li>
    </ul>

Die CSS dazu:

*  {
    padding:0;
    margin:0;
}
li  {
    list-style-type:none;
}
#navigation li  {
    margin-top:0.5em;
}
#navi01,
#navi02   {
    position:relative;
    width:160px;
    height:28px;
}
#startseite #navi01 span  {
    position:absolute;
    width:100%;
    height:100%;
    background:url(startseite.jpg) no-repeat -160px 0;
}
#navi02 span  {
    position:absolute;
    width:100%;
    height:100%;
    background:url(inhaltsverzeichnis.jpg) no-repeat 0 0;
}

#navi02 a:hover span,
#navi02 a:focus span   {
     position:absolute;
    width:100%;
    height:100%;
    background:url(inhaltsverzeichnis.jpg) no-repeat -160px 0;
}
#navi02 a:active span  {
     position:absolute;
    width:100%;
    height:100%;
    background:url(inhaltsverzeichnis.jpg) no-repeat -320px 0;
}

Zu den Einzelheiten wobei ich von einer vertikalen Navigation ausgehe (horizontal ist es komplizierter!):

Im Beispielfall habe ich eine Grafik mit 480x28px Größe die von links nach rechts alle drei Zustände enthält (normal, hover, active).
Jeder Zustand hat also 160x28px Größe.

Die ul und die Listenpunkte bekommen alle eine id .

Ich denke Quelltext dürfte klar sein.

In der CSS notiere ich einen kleinen Prolog:

*  {
    padding:0;
    margin:0;
}
li  {
    list-style-type:none;
}

Alle Abstände auf null und Listenzeichen ausgeknipst.

#navigation li  {
    margin-top:8px;
}

Listenpunkte bekommen etwas Abstand zueinander (ist aber keine Vorschrift!)

#navi01,
#navi02   {
    position:relative;
    width:160px;
    height:28px;
}

Die Listenpunkte (li) bekommen über ihre ID alle position:relative und die Größe eines Zustandes. Position:relative ist deshalb notwendig damit sich das absolut pos. Element (span!) daran orientieren kann.
left:0; top:0; ist dabei die linke obere Ecke von dem entsprechenden relativ pos. Listenpunkt (li).

#startseite #navi01 span  {
    position:absolute;
    width:100%;
    height:100%;
    background:url(startseite.jpg) no-repeat -160px 0;
}
#navi02 span  {
    position:absolute;
    width:100%;
    height:100%;
    background:url(inhaltsverzeichnis.jpg) no-repeat 0 0;
}

#navi02 a:hover span,
#navi02 a:focus span   {
     position:absolute;
    width:100%;
    height:100%;
    background:url(inhaltsverzeichnis.jpg) no-repeat -160px 0;
}
#navi02 a:active span  {
     position:absolute;
    width:100%;
    height:100%;
    background:url(inhaltsverzeichnis.jpg) no-repeat -320px 0;
}

span bekommt nun pos.:absolute und 100% width und height
Über background-position wird dann der jeweilige Zustand ins "li-Fenster"
geschoben.

#startseite ist deshalb im letzten Codeblock aufgeführt weil es die aktuelle Seite ist und ich nicht will das dort der link auf sich selber zeigt.
Deshalb bekommt jede Seite bei mir eine id (<body id="startseite">)

Absolut pos. Elemente sind aus dem Fluß der Elemente und werden von den anderen Elementen ignoriert.
Nur deshalb kann ich die Grafik über den Text schieben

koslowski

 

[n3012]

das tut mir jetzt wirklich leid das du dir soviel arbeit gemacht hast... aber ich versteh nur bahnhof... meine navi ist ja horizental... haste ja bei den links gesehen denke ich...

 

[koslowski]

Hi,

das tut mir jetzt wirklich leid das du dir soviel arbeit gemacht hast... aber ich versteh nur bahnhof... meine navi ist ja horizental... haste ja bei den links gesehen denke ich...

kein Problem.
Ich hatte nur das Bild in deinem Posting gesehen und dachte deshalb das es eine vertikale Navi war.

Für horizontale Navis gibts hier
ein Tutorial, einfach weiter runterscrollen bis zu "Grafischen Menüs".

koslowski