Aller au contenu

Pb de scintillement sur un effet :hover

Lothian

Par Lothian
dans (X)HTML et CSS

 Partager

Sujets conseillés

Lothian

Lothian

Posté
Posté

Bonjour et merci d'avance de vous intéresser à mon problème.

Je vous explique mon soucis en quelques mots :

J'aimerais configurer correctement un effet de survol d'une image, de telle manière que lorsque le curseur de souris passe dessus, l'image d'origine ne disparaisse pas, et qu'une nouvelle s'ajoute à un endroit totalement différent de ma page. (Dans mon cas l'image 1 est le lien, et l'image 2 est le titre de la page liée, stylisé par photoshop)

J'ai cru comprendre après plusieurs recherche que c'était le pseudo-style hover qui pouvait sans doute me permettre de réaliser cet effet, mais il reste des défauts:

-je ne sais pas comment faire pour que l'image 1 reste en place malgré l'apparition de l'image 2

-lorsque je modifie la position de l'image 2 (pour définir l'emplacement où je veux qu'elle apparaisse), les deux images se mettent à clignoter très rapidement, et ce aussi bien sur IE que sur FF.

Pour résumer, j'aimerais éviter si possible un Javascript (je n'y connais rien et j'ai vu beaucoup de webmasters en déconseiller l'emploi)

Voilà mon code html

<body>
        <div id="truc">
		<a href="machin.htm"><img src="image1.png" alt="..."></a>
	</div>
</body>

Et voilà mon CSS

#truc
{
position:absolute;
top:400px;
left:400px;
width:32px;
height:32px;
}


#truc a:hover img
{
display:none
}


#truc a:hover
{
display:block;
background-image:url(image2.png);
width:200px;
height:30px;
position:absolute;
left:100px;
top:100px;
}

Dans toute cette affaire, je ne suis pas très sûr de l'utilisation du display, si vous voyez des choses à redire sur le code, n'hésitez pas.

Voilà merci d'avance pour vos réponses.

Lien vers le commentaire
Partager sur d’autres sites
heliotrope

heliotrope

Posté
Posté (modifié)

Salut,

le méthode la plus appropriée est de composer une image unique avec les deux que tu souhaites afficher à la suite l'une de l'autre.

Puis dans ton css il suffit de modifier la position du background dans #truc a:hover.

:-)

Modifié par heliotrope
Lien vers le commentaire
Partager sur d’autres sites
Lexa66

Lexa66

Posté
Posté 

.truc {
	display: block;
	width: 285px;
	height: 25px;
	background-image: url('bouton-truc.png');
	}

a.truc:hover {
	visibility: visible;
	}

a.truc:hover img {
	visibility: hidden;
	}

Voici un code de roll-over qui fonctionne sans scintillement, essayes surtout le "display: block;" a cet endroit ;)

Excuses moi pour tout à l'heure, j'ai répondu trop rapidement (là j'ai ouvert mon css ;))

Lien vers le commentaire
Partager sur d’autres sites
heliotrope

heliotrope

Posté
Posté (modifié)
l'image d'origine ne disparaisse pas, et qu'une nouvelle s'ajoute à un endroit totalement différent de ma page.

J'ai vraiment lu en diagonale ;-)

Voilà ce que c'est de répondre à une heure tardive, on est à côté de la plaque.

:-)

Modifié par heliotrope
Lien vers le commentaire
Partager sur d’autres sites

Veuillez vous connecter pour commenter

Vous pourrez laisser un commentaire après vous êtes connecté.



Connectez-vous maintenant
 Partager
Aller sur la liste des sujets
×
×
  • Créer...