Survol des images
gaya_102
-
zoby44 Messages postés 818 Date d'inscription Statut Membre Dernière intervention -
zoby44 Messages postés 818 Date d'inscription Statut Membre Dernière intervention -
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
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
A voir également:
- Survol des images
- Des images - Guide
- Extraire images pdf - Guide
- Images enregistrées - Forum Bureautique
- Superposer des images ✓ - Forum Graphisme
- Recherche images - Guide
7 réponses
<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.
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.
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é?
<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é?
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
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>
/**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>
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 ^^,
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 ^^,