Forum d'entraide PHPFrance

Bonjour,

Je voudrai faire un changement de photo au survol d'une autre photo mais cela ne marche pas.

Pourriez vous m'indiquer la syntaxe correcte.

Merci d'avance

<a href=void() onMouseOver="document.images(0).src=/Photos/Index_01B.JPG"><img src="/Photos/Index_01.JPG" width="200" height="131" border="0" alt="Enter"></a>&nbsp;

As-tu pensé à faire une tite recherche sur

avec "rollover" en mot clé ? Tu n'auras que l'embarras du choix.

Tu peux le faire en javascript ou css.

C'est cela le problème, il y a trop de choses.

C'est pourquoi je viens sur ce forum qui est plus structuré.

Oui le net c'est grand lol et c'est bien mieux quand on a l'embarras du choix. C'est en jetant un oeil un peu partout qu'on peut voir toutes les solutions possibles. Il ne faut pas trop privilégier la facilité ou les réponses toutes faites

Déjà tu veux le faire en javascript ou en css ?

Java script (voir mon code + haut)

Je sais mais il était possible que tu ne saches pas qu'il était possible de le faire en CSS (conseillé). Mais bon lol

En javascript, avec le code que tu as fait tu n'as pas de onmouseout, donc ton image initial ne reviendra jamais à sa valeur par défaut.

Ce qu'il y a à faire :

Code : Tout sélectionner

<a href="void()" onmouseover="document.enter.src='image_on_ici.gif'" onmouseout="document.enter.src='image_off_ici.gif'"><img src="image_off_ici.gif" width="200" height="131" border="0" alt="Enter" name="enter"></a>

je n'ai pas essayé mais je verrais bien qqch dans le genre

Code : Tout sélectionner

<script type="text/javascript">
function changeImage(img)
          {
           document.getElementById("photoB").innerHTML = "<img src='"+img+"' border='0'/>"
          }
</script>

//pour le href =>

<a href="#" onMouseOver="javascript:changeImage(photoB1.jpg);" ><img src="photo1.jpg" border="0"/></a>

//tu donnes nomme le div dans lequel tu veux afficher la photo

<div id="photoB"></div>

Dis moi si ca fonctionne

Et pourquoi pas un truc tout simple :

Code : Tout sélectionner

<img src="monImage.jpg" onMouseOver="this.src='monAutreImage.jpg'" onMouseOut="this.src='monImage.jpg'">

Bon après, c'est sur qu'il vaut mieux passer par une fonction pour en gérer plusieurs, précharger les images pour qu'il y ait un minimum d'attente de chargement, etc.

Moi, j'essaierais un truc peut-être plus simple :

<img src="image1.jpg" onmouseover="src='image2.jpg';" onmouseout="src='image1.jpg';">

Zut ! Je me suis fait griller de quelques secondes !
Ryle, je te hais...

Mouah ah ah ah !!
tu n'es pas assez rapide petit scarab.. euh.. coccinelle

Merci mais ne vous battez par quand même

Ne t'inquiète pas : tout se règle à l'aube, sur le pré des messages privés...

(...) à l'aube (...)

naaan c'est bon, je me rend, j'abandonne, tu as gagné, je m'excuse humblement.. j'aurais pas du poster.. je ne pouvais pas savoir.. j'arrive tout juste de ma gascogne.. pis je me suis fait attaqué en venant à Meung.. enfin j'avais tort.. je vais d'ailleurs supprimer ce message

(non parce que je veux bien dueller à coup de php ou de javascript, même faire 3 duels à la suite, mais à l'aube ?!!! c'est humainement impossible

)

Bonjour,

je cherchau aussi à faire un système d'appercu avec un <div>, j'ai essayé avec ce code :

Code : Tout sélectionner

<?php

$var = "photos/";

$image1 = "IMG_0913.JPG";
$image2 = "Pavilion_ze2045ea.jpg";

?>

<html>
<head>
<title>Test pour appercu des photos</title>

<script type="text/javascript">
function changeImage(img)
          {
           document.getElementById("apercu").innerHTML = "<img src='<?php echo $var; ?>"+img+"' border='0'/>"
          }
</script> 

</head>

<body>

<div>

<a href="#" onMouseOver="javascript:changeImage(<?php echo $var . $image1; ?>);" >Image 1</a><br />
<a href="#" onMouseOver="javascript:changeImage(<?php echo $var . $image2; ?>);" >Image 2</a> 

<!-- <img src="" onmouseover="src='<?php echo //$var . $image1; ?>';" onmouseout="src='';"> !-->

</div>

<div id="apercu"></div>

</body>
</html>

les images ne sont pas chargées, les outils de firfox m'indique au passage de la souris sur un lien que l'image n'est pas defini ?

Auriez vous une idée ?
D'avance merci

Forum d'entraide PHPFrance

On MouseOver

On MouseOver