Sujet Précédent Sujet Suivant

Image apparait au survol d'un lien

Résolu/Fermé
pandageek Messages postés 359 Date d'inscription samedi 6 août 2011 Statut Membre Dernière intervention 27 mai 2014 - 14 août 2012 à 13:05
@lobotomix:~# rm -rf *\ Messages postés 1392 Date d'inscription dimanche 1 juillet 2012 Statut Membre Dernière intervention 14 décembre 2012 - 16 août 2012 à 09:59
Bonjour, 
        
<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:

10 réponses

Réponse 1 / 10
powerguitou Messages postés 472 Date d'inscription vendredi 24 juillet 2009 Statut Membre Dernière intervention 29 janvier 2021 29
14 août 2012 à 13:10
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.
0
Réponse 2 / 10
powerguitou Messages postés 472 Date d'inscription vendredi 24 juillet 2009 Statut Membre Dernière intervention 29 janvier 2021 29
14 août 2012 à 13:17
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?
0
Réponse 3 / 10
pandageek Messages postés 359 Date d'inscription samedi 6 août 2011 Statut Membre Dernière intervention 27 mai 2014 4
14 août 2012 à 14:00
je ne comprend pas vraiment ce que tu veux faire.
0
Réponse 4 / 10
fredconv Messages postés 125 Date d'inscription mardi 25 août 2009 Statut Membre Dernière intervention 4 décembre 2017 38
Modifié par fredconv le 14/08/2012 à 16:38
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....

\(^^\) (^_^) (/^^)/
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
Réponse 5 / 10
@lobotomix:~# rm -rf *\ Messages postés 1392 Date d'inscription dimanche 1 juillet 2012 Statut Membre Dernière intervention 14 décembre 2012 208
14 août 2012 à 16:58
Bonjour moi j'ai une solution en JavaScript, l'image s'appelle "image.jpg" et il faut attribuer un id a votre lien

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>
0
Réponse 6 / 10
pandageek Messages postés 359 Date d'inscription samedi 6 août 2011 Statut Membre Dernière intervention 27 mai 2014 4
14 août 2012 à 22:39
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)
0
Réponse 7 / 10
@lobotomix:~# rm -rf *\ Messages postés 1392 Date d'inscription dimanche 1 juillet 2012 Statut Membre Dernière intervention 14 décembre 2012 208
Modifié par @lobotomix:~# rm -rf * le 15/08/2012 à 09:14
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 

{
position: relative; 
top: 254px; 
left: 18%; 
}


"Un homme azerty en vaut deux"
0
Réponse 8 / 10
pandageek Messages postés 359 Date d'inscription samedi 6 août 2011 Statut Membre Dernière intervention 27 mai 2014 4
15 août 2012 à 15:34
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?
0
pandageek Messages postés 359 Date d'inscription samedi 6 août 2011 Statut Membre Dernière intervention 27 mai 2014 4
15 août 2012 à 17:12
si je met du texte en dessous de mon script, l'image va apparaître en dessous de ce texte, pourquoi?
0
Réponse 9 / 10
@lobotomix:~# rm -rf *\ Messages postés 1392 Date d'inscription dimanche 1 juillet 2012 Statut Membre Dernière intervention 14 décembre 2012 208
15 août 2012 à 18:52
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>

0
Réponse 10 / 10
pandageek Messages postés 359 Date d'inscription samedi 6 août 2011 Statut Membre Dernière intervention 27 mai 2014 4
16 août 2012 à 09:57
et voilà, résolu!
merci à vous.
0
@lobotomix:~# rm -rf *\ Messages postés 1392 Date d'inscription dimanche 1 juillet 2012 Statut Membre Dernière intervention 14 décembre 2012 208
16 août 2012 à 09:59
pense a mettre résolu
0

Discussions similaires

Retrouver l'image originale après avoir fait des modifications ?
Raven -
Tainavictor -

9 réponses
Afficher toutes les lignes masquées excel
livlarsen -
esicom -

26 réponses
problème de pixel
bernie33260 -
contrariness -

14 réponses
Dechiffrer une image caché
JACQUE -
Otomec -

1 réponse
Comment enlever le rouge sur la photo svp ?
lucas0909 -
bazfile -

11 réponses