Ouvrir une div avec image au survol d'une autre div avec image

**fostraceur** · 28/01/2016, 23h16

Bonsoir tout le monde ,tout nouveau ici ,j'aimerais savoir comment pourrais je comme le titre l'indique ,ouvrir une div avec une image ,au survol d'une autre div avec image ,j'ai déjà essayer pendant une dizaine d'heure de trouver par mes propres moyen ,et puis même avec quelques post trouver par ci par la je ne trouve pas ce que je veux ,ou cela ne fonctionne pas ,j'ai essayer avec hover en css ,c'est trop chaotique ,l'image passe et s'en va ,le lien disparaît .

Enfin bref ,j'ai compris ,il faut du javascript et je vous demande un petit coup de main pour celui qui connaîtrais le code pour faire apparaître cet div au survol ,j'ai essayer avec onmouseover / onmouseout mais j'ai pas trouver la commande a rentrer dans le fichier javascript ,en tout cas celle que j'ai essayer ne fonctionne pas ,help plz !!! je vous met le code html en dessous :

Code html :

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

1
2
3
4
5
6
7
8
9
10
<div class="bouton1" >
<!-- au dessous le lien a survoler pour afficher l'autre image --> 
	<a class="survol" href="aero.html">
		<img src="../images/aerodrome.png" width="170" height="50" alt="" />
    </a>
    <!-- Et juste en dessous la div avec l'image a afficher au survol --> 
    	<div class="invisible">
        	<img src="../images/menuaero.png" width="600%" height="400%" alt=""/>
   	    </div>
</div>

Et j'avais essayer avec cet fonction javascript :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
function afficher_aero(id)
{
    if(document.getElementById(id).style.visibility=="hidden")
    {
        document.getElementById(id).style.visibility="visible";
    }
    else
    {
        document.getElementById(id).style.visibility="hidden";
    }
    return true;
}

Et le css ,je vous rassure j'ai fais mes test elle est bien placé et tout ,mais la fonction ne marche pas ,j'ai essayer avec display:block ou none ,ça ne marche pas :

Code css :

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

1
2
3
4
5
6
.invisible	{
    z-index:2;
    position:absolute;
    margin-top:-400px;
    visibility:hidden
}

Et donc bon au final je suis totalement bloqué ,donc limite tout ça c'est plutôt a refaire ^^' et je l'avou je suis pour l'instant loin d'être un pro ,mais justement je vous demande votre aide pour apprendre ,merci !

**Amnael** · 29/01/2016, 00h48

Salut,

le javascript utilise les identificateurs.

Peut être que l'on peut faire avec class mais j'ai pas d'infos là dessus.

Tu peux t'inspirer de cet exemple

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
<html>
	<head>
		<title>Cache</title>
		<link rel="stylesheet" type="text/css" href="./test.css">
		<script type="text/javascript">
			function reveal(){
				document.getElementById("section").style.display = "inline";
			}
		</script>
 
	<head>
	<body>
		<p onmouseover='reveal()'>Look</p>
		<div id='section'><p>Blabla cache</p>
		</div>
	</body>
</html>

A noter que par defaut, section est en display none. Après libre à toi de jouer avec les valeurs comme tu veux.

**fostraceur** · 29/01/2016, 14h13

Merci pour ta réponses ,j'ai réussi a installer le javascript en bidouillant un peu ce que tu m'as filé ,mais au final ,j'ai le même bug qu'avec les hover ,l'image déconne a mort ,je vous envoi le lien de la page : http://kevindellova.netne.net/pages/menu.html

C'est quand on passe sur aérodrome de montaudran ,une autre div avec image s'affiche au dessus ,l'emplacement on s'en fiche je réglerais ça plus tard ,mais pourquoi l'image ne reste pas alors que je n'ai pas retirer ma souris du logo ,et pourquoi tout simplement le logo disparaît alors que y a aucune raison ,bon j'avou cela ne fais que quelque mois que je m'y suis mis ,et y a des détails que je ne connais encore pas ,donc svp ,détaillez vos réponses pour m’apprendre les bonnes bases ,je ne demande qu'a apprendre ,et je compte un peu sur la bonne communauté des dev ^^

Bon le code dans le html :

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
 <!-- Dans le head -->
<script type="text/javascript">
			function reveal(){
				document.getElementById("invisible").style.display = "block";
			}
 
			function dereveal(){
				document.getElementById("invisible").style.display = "none";
			}			
		</script>
 
 <!-- Et un peu plus bas -->
 
