Faire apparaître une image/popup

**laurentSc** · 20/06/2013, 01h09

Bonsoir,

en fait ce que je souhaite, c'est quand l'utilisateur survole une petite image, une grande apparaît et s'il s'éloigne, elle disparaît : mon problème, c'est que la grande image n'apparaît pas : juste un cadre avec une croix rouge. Voici mon code :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
<head>...
<script type="text/javascript" src="popup.js"></script>
...
<.head>
...
<a href="#" onmouseover="showFirstPopup()"  onmouseout="hidePopup()"><img src="affiche_reduite.jpg" width="400"   /></a>

et popup.js :

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
function showFirstPopup() {   
    // Test pour vérifier que le navigateur connaît les objets Popup   
    if(!window.createPopup) {   
       alert("Votre navigateur ne connaît pas les objets Popup...");   
       return false;   
    }   
 
    // Création du popup   
    var oPopup   = window.createPopup();   
    var oPopBody = oPopup.document.body;   
 
    // Mise en forme   
    oPopBody.style.backgroundColor = "#9FC1FF";   
    oPopBody.style.border          = "solid darkblue 1px";   
    oPopBody.style.margin          = "0px";   
    oPopBody.style.color           = "white";   
    oPopBody.style.fontSize        = "12px";   
    oPopBody.style.textAlign       = "center";   
    oPopBody.innerHTML             = "<img src=\"affiche.jpg\" width=\"500\"/>";   
 
    // Affichage du popup   
     var e = event.srcElement;   
    var x = event.offsetX-e.offsetLeft-500; //-500   
    var y = event.offsetY-e.offsetTop-1000;   
    oPopup.show(x, y, 500, 700, e); 
 
}  
 
function hidePopup() {   
   if(!oPopup) return false;   
   oPopup.hide();   
 }

et affiche.jpg et affiche_reduite.jpg sont bien présentes sur le FTP...

**Bovino** · 20/06/2013, 09h00

Oh non...

Il existe des milliers d'exemples pour faire ça, mais toi, tu choisis la plus crade et la moins compatible...
Je te conseille de changer le début de ton code

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
if(!window.createPopup) {   
    alert("Votre navigateur est trop moderne pour apprécier mon code...");   
    return false;   
}

Sinon

la grande image n'apparaît pas : juste un cadre avec une croix rouge

Et tu n'es pas encore capable de savoir que c'est le symptôme d'une image non trouvée...

affiche.jpg et affiche_reduite.jpg sont bien présentes sur le FTP

D'accord, mais où au juste ???

**laurentSc** · 20/06/2013, 14h22

Et tu n'es pas encore capable de savoir que c'est le symptôme d'une image non trouvée...

Si, je ne l'ai pas écrit, mais c'était implicite.

D'accord, mais où au juste ???

Tout est dans le même répertoire (le html, le js et les images)

Il existe des milliers d'exemples pour faire ça, mais toi, tu choisis la plus crade et la moins compatible...

Est-ce que ça vaut le coup que je passe du temps à chercher à comprendre http://sohtanaka.developpez.com/tuto...css-et-jquery/ ?

**amelodydz** · 20/06/2013, 16h12

voila ma proposition (ma première dans ce forum) :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
 
<script>
	function showFirstPopup() {
		document.img1.src = "affiche.jpg";
		document.img1.width="1000";
	}  
 
	function hidePopup() {   
		document.img1.src = "affiche_reduite.jpg";
		document.img1.width="400";
	}
</script>
 
<a href="#" onmouseover="showFirstPopup()"  onmouseout="hidePopup()">
	<img name="img1" src="affiche_reduite.jpg" width="400"/>
</a>

donnez moi votre avis svp

**laurentSc** · 20/06/2013, 17h21

Mon avis, c'est d'abord de dire merci de m'avoir apporté une réponse, sauf que cela ne me convient pas entièrement : en effet lors du survol, la grosse image ne doit pas apparaître en lieu et place de la petite, mais dans une autre fenêtre (qui vient se superposer à la principale, comme un popup). J'ai essayé de modifier ton script pour obtenir ce résultat, mais je n'y suis pas arrivé...

**amelodydz** · 21/06/2013, 04h51

Envoyé par laurentSc

