IE6 Navigation plane

Question

J'utilise le code suivant pour une navigation non-JS:

<ol id="navigation"> 
    <li id="home"><a href="#"><img src="./images/nav/home-hover.png" alt="Home" /></li> 
    ... 
</ol> 

Et le CSS:

#navigation a { 
    display: block; 
    height: 25px; 
} 

#navigation a img { 
    display: none; 
} 

#navigation a:hover img { 
    display: block; 
} 

#home a { 
    background: url('./images/nav/home-normal.png') no-repeat; 
    width: 100px; 
} 

Mon problème est qu'ils ne changeront pas les images sur le vol stationnaire dans IE6. J'utilise le :hover sur une ancre alors cela devrait être bien et j'utilise display plutôt que visibility qui est une autre chose qui ne fonctionne pas dans IE6. Je voudrais vraiment ne pas avoir à ajouter une charge de javascript pour le remplacement/préchargement d'image (l'incorporation de quelque chose comme jQuery n'est pas une option) - quelqu'un peut-il m'aider ici?

Merci,

Answer 1

IE ne pas repeindre points d'ancrage à moins que toute règle sur <a> elle-même change. Ajouter quelque chose pour a:hover, .: par exemple

#navigation a:hover {border:0} /* no-op */ 

BTW: malheureusement, les lecteurs d'écran populaires ne lisent pas les choses avec display:none, de sorte que votre menu finit par être inaccessible.

Je suggère d'avoir <img> visible par défaut, et de le cacher en survol.

Answer 2

Vous pouvez également utiliser l'arrière-plan sur l'étiquette d'ancrage pour être votre porte-image.

HTML:

<ol> 
<li><a href="#"></a></li> 
</ol> 

CSS:

li a{ 
background:url("link.jpg"); 
display:block; 
width:100px; 
height:50px; 
} 

li a:hover{ 
background:url("link2.jpg"); 
} 

Answer 3

Je suis d'accord avec ce que jason dit ici, mais si vous voulez que les deux images pour être mises en cache avant que l'utilisateur passe sur les liens alors pourquoi l'utilisation deux images?

je suis venu avec une petite idée tout à l'heure que j'aime utiliser, ce qui est d'avoir les deux états de vol stationnaire & normal du bouton comme la même image, l'état normal du bouton en haut et en l'état de vol stationnaire de le bouton en dessous, cela signifie que les deux états du bouton sont mis en cache tout de suite, comme c'est la même image! Et vous n'avez pas des charges d'images différentes pour les différents états de vos boutons remplissant votre dossier d'images, juste une image qui se rapporte à chaque état de ce lien.

Ensuite, vous pouvez vous débarrasser de vous tag img et son style (display: none etc)

et ont les liens styling comme ceci:

#home a {  
    background: url('./images/nav/home-normal.png') no-repeat left top;  
    width: 100px; 
} 
#home a:hover {  
    background-position:left bottom; 
} 

que vous aurez à mettre une hauteur sur le lien ainsi, de sorte qu'il ne montre aucune partie de l'autre état du lien, a un sens? Vous coupez efficacement l'image de fond en deux avec les styles de dimension des éléments.

pas javascript nécessaire & et changement d'état est instantanée que l'image est déjà chargée :)

espérons que cette aide!