[Javascript] Affichage image dans un div
afrodje
Messages postés
759
Date d'inscription
mardi 13 mars 2007
Statut
Membre
Dernière intervention
22 janvier 2014
-
17 sept. 2009 à 15:56
Michael_Ange Messages postés 223 Date d'inscription jeudi 27 novembre 2003 Statut Membre Dernière intervention 29 mai 2015 -
Michael_Ange Messages postés 223 Date d'inscription jeudi 27 novembre 2003 Statut Membre Dernière intervention 29 mai 2015 -
Bonjour,
Je voudrais pour pouvoir cliquer sur une image en miniature et qu'elle s'affiche dans un div en javascript.
Mais je ne trouve pas de script similaire.
Voici un exemple de ce que je veux, cliquer sur les images en miniature pour les faire défiler.
http://www.lafraise.com/Article/index/id/844
Merci.
Je voudrais pour pouvoir cliquer sur une image en miniature et qu'elle s'affiche dans un div en javascript.
Mais je ne trouve pas de script similaire.
Voici un exemple de ce que je veux, cliquer sur les images en miniature pour les faire défiler.
http://www.lafraise.com/Article/index/id/844
Merci.
A voir également:
- [Javascript] Affichage image dans un div
- Image iso - Guide
- Affichage double ecran - Guide
- Windows 11 affichage classique - Guide
- Reduire taille image - Guide
- Acronis true image - Télécharger - Sauvegarde
3 réponses
Michael_Ange
Messages postés
223
Date d'inscription
jeudi 27 novembre 2003
Statut
Membre
Dernière intervention
29 mai 2015
19
17 sept. 2009 à 17:22
17 sept. 2009 à 17:22
Salut à tous...
juste pour te donner une petite idée de la chose
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Titre de la page</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<!-- en-tete du document -->
</head>
<body>
<div>
<span id="principal">
<img src="images/dine.jpg" alt="dine" width="250" height="400"/>
<!-- remarque bien l'id qui a été donné au span, c'est grace à lui que tu pourra identifier la zone à modifier au click -->
</span>
<!-- toujours des href, encore des href -->
<a href="javascript:;" onclick="image('images/dine.jpg','dine');>
<img src="images/dine.jpg" alt="dine" width="60" height="90" />
</a>
<a href="javascript:;" onclick="image('images/dripi.jpg','dripri');">
<img src="images/dripi.jpg" alt="dripi" width="60" height="90" />
</a>
<a href="javascript:;" onclick="image('images/ines.jpg','ines');">
<img src="images/ines.jpg" alt="ines" width="60" height="90" />
</a>
</div>
</body>
<!-- la partie qui nous interresse -->
<script type="text/javascript">
function image(lien, titre)
{
var val = "<img src=" + lien + " alt=\"" + titre + "\" width=\"250\" height=\"400\"/>";
//je génère ma balise html à l'aide des paramètres qu'on lui aura passé
document.getElementById('principal').innerHTML = val;
//je modifie le contenu html de l'élement nommé "principal et je lui affecte le nouveau contenu que j'ai précédemment mis dans la variable val
}
</script>
</html>
Elle n'est pas belle la vie.....
juste pour te donner une petite idée de la chose
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Titre de la page</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<!-- en-tete du document -->
</head>
<body>
<div>
<span id="principal">
<img src="images/dine.jpg" alt="dine" width="250" height="400"/>
<!-- remarque bien l'id qui a été donné au span, c'est grace à lui que tu pourra identifier la zone à modifier au click -->
</span>
<!-- toujours des href, encore des href -->
<a href="javascript:;" onclick="image('images/dine.jpg','dine');>
<img src="images/dine.jpg" alt="dine" width="60" height="90" />
</a>
<a href="javascript:;" onclick="image('images/dripi.jpg','dripri');">
<img src="images/dripi.jpg" alt="dripi" width="60" height="90" />
</a>
<a href="javascript:;" onclick="image('images/ines.jpg','ines');">
<img src="images/ines.jpg" alt="ines" width="60" height="90" />
</a>
</div>
</body>
<!-- la partie qui nous interresse -->
<script type="text/javascript">
function image(lien, titre)
{
var val = "<img src=" + lien + " alt=\"" + titre + "\" width=\"250\" height=\"400\"/>";
//je génère ma balise html à l'aide des paramètres qu'on lui aura passé
document.getElementById('principal').innerHTML = val;
//je modifie le contenu html de l'élement nommé "principal et je lui affecte le nouveau contenu que j'ai précédemment mis dans la variable val
}
</script>
</html>
Elle n'est pas belle la vie.....
afrodje
Messages postés
759
Date d'inscription
mardi 13 mars 2007
Statut
Membre
Dernière intervention
22 janvier 2014
168
23 nov. 2009 à 16:35
23 nov. 2009 à 16:35
Désolé du retard mais le script marche correctement.
Merci à toi :)
Merci à toi :)
Michael_Ange
Messages postés
223
Date d'inscription
jeudi 27 novembre 2003
Statut
Membre
Dernière intervention
29 mai 2015
19
26 nov. 2009 à 17:03
26 nov. 2009 à 17:03
You're welcome....