Lien sur un rollover distant. Comment ?
iciyatou
-
Posotaz Messages postés 505 Statut Membre -
Posotaz Messages postés 505 Statut Membre -
Bonsoir,
Je viens d'installer un rollover en javascript sur l'accueil de mon site...
J'explique en image pour que tout le monde comprenne bien mon soucis...
[img]http://www.hebergement-iciyatou.net/upload/uploads/5de43e7cd8.jpg[/img]
L'image du haut (la plus grosse) change en fonction de la position de la souris... si cette dernière est présente sur l'une ou l'autre des miniatures... Le script fonctionne parfaitement, j'arrive à placer des liens sur les miniatures, mais pas sur la plus grosse des images.
Il faudrait que je puisse placer un lien sur la grosse image, mais que ce lien change en fonction de l'image qui se charge... Par exemple : Affichage de l'image 1 avec le lien 1, affichage de l'image 2 avec le lien 2...
Voici mon script :
Partie head :
[quote]<script language="javascript">
<!--
image1 = new Image;
image1.src = "actualites/img-forum.png";
image2 = new Image;
image2.src = "actualites/img-duel.png";
//-->
</script>/quote
Partie body :
[quote]<a href="http://ww11.forum.iciyatou.net/" target="_blank" onMouseOver="distance.src=image1.src"><img src="actualites/img-01.gif" border="0"></a>
<a href="duel.html" onMouseOver="distance.src=image2.src"> <img src="actualites/img-02.gif" border="0"></a>/quote
Auriez-vous une solution ?
Dans l'attente de vous lire, je vous souhaite une bonne soirée.
Laurent
Je viens d'installer un rollover en javascript sur l'accueil de mon site...
J'explique en image pour que tout le monde comprenne bien mon soucis...
[img]http://www.hebergement-iciyatou.net/upload/uploads/5de43e7cd8.jpg[/img]
L'image du haut (la plus grosse) change en fonction de la position de la souris... si cette dernière est présente sur l'une ou l'autre des miniatures... Le script fonctionne parfaitement, j'arrive à placer des liens sur les miniatures, mais pas sur la plus grosse des images.
Il faudrait que je puisse placer un lien sur la grosse image, mais que ce lien change en fonction de l'image qui se charge... Par exemple : Affichage de l'image 1 avec le lien 1, affichage de l'image 2 avec le lien 2...
Voici mon script :
Partie head :
[quote]<script language="javascript">
<!--
image1 = new Image;
image1.src = "actualites/img-forum.png";
image2 = new Image;
image2.src = "actualites/img-duel.png";
//-->
</script>/quote
Partie body :
[quote]<a href="http://ww11.forum.iciyatou.net/" target="_blank" onMouseOver="distance.src=image1.src"><img src="actualites/img-01.gif" border="0"></a>
<a href="duel.html" onMouseOver="distance.src=image2.src"> <img src="actualites/img-02.gif" border="0"></a>/quote
Auriez-vous une solution ?
Dans l'attente de vous lire, je vous souhaite une bonne soirée.
Laurent
A voir également:
- Lien sur un rollover distant. Comment ?
- Créer un lien pour partager des photos - Guide
- Lien url - Guide
- Verificateur de lien - Guide
- Lien copié - Forum Mobile
- Comment renommer un lien hypertexte - Forum Réseaux sociaux
2 réponses
Salut Laurent,
Je suppose que "distance" est l'ID de ta balise "img" représentant la grande image ? Dans ce cas tu as aussi englobé cette balise avec la balise de lien <a href=""> ... Et donc cette balise peut avoir un ID et donc tu peux remplacer la propriété "href" dynamiquement exactement comme tu le fais avec la propriété "src"... (étonnant que ça fonctionne d'ailleurs, teste bien avec FireFox parce que ce n'est pas la bonne méthode).
Dans ton onMouseOver tu peux exécuter plus d'une instruction si tu les sépares par un point virgule. Cependant, afin de t'éviter des histoires d'échappement de caractères je te conseille de procéder par l'appel d'une seule fonction qui va réaliser tes deux instructions à savoir :
1. La remplacement de l'image grande.
2. Le remplacement du lien pour cette image.
En gros ça donne ceci :
- "gdImage" est le nom que j'ai donné à la balise "a" qui contient ta balise "img" (ici j'ai juste mis du texte).
- La fonction changeLien2 va référencer cette balise et remplacer le lien après avoir changé l'image.
- Dans ton onMouseOver de la deuxième petite miniature j'ai fait appel à cette fonction.
- A toi de faire pareil pour la première miniature par une fonction "changeLien1" par exemple.
Bon courage !
Je suppose que "distance" est l'ID de ta balise "img" représentant la grande image ? Dans ce cas tu as aussi englobé cette balise avec la balise de lien <a href=""> ... Et donc cette balise peut avoir un ID et donc tu peux remplacer la propriété "href" dynamiquement exactement comme tu le fais avec la propriété "src"... (étonnant que ça fonctionne d'ailleurs, teste bien avec FireFox parce que ce n'est pas la bonne méthode).
Dans ton onMouseOver tu peux exécuter plus d'une instruction si tu les sépares par un point virgule. Cependant, afin de t'éviter des histoires d'échappement de caractères je te conseille de procéder par l'appel d'une seule fonction qui va réaliser tes deux instructions à savoir :
1. La remplacement de l'image grande.
2. Le remplacement du lien pour cette image.
En gros ça donne ceci :
function changeLien2() {
distance.src=image2.src; // Vérifie bien cette instruction avec d'autres navigateurs que IE
document.getElementById("gdImage").href = "http://siteimage2.com"; // Là je remplace le lien d la grande image.
}
//-->
</script>
<a id="gdImage" href="">lien vers la grande image</a> <!-- au début mon href est vide -->
<a href="http://ww11.forum.iciyatou.net/" target="_blank" ><img src="actualites/img-01.gif" border="0"></a>
<a href="duel.html" onMouseOver="changeLien2();"> <img src="actualites/img-02.gif" border="0"></a>
</body></html>
- "gdImage" est le nom que j'ai donné à la balise "a" qui contient ta balise "img" (ici j'ai juste mis du texte).
- La fonction changeLien2 va référencer cette balise et remplacer le lien après avoir changé l'image.
- Dans ton onMouseOver de la deuxième petite miniature j'ai fait appel à cette fonction.
- A toi de faire pareil pour la première miniature par une fonction "changeLien1" par exemple.
Bon courage !
Salut Laurent,
Oui l'astuce est de référencer tes balises uniquement par la méthode "document.getElementById" comme je l'ai fait pour la balise ayant pour identifiant "gdImage". Fais pareil pour "distance". C'est une méthode qui fonctionne sur tous les navigateurs contrairement à celle qui consiste à référencer la balise en indiquant uniquement son nom comme s'il s'agissait d'une variable JavaScript. Ce n'est pas grand chose à modifier.
Oui l'astuce est de référencer tes balises uniquement par la méthode "document.getElementById" comme je l'ai fait pour la balise ayant pour identifiant "gdImage". Fais pareil pour "distance". C'est une méthode qui fonctionne sur tous les navigateurs contrairement à celle qui consiste à référencer la balise en indiquant uniquement son nom comme s'il s'agissait d'une variable JavaScript. Ce n'est pas grand chose à modifier.
Merci beaucoup pour ton aide !! Tout fonctionne parfaitement sur IE, cependant, et comme tu m'avais prévenu... j'ai un soucis avec FireFox (les images ne changent plus au passage de la souris). Aurais-tu une solution pour résoudre ce problème ? Quitte à tout modifier le script ?
Merci d'avance :)