[Javascript] Affichage image dans un div
Fermé
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 - 26 nov. 2009 à 17:03
Michael_Ange Messages postés 223 Date d'inscription jeudi 27 novembre 2003 Statut Membre Dernière intervention 29 mai 2015 - 26 nov. 2009 à 17:03
A voir également:
- [Javascript] Affichage image dans un div
- Image iso - Guide
- Telecharger javascript - Télécharger - Langages
- Affichage double ecran - Guide
- Acronis true image - Télécharger - Sauvegarde
- Windows 11 affichage classique - Guide
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....