Meny med bilder

Hur göra jag en bra meny med bilder som funkar bra även om besökaren inte se bilderna eller har en skärmläsare?

<u>
<li><a href="#" title="" class="meny 1"><span class="hide">Menyalternativ 1</span></a></li>
<li><a href="#" title="" class="meny 2"><span class="hide">Menyalternativ 2</span></a></li>
<li><a href="#" title="" meny="meny 3"><span class="hide">Menyalternativ 3</span></a></li>
<ul>

 
.hide {display:none;}
ul li .meny { storleken osv osv.}
ul li a:hover { background-position: 0 20px;}

.1 a {background: url(../img/1.gif) no-repeat;}
.2 a {background: url(../img/2.gif) no-repeat;}
.3 a {background: url(../img/3.gif) no-repeat;}

Varje menykategori har en egen bild, 1.gif osv. Den bilden har då både normal-läge och hover-läge i sig.

Så hade jag nog gjort idagsläget, tror jag, är trött och inte nogrann.

Ser bra ut...
Hade inte tänkt på att man kan göra sådär men det funkar.

Någon som har andra idér?

En blind sa till mig en gång: Stäng bildvisning och koppla bort css. Om då länkarna visas med något emellan varje länk så är det bra. Om de visas i en enda lång rad så gör inte screenreaders något uppehåll mellan länkarna och den blinde kan då ha svårt att veta vart den ene börjar och slutar. För den sakens skull är det då bra att göra menyn i någon lista typ ul-lista eller dt-lista sådansom okkido visade på. Bilderna ska ha alt-text och länkarna bör ha en title-text.
Sedan så ska det fungera fint för de som inte använder vanlig skärm.
En skippameny länk är en lättnad för dem så de slipper höra menyn varje gång de kommer in på en ny sida på siten.
Tror inte du behöver tänka på mer.

Använder du display:none kommer inte skärmläsare läsa texten alls.

Nej får inte till det heller även fast jag rättat lite fel i koden...

Och hur ser det ut nu då?

<ul class="nav">
 <li class="n1"><a href="#"><span></span>Meny 1</a></li>
 <li class="n2"><a href="#"><span></span>Meny 1</a></li>
 <li class="n3"><a href="#"><span></span>Meny 1</a></li>
</ul>

.nav a { display:block; position:relative; width:200px; height:50px; overflow:hidden; }
.nav span { position:absolute; width:100%; height:100%; }
.n1 span { background-image:url(1.png); }
.n2 span { background-image:url(2.png); }
.n3 span { background-image:url(3.png); }

Jag har inte testat detta så det kan hända att jag har missat nån detalj.

zcorpan skrev:

<ul class="nav">
 <li class="n1"><a href="#"><span></span>Meny 1</a></li>
 <li class="n2"><a href="#"><span></span>Meny 1</a></li>
 <li class="n3"><a href="#"><span></span>Meny 1</a></li>
</ul>

.nav a { display:block; position:relative; width:200px; height:50px; overflow:hidden; }
.nav span { position:absolute; width:100%; height:100%; }
.n1 span { background-image:url(1.png); }
.n2 span { background-image:url(2.png); }
.n3 span { background-image:url(3.png); }

Jag har inte testat detta så det kan hända att jag har missat nån detalj.

Det där funkar bra för mig, blir nog den lösningen jag kör med. Tackar

Det var ju riktigt jä-la smart! Funkar tip-top för mig med!

Men la till:

.nav { list-style-type: none; padding: 0; margin: 0; }

:)