Discussion :

[Whombat]

Bonjour,

J'ai l'impression que ce doit être bête comme chou mais je n'y arrive pas en PHP / CSS.

Je voudrais, sur une image réactive, faire apparaitre un DIV au survol (hover). Mais ça coince...

Quelqu'un pourrait me tuyauter ? A moins que ce soit impossible parce que j'en ai essayé des combinaisons...

Merci de votre aide.

Cordialement.

[supersnail]

Bonjour,
Passe plûtot par javascript...

Un exemple de code:
La partie javascript (à mettre entre balises <script> et </script>)

Code javascript :

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

1
2
3
4
5
6
7
8
9
 
function showDiv()
{
     document.getElementById("mondiv").style.visibility="visible";
}
function hideDiv()
{
     document.getElementById("mondiv").style.visibility="hidden";
}

et dans ta partie html,le code,où tu rajoute à la fin de ton area ce code (à l'intérieur du <area />)

Code :

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

1
2
 
onmouseover="showdiv()" onmouseout="hideDiv()"

[Whombat]

Tout d'abord, merci pour la réponse.

C'est vrai, je sais que ça peut donner un coup de main, mais j'ai du mal à utiliser javascript.

J'ai un bouquin, il va falloir que je le relise. Les "document.getElementById" je pige pas. Je suupose donc que mon image doit être déclarée avec un id ?

[supersnail]

arf j'ai oublié de le préciser..
c'est ton div qui doit avoir un id..
ton dive doit ressembler à ça:

Code html :

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

1
2
 
<div id="mondiv" style="visibility:hidden">blabla</div>

[Whombat]

J'avais pas capté...

En fait, ce n'est pas le hover de l'image qui fonctionne mais le div lui-même, à son survol...

Là, je n'avais pas pensé à ça. Ce qui revient à dire que le div doit être pile à la taille et à la position de l'image, ce qui revient à dire encore que l'image n'est pas dans la page (trop aléatoire en fonction de l'écran, etc...) mais elle-même sur un div..

Bon, je deviens intelligent : le div, je lui mets l'image en background et ça fait la rue Michel, non ?

[supersnail]

Euh.. j'ai du mal à suivre là..
Tu peux me montrer ce que tu as écrit?

[Whombat]

A dire vrai, il était faux aussi je l'ai effacé depuis ce matin...

Dans le CSS, je prévois tout ce qui est liens (visited, hover, etc...) et je veux qu'au survol de mon image lien (hover) une action se passe, en l'occurence faire apparaitre un div.

En passant par JS j'obtiens effectivement ce que je veux, ce qui n'était pas le cas jusqu'à présent. Un lien, dans mon esprit, c'est un lien, texte ou image. Alors je pensais pouvoir faire un hover sur l'image. Tout faux semble-t-il.

J'ai maintenant le soucis, mais je n'ai pas essayé encore, de la disposition des 2 (image et div).

Dans un carré de 64 cases (8 x 8), numérotées verticalement en chiffres et horizontalement en lettres, je voudrais qu'une image positionnée en 4B - 4E - 7E - 7B fasse apparaitre un div en 2D - 2F - 4F- 4D.

Je suppose que le code que tu m'as offert doit fonctionner. Il suffit de mettre le "onmouseover="showdiv()"" dans l'image et mettre un "id" dans le div.