18073 sujets

Questions générales et questions de débutants

[resolu]Pb affichage iexplorer balise a:hover

Bonjour à tous,

Voila je réalise le site web de notre association et je connais des difficultées concernant notre bon vieux naviguateur IE.
En effet, j'ai vu que dans les tutoriaux qu'il etait possible d'obtenir des rollover dans un menu non par la fonction a:hover(mal interprétée par IE) mais par une fonction Javascript : onmouseover.
Mon soucis est que j'ai repris les tuto et que l'interpretation de onmouseover n'est pas pris en compte mais les balises <a></a>.
Que dois je faire, j'ai trouver des réponses concernant des Hack pour IE mais je ne sais comment m'en servir.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<title>Menu astrolibre</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<script type="text/javascript">
<!--
window.onload=montre;
function montre(id) {
var d = document.getElementById(id);
	for (var i = 1; i<=10; i++) {
		if (document.getElementById('smenu'+i)) {document.getElementById('smenu'+i).style.display='none';}
	}
if (d) {d.style.display='block';}
}
//-->
</script>


<style type="text/css">
<!-- 
/* CSS issu des tutoriels  www.alsacreations.com/articles  */
body {
margin: 0;
padding: 0;
background: white;
font: 80% verdana, arial, sans-serif;
}
h7 {
display:block;
float:left;
width:267px;
height:60px;
background-image:url(images/index_03.png);
border: 0 none;
}
h7 a {
display:block;
float:left;
width:267px;
height:60px;
background-image:url(images/index_03.png);
border: 0 none;
}
h7 a:hover {
display:block;
float:left;
width:267px;
height:60px;
background-image:url(images/index_03.png);
}

h1 a {
display:block;
float:left;
width:137px;
height:60px;
background-image:url(images/menu_index_04.png);
border: 0 none;
}
h1 a:hover {
display:block;
float:left;
width:137px;
height:60px;
background-image:url(images/menu_index_hover_04.png);
}
h2 a {
display:block;
float:left;
width:135px;
height:60px;
background-image:url(images/menu_index_05.png);
border: 0 none;
}
h2 a:hover {
display:block;
float:left;
width:135px;
height:60px;
background-image:url(images/menu_index_hover_05.png);
}
h3 a {
display:block;
float:left;
width:88px;
height:60px;
background-image:url(images/menu_index_06.png);
border: 0 none;
}
h3 a:hover {
display:block;
float:left;
width:88px;
height:60px;
background-image:url(images/menu_index_hover_06.png);
}
h4 a {
display:block;
float:left;
width:118px;
height:60px;
background-image:url(images/menu_index_07.png);
border: 0 none;
}
h4 a:hover {
display:block;
float:left;
width:118px;
height:60px;
background-image:url(images/menu_index_hover_07.png);
}
h5 a {
display:block;
float:left;
width:97px;
height:60px;
background-image:url(images/menu_index_08.png);
border: 0 none;
}
h5 a:hover {
display:block;
float:left;
width:97px;
height:60px;
background-image:url(images/menu_index_hover_08.png);
}
h6 a {
display:block;
float:left;
width:138px;
height:60px;
background-image:url(images/menu_index_09.png);
border: 0 none;
}
h6 a:hover {
display:block;
float:left;
width:138px;
height:60px;
background-image:url(images/menu_index_hover_09.png);
}
-->
</style>
</head>

<body>
 	<h7 onmouseover="javascript:montre();"><a href="" title="Retour à l'accueil"></a></h7>
	<h1 onmouseover="javascript:montre();"><a href="" title="Retour à l'accueil"></a></h1>
	<h2 onmouseover="javascript:montre();"><a href="" title="Retour à l'accueil"></a></h2>
	<h3 onmouseover="javascript:montre();"><a href="" title="Retour à l'accueil"></a></h3>
	<h4 onmouseover="javascript:montre();"><a href="" title="Retour à l'accueil"></a></h4>
	<h5 onmouseover="javascript:montre();"><a href="" title="Retour à l'accueil"></a></h5>
	<h6 onmouseover="javascript:montre();"><a href="" title="Retour à l'accueil"></a></h6>

</body>
</html>


Merci et à bientot.
Astrolibre, la tête dans les etoiles
Modifié par lezard numerique (25 Jul 2005 - 21:39)
I.E interprète très bien a:hover en revanche il supporte pas encore cette peudo-classe pour les autres balises comme li - ce qui eviterait le recours à javascript pour les menus.
Maintenant je vois pas pourquoi tu pars pas de la liste stylée par Raphael ou lieu de nous mettre des <hn> dans ton menu.
Merci pour vos reponses, je n'avais pas vraiment bien lu en effet qu'il n'est pas possible d y ajouter ces codes.........
Concernant IE cela fonctionne mais je ne sais pas si vous avez remarqué mais il a bien du mal a effectué les rollover et surtout il reste bloqué sur les image du menu visité précedemment.
Bref ceci n'est pas bien grave car nous bossons d'en une dynamique de libre echange, Firefox va s'imposer, mon code est "presque bon......", je vais en effet resimplifié la chose en enlevant hn er recréer ma feuille de style.
A bientot peut etre et bon week à tout le monde.
Merci

Lezard numerique
Modifié par lezard numerique (16 Jul 2005 - 19:32)
Salut, moi dans ton code ce qui me choque c'est le h6 et le h7...

Je croyer qu'il n'y en avait que jusqu'a h5 !

Et pourquoi utiliser des balises titre pour un menu ? :s

Bref, si tu as resolu ton probleme, met Smiley resolu dans le titre.
Et si tu trouve que les roll hover de IE sont lent, ca me fait la meme chose chez moi lol.
Salut,
En effet je crois que le soucis vient de la lenteur des rollover IE, j'ai modifié le menu et j'ai mis des balises "div", je ne savais pas non plus que l'on pouvait mettre pas plus de 5.
Mon Pb est dons résolu mais il va falloir que je revois comment marche c'est foutu h:n et autres balises.
A plus
Les titres de niveau vont de <h1> à <h6> (inclus)

Ils doivent s'enchainer sans "saut", c'est à dire que s'il y a un <h3>, il doit forcément y avoir avant au moins un <h2> et un <h1>

Si ton problème est résolu, merci de l'indiquer comme tel comme demandé sans les règles.
http://forum.alsacreations.com/faq/#item22
Modifié par Olivier (25 Jul 2005 - 00:43)
J arrive pas a mettre resolu et j ai suivi ce que l'on me dis je ne vois pas ou je peux modifier le titre de mon message merci de m'aider car je risque de m'en prendre plein la tete........

A plus et merci de votre aide
lezard numerique, c'est le premier post de ton sujet qu'il faut éditer, pour ajouter le [ resolu ] dans le titre du sujet Smiley cligne

<edit>Fait. Smiley cligne </>
Modifié par Laurent Denis (25 Jul 2005 - 21:39)
Sujet clos
Aller à