JAVASCRIPT afficher une image

Fermé

Javascript

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:

Javascript afficher une image au clic
Windows 11 clic droit afficher plus d'options par défaut - Guide
Image iso - Guide
Supprimez les composantes rouge et verte de cette image. quel mot apparaît ? - Forum Word
Telecharger javascript - Télécharger - Langages
Légender une image - Guide

8 réponses

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.

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

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 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.

Discussions similaires

agrandir une image en javascript

afficher une image avec javascript

Afficher une image avec JavaScript

Afficher une image en JavaScript

remplir un tableau d'image pour un jeu de memoire

[JAVASCRIPT] Redirection après x temps connu