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

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

**Bovino** · 20/06/2013, 20h57

Oui, c'est encore heureux que les méthodes spécifiques à IE fonctionnent avec IE !

**amelodydz** · 20/06/2013, 22h20

Envoyé par Bovino

Oui, c'est encore heureux que les méthodes spécifiques à IE fonctionnent avec IE !

y'a t'il une méthode général ou bien faut'il les tester tous

**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)

**laurentSc** · 21/06/2013, 11h19

Pour un débutant, je trouve ça honnête, sauf que ça ne correspond pas exactement à mon besoin (désolé ; je n'arrive pas à être clair) car la grosse image ne doit pas prendre la place de la petite ; il conviendrait de dissocier les 2 : la grosse doit apparaître dans une fenêtre popup, mais la petite appartient à la page html courante.
Et je viens de constater que je n'ai la croix rouge que avec IE mais pas par exemple avec FF (et comme j'ai d'autres pbs avec IE (par exemple les liens <a href="..."> ne marchent plus), ça ne vient pas du code, mais de mon PC).

Invité · 21/06/2013, 11h33

Bonjour Laurent, (ca faisait longtemps !)
pourquoi ne pas utiliser une lightbox existante ?
- lightbox2
- colorbox
- ... (il en existe à la pelle)

Ou la créer soi-même, mais sur de bonnes bases : Créez une fenêtre modale avec CSS et jQuery (lien déjà donné, mais très intéressant et formateur)

Il me semble que tu connais déjà un peu jQuery, non ?

**laurentSc** · 21/06/2013, 11h51

Oui, merci Jérôme ; en effet, je comptais étudier le lien Créez une fenêtre modale avec CSS et jQuery (Quand j'en aurai le temps, car je voudrais d'abord m'occuper d'autres choses, chronophages, mais faciles). Et JQuery, même si je suis loin d'être un expert, je connais effectivement un peu...

**Bovino** · 21/06/2013, 12h01

Mais Laurent, tu es Webmaster ou non ?
En plus, depuis le temps que tu fréquentes le forum...

Il serait largement temps que tu comprennes certains fondamentaux !

Un Webmaster ne travaille pas avec un EDI en mode WYSIWYG.
Un Webmaster doit connaitre parfaitement le HTML (et pas celui d'il y a 10 ans, celui d'aujourd'hui).
Un Webmaster doit connaitre parfaitement le CSS (même remarque que ci-dessus).
Un Webmaster doit connaitre parfaitement JavaScript (puis un framework, mais pas avant de connaitre réellement JavaScript).
Un Webmaster doit avoir dans sa trousse à outils des templates HTML / CSS.
Un Webmaster doit avoir dans sa trousse à outils les fonctionnalités de base de l'ergonomie moderne (infobulles, gallerie, validation de formulaires, j'en passe).

Alors si tu considères que certains points ci-dessus ne t'intéressent pas, franchement, change de métier !
Depuis le temps que tu arpentes le forum, tu n'as pas évolué d'un poil et tes questions sont toujours aussi basiques, ça devient lassant !

**SylvainPV** · 21/06/2013, 13h42

Ca doit aussi pouvoir se faire en CSS only, en utilisant quelquechose comme :

Code css :

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

1
2
3
4
5
6
7
8
 
div#miniature {
    background-image url('small.jpg');
}
 
div#miniature:hover {
    background-image url('big.jpg');
}

ou avec un before content si on veut un chargement de la grosse image à la demande. Je n'ai pas le temps de faire un exemple, mais si quelqu'un veut une piste sans Javascript j'irais dans ce sens là.

**laurentSc** · 21/06/2013, 14h31

Désolé de te lasser Bovino, mais j'aporte quand même une réponse :

Un Webmaster ne travaille pas avec un EDI en mode WYSIWYG

Même si je ne code pas avec ça, l'utilité que j'y trouve, c'est de pouvoir visualiser la page et de faire le lien avec le code correspondant.

La solution CSS only de SylvainPV pose un problème, celui que j'évoquais à 11h19...

Invité · 21/06/2013, 14h47

Laurent,
peux-tu préciser exactement ce que tu veux faire :
- ce script concerne UNE SEULE IMAGE, ou veux-tu l'utiliser sur PLUSIEURS ?
- la GRANDE image doit s'afficher dans un POPUP CENTRE sur l'écran, ou A COTE de la petite (du genre "infobulle")
- ...

Toutes ces précisions permettraient de te fournir une solution ADAPTEE à ton besoin spécifique.

Celà dit :

Envoyé par laurentSc

... en effet, je comptais étudier le lien Créez une fenêtre modale avec CSS et jQuery (Quand j'en aurai le temps, ...

Nous répondrons aussi quand nous aurons le temps...

**laurentSc** · 21/06/2013, 15h11

J'ai de la chance d'avoir un interlocuteur que je ne lasse pas ! (D'ailleurs, même si je ne peux pas consacrer 100% de mon temps au développement web, depuis que je m'y intéresse (soit quelques mois avant mon inscription à DVP), je pense quand même avoir fait quelques progrès...).

Bon :

ce script concerne UNE SEULE IMAGE, ou veux-tu l'utiliser sur PLUSIEURS ?

Une seule ;

la GRANDE image doit s'afficher dans un POPUP CENTRE sur l'écran, ou A COTE de la petite (du genre "infobulle")

Ca m'est égal, mais on a qu'à dire POPUP CENTRE sur l'écran.

**NoSmoking** · 21/06/2013, 23h26

Envoyé par laurentSc

Ca m'est égal, mais on a qu'à dire POPUP CENTRE sur l'écran.

on en revient donc au fait que nul besoin javascript, comme signalé ci avant

un petit exemple simple:

Code html :

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
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Easy :HOVER</title>
<style>
.image{
  position:relative;
}
.image img.big_img{
  display:none;
  position:absolute;
  top:0;
  margin-left:200px;
  border:1px solid #EEF;
  box-shadow: 0 2px 4px 2px #CCCCCC;
}
.small_img:hover ~ img.big_img{
  display:block;
}
</style>
</head>
<body>
<div class="image">
  <img class="small_img" src="http://club.developpez.com/webdesign/Rubriques/Web/CSS/mini_logo_faq_css.gif" alt="">
  <img class="big_img" src="http://club.developpez.com/webdesign/Rubriques/Web/logo_tous_les_cours_Web.gif" alt="">
</div>
</body>
</html>

on peut même empiler les :hover, un exemple sur ce post

Faire apparaître une image/popup

JavaScript

Discussions similaires

Partager

Partager