JAVASCRIPT afficher une image [Fermé]

Question

JAVASCRIPT afficher une image [Fermé]

Signaler

Jonathan - 11 juin 2007 à 14:29
BL-image

Messages postés: 1
Date d'inscription: jeudi 10 novembre 2011
Statut: Membre
Dernière intervention: 10 novembre 2011

- 10 nov. 2011 à 17:43

tout d'abord Bonjour!
mon problème est le suivant:
au sein d'une page html, j'ai affiché des images en miniatures. Ainsi, je souhaiterai lors d'un onClick sur l'une de ces photos, qu'elle apparaisse sur l'autre moitié de la page html, tout cela sans frame set, ou pop up.. mais seulement par exemple en allouant à une partie de la page un cadre avec un nom donné, qui afficherait une image A, lorsqu'on clique sur l'image en miniature A.

Merci d'avance pour votre réponse.

A voir également:

Afficher une image en javascript
Afficher image javascript - Meilleures réponses
Javascript afficher image - Meilleures réponses
Afficher une image en JavaScript ✓ - Forum - Javascript
Afficher une image avec JavaScript ✓ - Forum - Javascript
JAVASCRIPT afficher une image - Forum - Javascript
Afficher une image avec javascript - Forum - Javascript
Javascript afficher une image au clic - Forum - Javascript

8 réponses

Réponse 2 / 8

maniT4c

Messages postés: 52
Date d'inscription: lundi 11 juin 2007
Statut: Membre
Dernière intervention: 5 février 2016

23
12 juin 2007 à 08:20

Il ne veut pas utiliser de cadre donc je ne pense pas que le lien soit pertinent :)
Voici une méthode pour faire ce que tu veux faire.
Il faut que ta page contienne toutes tes images (les miniatures et les grandes images) mais les grandes images doivent être invisible. Il faut ensuite que chacune de tes miniatures lance une fonction lorsdqu'on clic dessus. Cette fonction aura pour effet dans un premier temps de rendre toutes les grandes images invisibles puis de n'afficher que la grande image voulu.

JE n'ai pas tester le code suivant mais c'est ce que je ferait je pense:

Voici la parti html:

<img src="miniature1.jpg" alt="" onclick="affichImage('grandeImage1')" />
<img src="miniature2.jpg" alt="" onclick="affichImage('grandeImage2')" />

<div id="conteneurImg">
<img src="grande_image1.jpg" alt="" id="grandeImage1" style="display:none;" />
<img src="grande_image1.jpg" alt="" id="grandeImage2" style="display:none;" />
</div>

et la fonction javascript a mettre dans le head:

