Afichage d'une img au survol d'un lien(profil Résolu

Question

S'il vous plaît 
Je voudrais savoir comment faire pour afficher une image lorsqu'on survole un lien ,tous comme notre image dans le profil de CCM.

Merci d'avance.

Configuration: Windows 7 / Firefox 3.6.3

a70m · Answer

Salut, 

C'est du JavaScript. 

Il y a une manière simple, mais un peu à l'arrache qui consiste à mettre l'attribut onClick dans le lien ou l'image. 
Ou alors le faire avec un script en JavaScript, c'est le cas de CCM.

Cordialement

sena-kaitani · Answer

ce n'est pas du javascript dans le profil de CCM !

a70m · Answer

:0 c'est quoi alors ?

sena-kaitani · Answer

a si, j'ai parler trop vite, il n'y aurai pas un moyen en html et css ?

a70m · Answer

Bah il faut que tu utilises les attributs OnMouseOver et OnMouseOut qui sont en JavaScript mais à mettre dans ta balise image.

OpenSourceWay · Answer

Le plus facile est avec du javascript,

Tu à un super script ici : http://flowplayer.org/tools/demos/tooltip/any-html.html

Dit ce que tu en pense.

Si tu veut que du HTML CSS, voici un exemple que j'ai modifié à l'arrache mais que tu peut améliorer.
HTML :

<html xmlns="http://www.w3.org/1999/xhtml"><head>  

<meta content="text/html; charset=iso-8859-1" http-equiv="Content-Type">  
<link type="text/css" rel="stylesheet" href="css.css">  
<title>Afficher une image au survol</title>  
</head><body>  
<div style="margin-left: 150px;" id="menu">  
<ul class="niveau1">  

<li class="sousmenu"><p>Pseudo</p>  
<ul class="niveau2">  

<li><img src="http://www.grafikart.fr/img/boite-videos.png" alt=""></li>  
</ul>  
</li>  

</ul>  
</div>  

</body></html>

CSS :

div#menu li.sousmenu {  
background-color:orange;  
}  
div#menu ul li {  
list-style:none outside none;  
position:relative;  
}  
div#menu ul ul {  
display:none;  
left:100px;  
position:absolute;  
top:-1px;  
}  
div#menu li a {  
border-left:8px solid #BBBBBB;  
display:block;  
padding:4px 0 4px 8px;  
text-decoration:none;  
width:84px;  
}  
div#menu ul.niveau1 li.sousmenu:hover ul.niveau2, div#menu ul.niveau2 li.sousmenu:hover {  
display:block;  
background-color:red;  
}

A+

OpenSourceWay

sena-kaitani · Answer

ouai, le HTML et bien, c'est sympa, j'essayerai de approfondir plus tard car j'ai beaucoup de chose a faire, je te tien au courant.
Merci;)

Rodolphe_ · Answer

elles sont un peu barbares vos solutions. tout simplement:

#image { display: none; } #lien:hover > #image { display:block; position:absolute;}

sena-kaitani · Answer

je vous tien au courant, merci de vos réponse.

sena-kaitani · Answer

Exactement ca que je voulais x) 
Merci!!

petite questions: 
1-  A quoi sert le ">" ??
2-Que signifie display ?

Merci ^^

Rodolphe_ · Answer

display pour affichage en anglais
https://www.zonecss.fr/proprietes-css/display-css.html

> est un selecteur de classe
E > F désigne les éléments F qui ont un élément parent E
E + F désigne les éléments F  qui précèdent directement un élément E

http://www.yoyodesign.org/doc/w3c/css2/selector.html

sena-kaitani · Answer

claire&net ^^

Merci 
rodolphe.

Afichage d'une img au survol d'un lien(profil

12 réponses

Discussions similaires

Newsletters