Mon avis, c'est d'abord de dire merci de m'avoir apporté une réponse, sauf que cela ne me convient pas entièrement : en effet lors du survol, la grosse image ne doit pas apparaître en lieu et place de la petite, mais dans une autre fenêtre (qui vient se superposer à la principale, comme un popup). J'ai essayé de modifier ton script pour obtenir ce résultat, mais je n'y suis pas arrivé...

s'il vous voulez juste une deuxième image ( sans l’accompagner avec un texte) voila une autre proposition

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<script>
	function showFirstPopup() {
		document.img1.style.display 	= "block";
		document.img1.style.position 	= "absolute";
		document.img1.style.left 		= document.img2.style.left;
		document.img1.style.top 		= document.img2.style.top;
		document.img1.style.width 		= "500px";
		document.img1.style.border 		= "solid darkblue 1px";
		document.img1.margin			= "5px";
		//document.img1.margin			= "0px";
		document.img1.src				= "affiche.jpg";
	}  
	function hidePopup() {   
		document.img1.src			= "";
		document.img1.style.width	= "0";
		document.img1.style.margin	= "0";
		document.img1.style.border	= "0";
	}
</script>
 
<div href="#" onmouseover="showFirstPopup()"  onmouseout="hidePopup()">
	<img name="img2" src="affiche_reduite.jpg" width="400" style="position:absolute; left:50px; top:100px"/>
	<img name="img1">
</div>

et si vous avez besoin d'un texte après l'image voila une proposition mais un peut bizard comme affichage :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
<script>
	function showFirstPopup() {
		document.img1.style.display 		= "block";
		document.img1.style.position 		= "absolute";
		document.img1.style.left 			= document.img2.style.left;
		document.img1.style.top 			= document.img2.style.top;
		document.img1.style.width 			= "500px";
		document.img1.style.border 			= "solid darkblue 1px";
		document.img1.style.margin			= "0px";
		document.img1.src					= "affiche.jpg";
 
		var foo = document.getElementById('message');
		var defaultText 		= 'Your message here';
		// ou bien :
		//var defaultText 		= '<?php echo $message = 'Your message here' ?>';
		foo.value 				= defaultText;
		foo.style.display 		= "block";
		foo.style.position 		= "absolute";
		foo.style.color 		= "red";
		foo.style.background	= "blue";
		foo.style.textAlign		= "center";
		foo.style.width			= document.img1.style.width;
		foo.style.border		= document.img1.style.border;
		foo.style.left 			= document.img1.style.left;
		foo.style.top 			= document.img1.height;
		foo.style.margin		= document.img1.style.margin;
		foo.style.visibility	= "visible";
	}  
	function hidePopup() {   
		document.img1.src = "";
		document.img1.style.width = "0";
		document.img1.style.margin          = "0";
		document.img1.style.border 			= "0";
		var foo = document.getElementById('message');
		foo.style.visibility	= "hidden";
	}
 
</script>
 
<div href="#" onmouseover="showFirstPopup()"  onmouseout="hidePopup(); ">
	<img name="img2" src="affiche_reduite.jpg" width="400" style="position:absolute; left:0; top:0;"/>
	<img name="img1">
	<textarea 	id="message" wrap="virtual" style="visibility:hidden" ></textarea> 
</div>

je suit débutant en Javascript, alors svp corriger moi si je me trompe ou s'il y'a une meilleur méthode, (je suit la pour apprendre)

**Bovino** · 20/06/2013, 17h27

Envoyé par laurentSc

Est-ce que ça vaut le coup que je passe du temps à chercher à comprendre http://sohtanaka.developpez.com/tuto...css-et-jquery/ ?

Celui-là ou un autre mais oui, il serait grand temps que tu t'intéresses à ce genre de choses...

**NoSmoking** · 20/06/2013, 19h18

Bonjour,

Envoyé par laurentSc

Tout est dans le même répertoire (le html, le js et les images)

à vérifier le problème de casse !

Nota: pour faire une apparition/disparition au survol le CSS est suffisant

**amelodydz** · 20/06/2013, 20h53

j'ai tester ton programme avec interner explorer et il marche sans problème mais l'image ne disparaît pas avant un Click autre-part

Faire apparaître une image/popup

JavaScript

Vue hybride

Discussions similaires

Partager

Partager