Bonjour, je suis nouveau sur le forum. Je commence par une question à laquelle je n'ai pas trouvé de réponse :
Je créer actuellement un site commercial, pour ma famille.
J'ai un problème pour réaliser les bouton du menu du site.
Le principe est le suivant :
Les liens du menu sont précédés d'une image qui fait partie du lien.
Lorsque l'on passe la souris sur le lien, l'image est remplacée par une autre image.
J'ai trouvé une solution pour Firefox et les autres, mais pas pour IE 6/7 :
En javascript, j'ai entre les balises de mon site le code suivant :
Puis dans le menu j'ai ceci, pour chaque élément :
J'aimerais faire fonctionner ceci pour IE 6 et 7, en plus de Firefox... Une idée?
J'aurais préféré le faire en html+css, mais mon dernier essai c'est soldé par un affichage ignoble sur IE 7 :
J'avais fait ceci, sur les conseil de mon frère :
Dans la feuille css :
ça marchait sur firefox, mais sur IE, c'était ignoble. Le menu (vertical à l'origine) était sur deux colones, et me repoussait en bas ma div de contenu de page, les verres s'affichaient aléatoirement... Devant l'horreur, je suis repassé au code javascipt, qui n'affiche rien sous IE mais ne fait pas de décalages ignobles de ce genre.
Bref, si vous avez des idées, n'hésitez pas : je suis débutant.
PS : y a t'il moyen de simplifier la fonction javascript?
*edit : j'ai choisi un doctype xhtml strict...
Modifié par Arctinurus (02 Mar 2009 - 18:57)
Je créer actuellement un site commercial, pour ma famille.
J'ai un problème pour réaliser les bouton du menu du site.
Le principe est le suivant :
Les liens du menu sont précédés d'une image qui fait partie du lien.
Lorsque l'on passe la souris sur le lien, l'image est remplacée par une autre image.
J'ai trouvé une solution pour Firefox et les autres, mais pas pour IE 6/7 :
En javascript, j'ai entre les balises de mon site le code suivant :
<script type="text/javascript">
<!--
// PRELOADING IMAGES
if (document.images) {
img1_on =new Image(); img1_on.src ="./images/image2.png";
img1_off=new Image(); img1_off.src="./images/image1.png";
img2_on =new Image(); img2_on.src ="./images/image2.png";
img2_off=new Image(); img2_off.src="./images/image1.png";
[...] Jusqu'à img10, une pour chaque élément du menu, c'est pas propre comme code selon moi, mais je ne connais rien en javascript... [ohwell]
function movr(k) {
if (document.images)
eval('document.img'+k+'.src=img'+k+'_on.src');
}
function mout(k) {
if (document.images)
eval('document.img'+k+'.src=img'+k+'_off.src');
}
function handleOver() {
if (document.images)
document.imgName.src=img_on.src;
}
function handleOut() {
if (document.images)
document.imgName.src=img_off.src;
}
//-->
</script>
Puis dans le menu j'ai ceci, pour chaque élément :
<li><a href="page.html" onmouseover="javascript:movr(9);return true;" onmouseout="javascript:mout(9);return true;"><img id="img1" alt="description" src="./images/image1.png" />lien vers page.html</a></li>
J'aimerais faire fonctionner ceci pour IE 6 et 7, en plus de Firefox... Une idée?
J'aurais préféré le faire en html+css, mais mon dernier essai c'est soldé par un affichage ignoble sur IE 7 :
J'avais fait ceci, sur les conseil de mon frère :
Dans la feuille css :
.menu li
{
list-style-image: url=("../images/image1.png");
}
.menu li:hover
{
list-style-image: url=("../images/image2.png");
}
ça marchait sur firefox, mais sur IE, c'était ignoble. Le menu (vertical à l'origine) était sur deux colones, et me repoussait en bas ma div de contenu de page, les verres s'affichaient aléatoirement... Devant l'horreur, je suis repassé au code javascipt, qui n'affiche rien sous IE mais ne fait pas de décalages ignobles de ce genre.
Bref, si vous avez des idées, n'hésitez pas : je suis débutant.
PS : y a t'il moyen de simplifier la fonction javascript?
*edit : j'ai choisi un doctype xhtml strict...
Modifié par Arctinurus (02 Mar 2009 - 18:57)
Lien du menu normal...
Lien du menu survolé ou recevant le focus.