Survol des images

Fermé
gaya_102 - 9 févr. 2009 à 11:57
zoby44 Messages postés 818 Date d'inscription vendredi 3 novembre 2006 Statut Membre Dernière intervention 7 avril 2010 - 9 févr. 2009 à 23:57
Bonjour,
onjour,
tout d'abord je vous donne le lien de mon site.
www.sandrineetgwen.fr

J'ai pour projet que sur chaques photos quand on clique dessus il y ai une fonction qui ouvre la photo plus grande dans une nouvelle fenêtre.
Je me lance dans le javascript. Donc en fait je vais créer une page .js pour mettre cette fonction. Cette page me servira plus tard pour aussi y mettre le script de mon menu (ca m'évitera de faire des modfis sur chaques pages). Du coup je ne sais pas trop par quoi commencer. Pouvez vous m'aider?

J'avais trouvé se code la mais je ne le comprend pas trop

<td><a href="#"
onMouseOver="JavaScript:document.UN_NOM_DE_TON_CHOIX.src='gwen_tutu.jpg'"
onMouseOut ="JavaScript:document.UN_NOM_DE_TON_CHOIX.src='gwen_tutu_petite.jpg'"><img src="image/gwen_tutu_petite.jpg" name="image/gwen_tutu_grande.jpg" width="240" height="157"></a></td>

JavaScript:document.UN_NOM_DE_TON_CHOIX.src='gwen_tutu.jpg je sais que je dois remplacer le un_nom_de_ton_choix. Mais par quoi?

Merci d'avance

7 réponses

Utilisateur anonyme
9 févr. 2009 à 13:30
http://www.sandrineetgwen.fr
0
Utilisateur anonyme
9 févr. 2009 à 13:32
besoin d'aide ?
0
mouf13 Messages postés 142 Date d'inscription mardi 20 juin 2006 Statut Membre Dernière intervention 22 février 2011 17
9 févr. 2009 à 13:32
<a href="#"
onMouseOver="JavaScript:document.UN_NOM_DE_TON_CHOIX.src='gwen_tutu.jpg'"
onMouseOut ="JavaScript:document.UN_NOM_DE_TON_CHOIX.src='gwen_tutu_petite.jpg'"><img src="image/gwen_tutu_petite.jpg" name="image/gwen_tutu_grande.jpg" width="240" height="157"></a></td>
-------------------------------------------------------------------------------------------------------------------------
onMouseOver="JavaScript:document.getElementById('img_1').src='image/gwen_tutu.jpg'"
onMouseOut ="JavaScript:document.document.getElementById('img_1').src='image/gwen_tutu_petite.jpg'"><img src="image/gwen_tutu_petite.jpg" id="img_1" name="img_1" width="240" height="157">

Si tu as qques notions de js, tu peux aussi te pencher sur ajax qui te permettrait de charger tes images a la volée.
0
J'en ai pas trop de notion de java script je debute.
<td><a href="#"
onMouseOver="JavaScript:document.UN_NOM_DE_TON_CHOIX.src='gwen_tutu.jpg'"
onMouseOut ="JavaScript:document.UN_NOM_DE_TON_CHOIX.src='gwen_tutu_petite.jpg'"><img src="image/gwen_tutu_petite.jpg" name="image/gwen_tutu_grande.jpg" width="240" height="157"></a></td>

UN_NOM_DE_TON_CHOIX.src j'ai vu que tu avais mis le nom de la photo. Pourquoi en fait? j'ai compris le sens de ce script mais je ne comprend pas pourquoi on a besoin d'un src. dois je créer quelque chose a coté?
0
Utilisateur anonyme
9 févr. 2009 à 14:02
Besoin d'aide ?
0
je veux bien mais personne ne veux répondre a ma question snif
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
Utilisateur anonyme
9 févr. 2009 à 17:01
t'es encore là ?
0
oui je suis encore la
0
Utilisateur anonyme
9 févr. 2009 à 21:46
Voici la solution (au survol de la souris sur l'image, une pop-pup s'ouvre contenant l'image agrandi):

/**Voici le code de la page solution.html (que tu peux copier-coller):***/

<html>
<head>
</head>
<body>




<img src='monImage.jpg' height='50px' border='0px' id='im' onMouseover='fun();'>



<script language='javascript'>


function fun()
{
fen=window.open("","","height=200px,width=400px");
fen.document.write("<html><head><title>Photo agrandi</title></head><body><img src='monImage.jpg' height='150px' width='250px' border='0px'></body></html>");
}


</script>

</body>
</html>
0
zoby44 Messages postés 818 Date d'inscription vendredi 3 novembre 2006 Statut Membre Dernière intervention 7 avril 2010 199
9 févr. 2009 à 23:57
Salut. A vrai dire, je trouve pas les popups super beau. Pour ton site, je pense qu'un système de lightbox serais mieux.
http://www.huddletogether.com/projects/lightbox/

Edit : je viens de voire que la V2 était pas la :https://lokeshdhakar.com/projects/lightbox2/
C'est la même chose, mais avec des petites animation en plus. Ca fait toujours son petit effet ^^,
0