<div class="bouton1" >
<!-- au dessous le lien a survoler pour afficher l'autre image --> 
	<a class="survol" href="aero.html">
		<img src="../images/aerodrome.png" width="170" height="50" alt="" onmouseover="reveal(invisible)" onmouseout="dereveal(invisible)"/>
 
 
    </a>
    <!-- Et juste en dessous la div avec l'image a afficher au survol --> 
    	<div class="invisible" id="invisible">
        	<img src="../images/menuaero.png" width="600%" height="400%" alt=""/>
   	    </div>
</div>

Et le css :

Code css :

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

1
2
3
4
5
6
7
8
9
10
11
12
.invisible {
    display: none;
    z-index: 2;
    position: absolute;
    margin-top: -400px;
}
.bouton1 {
    z-index: 3;
    position: absolute;
    top: 405px;
    left: 5%;
}

Et tiens je rajoute le résultat final qu'ont devrais voir ,cela a était fais avec adobe muse ,donc forcément c'est trop moche ,mais l'idée y est ,et quand je regarde le code qu'adobe muse a fais ,c'est un bordel sans nom ,mais j'aimerais reproduire cet effet ,donc j'implore votre aide ^^

http://www.laurianebellon.com/aero/menu.html

**Amnael** · 29/01/2016, 15h31

Je sais pas si ça vient de là, mais tu passes un paramètre à tes fonctions reveal et dereavel alors que tu les déclares sans aucun paramètre.

**fostraceur** · 29/01/2016, 15h48

Puis je avoir plus de détail s'il vous plait ,comment vous faire comprendre que je ne suis qu'un noob pour l'instant^^'

**Watilin** · 29/01/2016, 20h13

Le problème est dans le comportement de onmouseout qui n'est pas tout à fait ce qu'on croit. Cet évènement se déclenche au moment où le curseur quitte l'élément, de quelque manière que ce soit, ce qui inclut le cas où un autre élément s'intercale entre l'élément et le curseur. C'est ce qui se passe dans ton cas : la div #invisible s'intercale entre l'image et le curseur, ce qui déclenche un mouseout, ce qui entraîne la disparition de la div, ce qui déclenche un mouseover sur l'image, ce qui entraîne la réapparition de la div, et ainsi de suite. C'est pour ça que ça clignote.

Pour éviter ce problème, tu as plusieurs solutions comme souvent.
– Le plus simple est d'envisager de faire apparaître la div autre part pour qu'elle ne masque pas l'image survolée.
– Tu peux utiliser la propriété relatedTarget de l'objet event qui est disponible quand tu utilises un attribut d'évènement. Un exemple de code pour être plus clair :

Code html :

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

<img … onmouseout="unreveal(event)" />

Cette variable event est un peu spéciale quand on l'utilise à cet endroit, elle reçoit automatiquement pour valeur un objet qui contient des informations sur l'évènement qui a été déclenché. Tu dois l'utiliser dans ta fonction :

Code js :

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

1
2
3
4
function unreveal(event) {
  console.log(event.relatedTarget);
  // le reste viendra plus tard
}

En faisant ça, dans ta console (F12) tu verras que l'élément qui s'intercale est l'image contenue dans la div #invisible. Dans ta fonction, tu vas donc devoir tester si relatedTarget est cette image, et si c'est le cas, ne pas masquer la div. Je reformule : en fait on va masquer la div seulement si relatedTarget n'est pas cette image.
Pour faire ce test, il y a une méthode bien pratique : matches (qui signifie « correspond à »). On lui passe un sélecteur CSS.

Code js :

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

1
2
3
4
5
6
function unreveal(event) {
  console.log(event.relatedTarget);
  if (!event.relatedTarget.matches("#invisible img")) {
    document.getElementById("invisible").style.display = "none";
  }
}

Il reste un problème : il n'y a plus rien de prévu pour masquer la div. Il faut simplement que tu rajoutes un onmouseout directement dessus. Ça tu sais faire

**progdebutant** · 29/01/2016, 22h14

