Forum d'entraide PHPFrance

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.

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

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;">

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 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

Code : Tout sélectionner

javascript:fonction_swap();

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

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 :

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;">

// 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

Forum d'entraide PHPFrance

Changer lien href d'une image onmouseover

Changer lien href d'une image onmouseover