JAVASCRIPT afficher une image

Javascript

Jonathan -
BL-image Messages postés 1 Date d'inscription Statut Membre Dernière intervention - 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.

Afficher la suite

A voir également:

Javascript afficher une image au clic
Windows 11 clic droit afficher plus d'options par défaut - Guide
Supprimez les composantes rouge et verte de cette image. quel mot apparaît ? - Forum Word
Image iso - Guide
Légender une image - Guide
Image de manchots sur une image de plage. - Forum Graphisme

8 réponses

Réponse 1 / 8

gawaljamal

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.

Réponse 2 / 8

maniT4c Messages postés 52 Date d'inscription Statut Membre Dernière intervention 23

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";

Jonathan

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

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 7 / 8

BL-image Messages postés 1 Date d'inscription Statut Membre Dernière intervention 1

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.

Discussions similaires

[JAVASCRIPT] Redirection après x temps connu

[Javascript] liste déroulante onChange

javascript et tableau html

[Javascript] Tables de Multiplication

l'activation de [javascript] et flash player

Insérer un compteur de visites

Votre réponse

Discussions similaires