Tu peux aussi tester ça (j'ai pas testé mais ça me paraît logique) :

Dans le javascript :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
function affiche(id){
    if(document.getElementById(id){
       var lediv=document.getElementById("deuxieme");
       lediv.style.display="block";
   }
}
 
function cache(id){
    if(document.getElementById(id){
       var lediv=document.getElementById("deuxieme");
       lediv.style.display="none";
   }
}

Dans le HTML :

Code html :

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

1
2
3
<div id="premier" onmouseover="affiche("deuxieme");"> <!-- Affiche le second div -->
      <div id="deuxieme" onmouseout="cache("deuxieme");"></div> <!-- cache le  div -->
</div>

N'oublie pas de mettre le deuxieme div en caché dans le CSS (remplace aussi le point d'interrogation par les bonnes valeurs)

Code css :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
#premier{
position:relative;
display:none;
width:100%;
height:100%;
}
 
#deuxieme{
position:relative;
display:block;
width: ? ; 
height: ?;
}

Salut,

le javascript utilise les identificateurs.
Peut être que l'on peut faire avec class mais j'ai pas d'infos là dessus.

Oui c'est juste, on peut identifier par la classe mais là y a qu'un div alors on utilise l'id.

En gros le principe est simple :

- On a un deuxieme div contenu dans un premier div mais il est caché. (avec display:none dans le css)
- La souris passe sur le premier div et cela affiche le deuxieme div sur le premier. (avec onmouseover dans le premier div)
- Si la souris sort du deuxieme div cela le cache à nouveau et donc on revoit le premier div. (avec onmouseout dans le second div)

Je sais pas si c'est mon pc mais ton image met très longtemps à se charger, renseigne-toi sur le préchargement d'image, et utilise une image au format png et réduit sa taille en octets le plus possible, par exemple si t'as pas besoin d'un million de couleur c'est pas la peine, il faudra alors réduire les couleurs (logiciel de dessin).
Renseigne-toi comment alléger une image pour le web.

J'ai vérifié, ton image fait 3,8 Mo c'est trop lourd pour le web, faut la réduire à quelques centaines de kilo-octets au maximum.
En plus pour ce qu'il y a dessiné dessus y a pas besoin qu'elle fasse autant

**Watilin** · 30/01/2016, 11h45

Au fait j'avais oublié, y'a aussi une solution en pur CSS :

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
30
31
32
33
34
<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="utf-8" />
  <title>Affichage au survol en pur CSS</title>
  <style>
  
  #invisible {
    display: none;
    background: #FC9;
    width: 400px;
    height: 300px;
  }
 
  #survol {
    position: absolute;
    outline: dashed thin gray;
  }
 
  #survol:hover #invisible {
    display: block;
  }
 
  </style>
</head>
<body>
 
<div id="survol">
  <p>Survolez-moi</p>
  <div id="invisible"></div>
</div>
 
</body>
</html>

**progdebutant** · 30/01/2016, 23h50

Bien vu, le code que j'ai proposé peut aussi s'obtenir en CSS donc c'est encore mieux

+1

**fostraceur** · 31/01/2016, 16h40

Merci ,vous m'avez fais comprendre quelque petits trucs ,j'essayerais vos codes un peu plus tard si j'en ai besoin ,mais en fait j'ai essayer avec d'autres solution JQUERY ,peut être que je me suis pris la tête mais le résultat final me plait ,je vous envoi ça pour les curieux :

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
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
<script src="jquery-1.12.0.min.js"></script>
<script>
  $(function() {
    $('#bouton1').hover(function() {
			      $('#bouton1').show('slow');
				  $('#invisible2').fadeOut('slow');
				  $('#invisible3').fadeOut('slow');
				  $('#invisible4').fadeOut('slow');
				  $('#invisible5').fadeOut('slow');
				  $('#invisible').fadeIn('slow');
  } );
    });
</script>
<script>
  $(function() {
    $('#bouton2').hover(function() {
			      $('#bouton2').show('slow');
				  $('#invisible').fadeOut('slow');
				  $('#invisible3').fadeOut('slow');
				  $('#invisible4').fadeOut('slow');
				  $('#invisible5').fadeOut('slow');
				   $('#invisible2').fadeIn('slow');
 
 
  } );
    });
</script>
<script>
  $(function() {
    $('#bouton3').hover(function() {
			      $('#bouton3').show('slow');
				  $('#invisible').fadeOut('slow');
				  $('#invisible2').fadeOut('slow');
				  $('#invisible4').fadeOut('slow');
				  $('#invisible5').fadeOut('slow');
				   $('#invisible3').fadeIn('slow');  
  } );
    });
