On MouseOver

par **bunk** » 31 mai 2006, 16:13

Bonjour,

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

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

par **Ryle** » 17 mai 2006, 12:54

(...) à 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

)

par **albat** » 17 mai 2006, 12:32

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

par **Photographiquement Vôtre** » 17 mai 2006, 12:26

Merci mais ne vous battez par quand même

par **Ryle** » 17 mai 2006, 12:09

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

par **albat** » 17 mai 2006, 12:01

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

par **albat** » 17 mai 2006, 12:00

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

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

par **Ryle** » 17 mai 2006, 11:59

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.

par **Tictac** » 17 mai 2006, 11:48

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

par **charabia** » 17 mai 2006, 11:44

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>

par **Photographiquement Vôtre** » 17 mai 2006, 11:41

Java script (voir mon code + haut)

par **charabia** » 17 mai 2006, 11:34

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 ?

par **Photographiquement Vôtre** » 17 mai 2006, 11:31

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

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

par **charabia** » 17 mai 2006, 11:14

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.

par **Photographiquement Vôtre** » 17 mai 2006, 10:40

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;

On MouseOver

Répondre

Étendre la vue Revue du sujet : On MouseOver

On MouseOver