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

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

JavaScript

Vue hybride

Discussions similaires

Partager

Partager