</script>
<script>
  $(function() {
    $('#bouton4').hover(function() {
			      $('#bouton4').show('slow');
				  $('#invisible').fadeOut('slow');
				  $('#invisible2').fadeOut('slow');
				  $('#invisible3').fadeOut('slow');
				  $('#invisible5').fadeOut('slow');
				   $('#invisible4').fadeIn('slow');
  } );
    });
</script>
<script>
  $(function() {
    $('#bouton5').hover(function() {
			      $('#bouton5').show('slow');
				  $('#invisible').fadeOut('slow');
				  $('#invisible2').fadeOut('slow');
				  $('#invisible3').fadeOut('slow');
				  $('#invisible4').fadeOut('slow');
				   $('#invisible5').fadeIn('slow'); 
  } );
    });
</script>

Et le html :

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
<div class="bouton1" id="bouton1" ><a class="survol" href="aero.html"><img src="../images/aerodrome.png" width="170" height="50" alt=""/></a></div>
 
<div class="invisible" id="invisible"  style="margin-top:-975px;height:970px"><img src="../images/menuaero.png" width="100%" height="100%" alt=""/></div>
 
<div class="bouton2" id="bouton2"><a href="his.html"><img src="../images/u699.png" width="170" height="70" alt=""/></a></div>
 
<div class="invisible2" id="invisible2"  style="margin-top:-975px;height:970px"><img src="../images/menu_survol_bureau-u710-fr_2x.png" width="100%" height="100%" alt=""/></div>
 
<div class="bouton3" id="bouton3"><a href="hangar.html"><img src="../images/u744.png" width="170" height="70" alt=""/></a></div>
 
<div class="invisible3" id="invisible3"  style="margin-top:-975px;height:970px"><img src="../images/menu_survol_hangars_2x.png" width="100%" height="100%" alt=""/></div>
 
<div class="bouton4" id="bouton4"><a href="vol.html"><img src="../images/u745.png" width="170" height="70" alt=""/></a></div>
 
<div class="invisible4" id="invisible4"  style="margin-top:-975px;height:970px"><img src="../images/menu_survol_avion_2x.png" width="100%" height="100%" alt=""/></div>
 
<div class="bouton5" id="bouton5"><a href="bar.html"><img src="../images/u697.png" width="170" height="70" alt=""/></a></div>
 
<div class="invisible5" id="invisible5"  style="margin-top:-975px;height:970px"><img src="../images/menu_survol_bar_2x.png" width="100%" height="100%" alt=""/></div>

Et pour les images ,je suis complètement d'accord avec toi ,mais moi je ne fais que coder ,et la "cliente" veut que ses images restent a une qualité max de chez max ,je lui en ai parler ,mais c'est pas a moi de choisir ^^ mais aussi l'hebergeur sur lequel j'ai mis le site en attendant est gratuit et vraiment pas très puissant ça y joue peut être !

En tout les cas ,merci a tous ,et au plaisir de vous redemandez conseil ^^

**progdebutant** · 31/01/2016, 16h57

Salut ^^

Ta copine veut de la qualité, mais il n'en faut pas un max de chez max juste pour afficher un dessin crayonné, ni même pour une photo classique, d'ailleurs ton hébergeur t'en fera la remarque lui-même dés que tu auras un peu plus d'utilisateurs qui chargeront tes images.
Moi perso, si je vois qu'une image met longtemps à s'afficher sur un site je quitte le site de suite, j'ai pas de temps à perdre avec des sites mal fait.
Et tu trouveras certainement beaucoup d'utilisateurs dans mon genre, donc il te faut veiller à la lourdeur de ton site, surtout dans un hébergement mutualisé où là ton site va gêner les autres locataires du serveur.

.

**Watilin** · 31/01/2016, 19h52

Si tu as Photoshop, cherche le menu « enregistrer pour le Web », il te propose différents formats et te permet de comparer le rendu avec l'image originale (et il te donne aussi une estimation du temps de chargement avec une connexion type). Et je suis presque sûr que The Gimp propose une fonction similaire. Quand tu as de grands aplats de couleurs, les formats à palette comme PNG ou GIF font des merveilles. Personnellement je te recommande le PNG 8 bits avec 256 couleurs, tu seras impressionné par la légèreté du fichier !

Au fait :

Code :

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

$('#invisible2, #invisible3, #invisible4, #invisible5').fadeOut('slow');

**progdebutant** · 31/01/2016, 21h06

Idem, bien vu Watilin

+1

Ouvrir une div avec image au survol d'une autre div avec image

JavaScript

Discussions similaires

Partager

Partager