function affichImage(idImage) {
conteneur=document.getElementById('conteneurImg');
myArray= conteneur.getElementsBytagName('img');
for (i=0;i<myArray.length;i++) {
    myArray[i].style.display="none";
}
document.getElementById(idImage).style.display="block";

Signaler

Jonathan
12 juin 2007 à 16:42

en somme, c'est l'idée dont je me faisais d'un script en java voulant faire ce que je veux. Toute fois, j'ai tenté de mettre ce code, mais il me déclare que " myArray= conteneur.getElementsBytagName is not a function"
Je n'comprends pas.
Merci beaucoup en tout cas pour votre patience, et surtout votre aide..

Réponse 3 / 8

Utilisateur anonyme
12 juin 2007 à 09:26

c'est aussi faisable en php

avec pour exemple :

http://vdumontier.free.fr/projet-multi/galerie.php

en gros tes miniature tu en fais des liens avec une variable differente dans l'url -> photo=1 ou photo=2 etc.

du coter php

du récupere comme cela


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
	<link rel="stylesheet" type="text/css" href="style.css"/>
	<title>aide-ccm</title>
	<script type="text/javascript">
	
	</script>
</head>
<body style="background-color:#2b2b2b;font-family:comic sans ms;font-size:9pt;" >

<?php

//tu fabrique l'adresse de l'image voulu en fonction de ton parametre
	if (!isset($_GET['photo']))
		$adressphoto = "fille-penseG.gif";
	else{
		if ($_GET['photo'] == 1 )
			$adressphoto = "fille-penseG.gif";
		else if($_GET['photo'] == 2 )
			$adressphoto = "fill-yeuxG.gif";
		else if($_GET['photo'] == 3 )
			$adressphoto = "a2006G.gif";
		else if($_GET['photo'] == 4 )
			$adressphoto = "enfantG.gif";
		else if($_GET['photo'] == 5 )
			$adressphoto = "toppiG.gif";
	}	

?>

<div class="principal">
	<img src="img/galerie/fond.gif"style="" />	

	<div style="position:absolute;top:60px;left:405px;border: 2px solid #1B96B3;width:338px;height:185px;" ></div>
	<div style="position:absolute;top:155px;left:360px;border: 2px solid #1B96B3;width:273px;height:217px;" ></div>
<?php
	
        //ici tu apel ton image
	echo"<img src='img/galerie/".$adressphoto."'style='position:absolute;top:70px;left:165px;'/>";
?>
	<a href='galerie.php?photo=2' alt='rater'><img src="img/galerie/fill-yeuxP.gif"style="position:absolute;top:46px;left:665px;" /></a>
	<a href='galerie.php?photo=3' alt='rater'><img src="img/galerie/a2006P.gif"style="position:absolute;top:170px;left:665px;" /></a>
	<a href='galerie.php?photo=4' alt='rater'><img src="img/galerie/enfantP.gif"style="position:absolute;top:298px;left:665px;" /></a>
	<a href='galerie.php?photo=5' alt='rater'><img src="img/galerie/toppi.gif"style="position:absolute;top:424px;left:665px;" /></a>
	<div style="position:absolute;top:-7px;left:44px;border: 2px solid #1B96B3;width:400px;height:350px;" ></div>	
	<div style="position:absolute;top:390px;left:155px;border: 2px solid #1B96B3;width:471px;height:121px;" ></div>
	
	<a href='galerie.php' class='galerie'>Galerie</a>
	<a href='index.php' class='retour'>Retour</a>
	

	
</div>

</body>
</html>

Réponse 4 / 8

remy76

Messages postés: 900
Date d'inscription: jeudi 11 janvier 2007
Statut: Membre
Dernière intervention: 5 janvier 2013

185
12 juin 2007 à 08:00

Tu trouveras ton bonheur ici :

https://htmlhelp.com/fr/faq/html/frames.html

Réponse 5 / 8

Noïra
27 août 2009 à 12:23

Bonjour,

Pour afficher une Image la méthode maniT4c fonctionne très bien, mais savez-vous comment faire pour l'appliquer à une vidéo ? La fonction display n'a pas l'air d'être prise en compte. SVP aidez-moi ça fait plusieurs jours que je bloque sur ça.

Réponse 6 / 8

Asgive
16 août 2010 à 14:28

Je sais que j'arrive un peu tard. Mais j'ai réutiliser ce script et j'ai un problème. La première image disparait quand je clique sur la deuxième ou la troisième. Mais les autres restent toujours affichée une fois que j'ai cliqué dessus.

Réponse 7 / 8

BL-image

Messages postés: 1
Date d'inscription: jeudi 10 novembre 2011
Statut: Membre
Dernière intervention: 10 novembre 2011

1
Modifié par BL-image le 10/11/2011 à 17:44

La méthode de manit4c ne fonctionne pas chez moi avec google chrome?

<img src="img/cv01p.jpg" alt="cv" onclick="affichImage('img/cv01.jpg')" />
<img src="img/cv01p.jpg" alt="cv" onclick="affichImage('img/cv01.jpg')" />

<div id="conteneurimg">
<img src="img/cv01.jpg" alt="cv" id="grandeImage1" style="display:none;" />
<img src="img/cv01.jpg" alt="cv" id="grandeImage2" style="display:none;" />
</div>

<head>
function affichImage(idImage) {
conteneur=document.getElementById('conteneurimg');
myArray= conteneur.getElementsByTagName('img');
for (i=0;i<myArray.length;i++) {
myArray[i].style.display="none";
}
document.getElementById(idImage).style.display="block";}
</head>

Merci d'avance pour votre aide.

Réponse 8 / 8

Khazad
24 juin 2009 à 16:27

On ne pourrait pas utiliser l'attribut onClick sur la miniature en appliquant une fonction qui aurait pour effet de changer la source de la grande image ?

Pour changer la source on pourrait faire un document.grande_image.src

Posez votre question

en somme, c'est l'idée dont je me faisais d'un script en java voulant faire ce que je veux. Toute fois, j'ai tenté de mettre ce code, mais il me déclare que " myArray= conteneur.getElementsBytagName is not a function"
Je n'comprends pas.
Merci beaucoup en tout cas pour votre patience, et surtout votre aide..

gawaljamal · Accepted Answer · 2008-12-03T19:38:26+0100

Réponse 1 / 8

gawaljamal
3 déc. 2008 à 19:38

le script de maniT4c fonctionne très bien si on corrige la petite erreur d'orthographe dans le javascript:
"getElementByTagName" avec un "T" majuscule à Tag. Et une "}" à la fin de la fonction.

JAVASCRIPT afficher une image [Fermé]

8 réponses

Votre réponse

Newsletter