Image apparait au survol d'un lien
Résolu
pandageek
Messages postés
359
Date d'inscription
Statut
Membre
Dernière intervention
-
@lobotomix:~# rm -rf *\ Messages postés 1392 Date d'inscription Statut Membre Dernière intervention -
@lobotomix:~# rm -rf *\ Messages postés 1392 Date d'inscription Statut Membre Dernière intervention -
Bonjour,
j'aimerai que, quand je passe sur le lien, l'image apparaisse, or ici, elle n'apparaît pas.
mon code fonctionne si je met :
mais j'aimerai que l'image apparaisse uniquement si le lien est survolé
ne peut on faire apparaître une images qu'en survolant un parent?
merci de votre aide.
<style type="text/css">
#cadre
{
height: 194px;
width : 259px;
border : 1px solid black;
float: left;
margin-left: 10px;
margin-bottom: 10px;
}
.image_present
{
display:none;
}
#centre a.list:hover img.image_present
{
display:block;
}
</style>
<div id="centre">
<div id="cadre">
<img class="image_present" height="194px" width="259px" src="zelda.png" alt="blu"/>
</div>
<a class="list" href="">lien</a><br />
</div>
j'aimerai que, quand je passe sur le lien, l'image apparaisse, or ici, elle n'apparaît pas.
mon code fonctionne si je met :
#centre:hover img.image_present
{
display:block;
}
mais j'aimerai que l'image apparaisse uniquement si le lien est survolé
ne peut on faire apparaître une images qu'en survolant un parent?
merci de votre aide.
A voir également:
- Afficher une image au survol de la souris
- Quelle touche pour débloquer la souris ? - Guide
- Image iso - Guide
- Légender une image - Guide
- Image de manchots sur une image de plage ✓ - Forum Graphisme
- Frédéric cherche à faire le buzz sur les réseaux sociaux. il a ajouté une image d’ours polaire sur une image de plage. retrouvez l'image originale de la plage. que cache l'ours polaire ? - Forum Graphisme
10 réponses
hello, de memoire c'est la fonction 'onmousse over' qui dois etre utilisez.
<a href="" onmouseover="nomimage1.src='./images/tonimage.png'" onmouseout="nomimage1.src='./images/tonimage2.png'">
dans ce style.
<a href="" onmouseover="nomimage1.src='./images/tonimage.png'" onmouseout="nomimage1.src='./images/tonimage2.png'">
dans ce style.
puis avec du css
Bon avec une class sur un lien , exemple:
.image a {text-decoration:none;color:#123456;}
.image a:hover {background: transparent url("image.jpg") no repeat;}
ce fonctionne non?
Bon avec une class sur un lien , exemple:
.image a {text-decoration:none;color:#123456;}
.image a:hover {background: transparent url("image.jpg") no repeat;}
ce fonctionne non?
Salut
si j ai bien compris
dans ton code tu as une image mais par defaut elle doit etre caché et au survol du lien tu voudrais que cette image s affiche..
si c est bien cela: avec ton code actuel cela ne fonctionne pas car:
ton image se trouve en dehors du lien survolé: en css tu ne peux qu affecter les enfant d'un element en fonction de l interaction de ta souris avec cet element
tu devrais avoir quelque chose comme ca:
<a href="#" class="lien"> mon lien <img src="zelda.jpg" /></a>
et en css:
.lien img{display:none}
.lien:hover img{display:block}
dans ton cas pour selectionner un element en dehors de l element que tu survol, il te faudrait utiliser du jquery...
ou peut etre mettre le survol sur la div parente:
#centre img{display:none}
#centre:hover img{display:block}
comme ton lien se trouve aussi dans la div #centre, quand tu survolera le lien, tu survolera en meme temps la div # centre cela affectera ton image....
\(^^\) (^_^) (/^^)/
si j ai bien compris
dans ton code tu as une image mais par defaut elle doit etre caché et au survol du lien tu voudrais que cette image s affiche..
si c est bien cela: avec ton code actuel cela ne fonctionne pas car:
ton image se trouve en dehors du lien survolé: en css tu ne peux qu affecter les enfant d'un element en fonction de l interaction de ta souris avec cet element
tu devrais avoir quelque chose comme ca:
<a href="#" class="lien"> mon lien <img src="zelda.jpg" /></a>
et en css:
.lien img{display:none}
.lien:hover img{display:block}
dans ton cas pour selectionner un element en dehors de l element que tu survol, il te faudrait utiliser du jquery...
ou peut etre mettre le survol sur la div parente:
#centre img{display:none}
#centre:hover img{display:block}
comme ton lien se trouve aussi dans la div #centre, quand tu survolera le lien, tu survolera en meme temps la div # centre cela affectera ton image....
\(^^\) (^_^) (/^^)/
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
Bonjour moi j'ai une solution en JavaScript, l'image s'appelle "image.jpg" et il faut attribuer un id a votre lien
voici :
voici :
<!DOCTYPE html>
<html>
<head>
<title>test</title>
<meta charset="UTF-8" />
<style type="text/css">
</style>
</head>
<body>
<h1>Ma super page de site web</h1>
<div id="centre">
<a class="list" href="" id="list">lien</a>
<br />
</div>
<script type="text/javascript">
var list = document.getElementById("list");
var img = document.createElement("img");
img.src = "image.jpg";
img.alt = "mon image";
list.onmouseover = function() {
document.body.appendChild(img);
}
list.onmouseout = function() {
document.body.removeChild(img);
}
</script>
</body>
</html>
</body>
</html>
je me doutais que l'on ne pouvais affecter un div au survol d'un de ses frères.
le problème est que sur mon projet final, j'ai plusieurs liens qui doivent faire apparaître chacun une image différente à leur survole.
J'ai donc adapté le code javascript qui remplit cette fonction avec succès.
j'aimerai maintenant savoir comment donner une position à l'image pour qu'elle apparaisse dans mon cadre latéral (si elle peut se redimensionner automatiquement c'est mieux mais sinon je ne mettre que des images à la bonne taille)
le problème est que sur mon projet final, j'ai plusieurs liens qui doivent faire apparaître chacun une image différente à leur survole.
J'ai donc adapté le code javascript qui remplit cette fonction avec succès.
j'aimerai maintenant savoir comment donner une position à l'image pour qu'elle apparaisse dans mon cadre latéral (si elle peut se redimensionner automatiquement c'est mieux mais sinon je ne mettre que des images à la bonne taille)
Bonjour, si j'ai bien compris vous voulez savoir comment positionner votre image, il y a position relative qui associer la une valeur en pixel ou en % avec top, bottom, right, left
"Un homme azerty en vaut deux"
{
position: relative;
top: 254px;
left: 18%;
}
"Un homme azerty en vaut deux"
je souhaite la placer dans un cadre, donc une div qui est soeur de l'image, comment puis-je obtenir ce résultat, puisqu'actuellement, l'image vient se placer à coté ou en dessous de mon cadre?
Voila pour mettre l'image dans un cadre
<!DOCTYPE html>
<html>
<head>
<title>index</title>
<meta charset="UTF-8" />
<style type="text/css">
#conteneur_image {
border: 5px black solid;
width: 350px;
height: 350px;
float: right;
}
#myimg {
height: 350px;
width: 350px;
}
</style>
</head>
<body>
<h1>Ma super page de site web qui tue tout</h1>
<div id="centre">
<a class="list" href="" id="list">lien</a>
<br />
</div>
<div id="conteneur_image"></div>
<script type="text/javascript">
var list = document.getElementById("list");
var img = document.createElement("img");
var conteneur = document.getElementById("conteneur_image");
img.src = "image.jpg";
img.alt = "mon image";
img.id = "myimg"
list.onmouseover = function() {
conteneur.appendChild(img);
}
list.onmouseout = function() {
conteneur.removeChild(img);
}
</script>
</body>
</html>
</body>
</html>