Bonjour, mes connaissances en javascript sont tres limitees mais il me semble que c'est la solution de choix pour regler le probleme suivant:
J'ai une liste de liens textuels qui onmouseover affichent chacun une image differente au meme emplacement. Jusque la pas de probleme c'est de l'image swap traditionnel.
Il n'y a pas de image restore onmouseout pour que l'utilisateur puisse deplacer son curseur vers l'image affichee et cliquer dessus.
Mon probleme est que je souhaiterais qu'a chaque image corresponde un lien different. Le principe me semble simple, faire passer une variable qui contient le lien souhaite en meme temps que l'image a afficher, mais je ne sais comment coder ca en js.
Votre aide serait tres appreciee.
la communauté d'entraide francophone dédiée au PHP
Changer lien href d'une image onmouseover
Eléphant du PHP |
140 Messages
C'est assez simple en utilisant le DOM de ton document.
cd http://www.w3.org/TR/DOM-Level-2-HTML/
Regarde par exemple ce qui a ete dit ici
http://www.phpfrance.com/forums/voir_sujet-19304.php
cd http://www.w3.org/TR/DOM-Level-2-HTML/
Regarde par exemple ce qui a ete dit ici
http://www.phpfrance.com/forums/voir_sujet-19304.php
Ca me semble bien plus simple sans utiliser le dom et en mettant à jour une variable globale au passage de la souris sur le lien. Il suffit ensuite de l'utiliser lorsque l'on clique sur l'image :
Code : Tout sélectionner
<script> var url = "page1.html"; // la premiere par défaut </script>
<a ... onMouseOver="javascript:fonction_swap(); url='page1.html';">
<a ... onMouseOver="javascript:fonction_swap(); url='page2.html';">
...
<img src="..." onClick="document.location=url;">
Invité
Invité n'ayant pas de compte PHPfrance
Ca va toute de suite mieux lorsque l'on maitrise le langage.
Merci pour votre reponse rapide, je teste ca et poste le lien vers l'implementation de la solution au cas ou ca servirait a qq d'autre.
Mille merci
Merci pour votre reponse rapide, je teste ca et poste le lien vers l'implementation de la solution au cas ou ca servirait a qq d'autre.
Mille merci
Invité
Invité n'ayant pas de compte PHPfrance
Merci encore pour cette explication et ce bout de code. J'avoue ne pas le comprendre completement.
Je l'ai legerement modifie et cree un petite page qui fonctionne
Le href autour de l'image permet d'obtenir le changement du curseur qui indique a l'utilisateur que l'image est un lien
http://budohead.com/clients/seassal/test_js.htm
Comme tu vois j'ai supprime ce bout de code
J'avoue ne pas comprendre sa fonction mais mes premieres tentatives avec ne fonctionnaient pas.
Le code tel quel est il correct? Ou bien me manque-t-il qq chose?
Merci encore pour le coup de main
Je l'ai legerement modifie et cree un petite page qui fonctionne
Le href autour de l'image permet d'obtenir le changement du curseur qui indique a l'utilisateur que l'image est un lien
http://budohead.com/clients/seassal/test_js.htm
Comme tu vois j'ai supprime ce bout de code
Code : Tout sélectionner
javascript:fonction_swap();Le code tel quel est il correct? Ou bien me manque-t-il qq chose?
Merci encore pour le coup de main
Le "fonction_swap()" symbolisait la fonction de remplacement de l'image du premier post.. ne sachant pas comment elle s'appelle je l'avais nommé ainsi pour s'y retrouver. C'est donc à remplacer par ta fonction pour également changer l'image lorsque l'on passe sur le lien 
Pour mettre le curseur en forme de main, je pense qu'il vaut mieux utiliser un peu de css que de rajouter un lien autour de l'image, mais ça peut se faire également
Voici un script plus complet :
// Sur les liens :
- onMouseOver : Lorsque la souris passe sur l'élément
- "javascript:" : ce qui suit sont des instructions javascript
- url='page1.html' : on défini "page1.html" dans la variable url
- document.getElementById('monImage') : l'objet dont l'identifiant est "monImage"
- document.getElementById('monImage').src : l'attribut src de l'objet
- document.getElementById('monImage').src='image1.gif' : on modifie l'attribut pour qu'il affiche l'image 'image1.gif' à la place de l'image actuelle
// Sur l'image
- id="monImage" : identifiant unique permettant de retrouver l'élément
- src="image1.gif" : l'image à afficher par défaut à l'ouverture
- onClick : lorsque l'on clique sur l'image
- document.location=url : redirige vers l'url contenue dans la variable "url"
- style="cursor:hand;" : précise que lorsque la souris passe sur cet élément, le curseur devient une main
Voili voilo... en espérant que ceci soit plus clair
Pour mettre le curseur en forme de main, je pense qu'il vaut mieux utiliser un peu de css que de rajouter un lien autour de l'image, mais ça peut se faire également
Voici un script plus complet :
Code : Tout sélectionner
<script>
// on déclare une variable "url" dans laquelle on va stocker l'url associée au lien
var url = "page1.html"; // la premiere url est utilisée par défaut
</script>
<a ... onMouseOver="javascript:url='page1.html'; document.getElementById('monImage').src='image1.gif'">
<a ... onMouseOver="javascript:url='page2.html'; document.getElementById('monImage').src='image2.jpg'">
...
<img id="monImage" src="image1.gif" onClick="document.location=url;" style="cursor:hand;">- onMouseOver : Lorsque la souris passe sur l'élément
- "javascript:" : ce qui suit sont des instructions javascript
- url='page1.html' : on défini "page1.html" dans la variable url
- document.getElementById('monImage') : l'objet dont l'identifiant est "monImage"
- document.getElementById('monImage').src : l'attribut src de l'objet
- document.getElementById('monImage').src='image1.gif' : on modifie l'attribut pour qu'il affiche l'image 'image1.gif' à la place de l'image actuelle
// Sur l'image
- id="monImage" : identifiant unique permettant de retrouver l'élément
- src="image1.gif" : l'image à afficher par défaut à l'ouverture
- onClick : lorsque l'on clique sur l'image
- document.location=url : redirige vers l'url contenue dans la variable "url"
- style="cursor:hand;" : précise que lorsque la souris passe sur cet élément, le curseur devient une main
Voili voilo... en espérant que ceci soit plus clair