High-Tech Santé Médecine Droit-Finances

Grippe A

Que dois-je faire ?

Rechercher : dans
Par :

JAVASCRIPT afficher une image

Dernière réponse le 27 aoû 2009 à 12:23:54 Jonathan, le 11 jun 2007 à 14:29:30 
 Signaler ce message aux modérateurs

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.

Configuration: Windows XP
Internet Explorer 7.0

Meilleures réponses pour « JAVASCRIPT afficher une image » dans :
PHP et JAVASCRIPT popup image Voir
Javascript - Afficher un message d'au-revoir aux visiteurs Voir Il est parfois très plaisant d'afficher un message en remerciant les visiteurs de votre site de leur passage. Cette astuce a pour but de vous montrer comment s'y prendre. 1.La fonction JavaScript 2.Appel du Script 1.La fonction...
Affichage image sur openoffice writer (Résolu) Voir
Javascript - Librairies d'effets pour vos images VoirAu gré de vos explorations du web, vous avez vu de superbes effets de présentation des images. Et ça vous plairaît bien de pouvoir proposer les mêmes à vos visiteurs. Voici quelques solutions en Javascript couplées à des CSS. Elles sont plus...
Afficher les images et les animations Flash dans le navigateur VoirQuand vous allez sur un site internet, vous n'avez plus d'images affichées ; elles sont remplacées par un petit rectangle avec un carré rouge ou un triangle bleu (par exemple). 1 - Vérifier d'abord les paramètres de votre navigateur : Pour...
Une popup d'information au survol sans Javascript ni CSS VoirParfois, il peut être utile d'afficher des informations supplémentaire au survol du curseur sur une zone de l'écran, par exemple "Cliquez pour agrandir" sur une image, un descriptif sur une abbréviation ou des détails sur un lien. On trouve...
Gestion des images en HTML VoirComment afficher des images sur une page web? Quelques images sur un site Web peuvent le rendre plus attractif et plus convivial, cependant il est important de ne pas sombrer dans l'excès car les images peuvent impliquer un temps de chargement...
Javascript - Introduction au langage Javascript VoirQu'est-ce que le Javascript? Le Javascript est un langage de script incorporé dans un document HTML. Historiquement il s'agit même du premier langage de script pour le Web. Ce langage est un langage de programmation qui permet d'apporter des...
Javascript - l'objet Array VoirLes particularités de l'objet Array L'objet Array est un objet du noyau Javascript permettant de créer et de manipuler des tableaux. Voici la syntaxe à utiliser pour créer une variable tableau : var x = new Array(element1[, element2, ...]); Si...
Posez votre question Répondre

1

remy76, le 12 jun 2007 à 08:00:42

Tu trouveras ton bonheur ici :

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

   
Répondre à remy76

2

maniT4c, le 12 jun 2007 à 08:20:49
  • +4

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

   
Répondre à maniT4c

4

Jonathan, le 12 jun 2007 à 16:42:43

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épondre à Jonathan

3

vdumontier, le 12 jun 2007 à 09:26:25
  • +1

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épondre à vdumontier

5

gawaljamal, le 3 déc 2008 à 19:38:26
  • +2

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épondre à gawaljamal

6

Khazad, le 24 jun 2009 à 16:27:37

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

   
Répondre à Khazad

7

 Noïra, le 27 aoû 2009 à 12:23:54

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épondre à Noïra
Posez votre question Répondre
Ils ont besoin de votre aide