[Javascript] Affichage image dans un div
afrodje
Messages postés
759
Date d'inscription
Statut
Membre
Dernière intervention
-
Michael_Ange Messages postés 223 Date d'inscription Statut Membre Dernière intervention -
Michael_Ange Messages postés 223 Date d'inscription Statut Membre Dernière intervention -
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
- Acronis true image - Télécharger - Sauvegarde
- Reduire taille image - Guide
3 réponses
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.....
