JAVASCRIPT afficher une image

Jonathan - Dernière réponse le 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.

JAVASCRIPT afficher une image »

Suggestions

JAVASCRIPT afficher une image
Javascript : affichier une image suite à un » Forum
Agrandir une image au passage de la souris (Résolu) » Forum
[PHP | Javascript] upload image (Résolu) » Forum
Afficher une image avec JavaScript (Résolu) » Forum
Rollover multiple/afficher plusieurs images » Forum

Plus

Réponse

+10

maniT4c 44Messages postés 11 juin 2007Date d'inscription 23 avril 2012Dernière intervention 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";

Ajouter un commentaire - Site web

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

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.

Ajouter un commentaire

Réponse

vdumontier 500Messages postés 26 mai 2007Date d'inscription 20 septembre 2011Dernière intervention 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>

Ajouter un commentaire

Réponse

remy76 963Messages postés 11 janvier 2007Date d'inscription 19 février 2012Dernière intervention 12 juin 2007 à 08:00

Tu trouveras ton bonheur ici :

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

Ajouter un commentaire

Réponse

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.

Ajouter un commentaire

Réponse

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.

Ajouter un commentaire

Réponse

BL-image 1Messages postés 10 novembre 2011Date d'inscription 10 novembre 2011Dernière intervention 10 nov. 2011 à 17:43

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.

Ajouter un commentaire

Réponse

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

Ajouter un commentaire

Répondre au sujet

Posez votre question

Dossier à la une

Passage au tout numérique : quel coût pour les particuliers ?

Passage au tout numérique : quel coût pour les particuliers ?

Combien cela coûte-t-il au total ? Quelles aides apportent l'état et les acteurs du marché pour alléger cette charge non choisie ? Tous les détails sur Commentçamarche.net.

JAVASCRIPT afficher une image

JAVASCRIPT afficher une image »

Passage au tout numérique : quel coût pour les particuliers ?