Forum d'entraide PHPFrance

Bonjour,

Je n'arrive pas a trouver d'ou viens mon probleme car ca devrais fonctionner.

Je cherche a ce que l'image change lorsque je passe la souris dessus. Pour le moment j'ai mis une image "Bidon" pour l'exemple. Ce que j'aimerai obtenir c'est que lorsque je retire la souris de l'image, que ce soit la bonne qui s'affiche et la c'est toujours la même. J'ai mis l'erreur sur mon site pour que ce soit plus parlant. L'adresse : http://bull100.pagesperso-orange.fr/
Il suffit de survoler la ligne d'icones pour comprendre.

La partie du programme qui me pose probleme :

var leo=parseInt(param2);

var ii=1;
for (ii=1; ii<12; ii++) {

var ouvert="'img1','quoi-de-neuf/"+leo+"/fiche.jpg'"
var papa="quoi-de-neuf/22/iconcr.gif"
maman="quoi-de-neuf/"+leo+"/icon.jpg"
document.write('<A href="index.html?param1='+leo+'&param2='+param2+'" onmouseover="rollover_tjs('+ouvert+')" onmouseout="rollover_tjs('+fermer+')">');
document.write('<IMG src="quoi-de-neuf/'+leo+'/icon.jpg" onmouseover="this.src=papa" onmouseout="this.src=maman"></A>');
leo=leo+1
if (leo==nbfig+1) { leo=1 }
}

Le probleme se trouve sur la deuxième ligne "document.write"
J'espère trouver de l'aide car je me rend compte qu'a ce stade ca doit être un vrai casse tête.

Merci d'avance,
Patrice.

Bonjour,

J'ai isolé le problème pour que ce soit plus simple.
Les vignettes se replacent sans problème, mais le changement se fait uniquement sur le dernier "icone". Il prend en compte que ii=2 c'est à dire sa dernière valeur donnée. Que faudrait-il modifier pour que le changement se fasse sur le bon "icone", svp ?

Exemple : http://bull100.pagesperso-orange.fr/demo/ess.html

--------------------------------------------------------

<script>
function changeimage(im) {
pom="image"+ii;
document.getElementById(pom).src=im;
}

ico1="iconcr.gif";
ico2="icon.jpg";
ico3="icon2.jpg";

ii=1
document.write('<a href="javascript:;" onMouseOver="changeimage(ico1)" onMouseOut="changeimage(ico2)"><img id="image'+ii+'" name="image'+ii+'" src='+ico2+'></a>')

ii=2
document.write('<a href="javascript:;" onMouseOver="changeimage(ico1)" onMouseOut="changeimage(ico3)"><img id="image'+ii+'" name="image'+ii+'" src='+ico3+'></a>')

</script>

--------------------------------------------------------------------------------

Une fois résolu, je pourrais faire une boucle avec ii. (for ii=...)

Bonne journée,
Pat.

Salut,

Une solution possible :

<img class="image-hover" src="http://bull100.pagesperso-orange.fr/demo/icon.jpg" alt="projet 1" data-image-hover="http://bull100.pagesperso-orange.fr/demo/icon2.jpg">
<img class="image-hover" src="http://bull100.pagesperso-orange.fr/demo/icon.jpg" alt="projet 2" data-image-hover="http://bull100.pagesperso-orange.fr/demo/icon2.jpg">

<script>
var imagesHover = document.querySelectorAll('.image-hover');

for (var i = 0; i < imagesHover.length; i++) {
	imagesHover[i].addEventListener('mouseover', function() {
		this.setAttribute('data-default-src', this.src);
		this.src = this.getAttribute('data-image-hover');
	});
	
	imagesHover[i].addEventListener('mouseout', function() {
		this.src = this.getAttribute('data-default-src');
	});
}
</script>

Quelques explications :
- coté html, on déclare les images avec la classe image-hover et on défini l'image qui sera affichée au survol dans l'attribut data-image-hover
- coté js, on récupère toutes les images qui ont la classe image-hover et pour chacune d'elle on défini une fonction pour les événements mouseover et mouseout.
- lors du mouseover, on remplace l'attribut src par la valeur de l'attribut data-image-hover pour afficher l'image au survol. Au préalable on enregistre la valeur par défaut de l'attribut src pour pouvoir l'afficher lors du mouseout

Bonne journée,