Pb de scintillement sur un effet :hover

Lothian · 4 Février 2009

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.

Lexa66 · 4 Février 2009

Bonjour à toi,

A la place de display: none;

Essayes plutôt visibility: hidden;

J'avais eu le cas pour un site et je m'étais bien embêté également :mad2:

Lothian · 4 Février 2009

Je viens d'essayer ça ne fonctionne pas plus avec cette technique.

Quelqu'un aurait une autre idée?

heliotrope · 5 Février 2009

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é 5 Février 2009 par heliotrope

Lexa66 · 5 Février 2009

.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 )

heliotrope · 5 Février 2009

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é 5 Février 2009 par heliotrope

Connexion

Pb de scintillement sur un effet :hover

Sujets conseillés

Lothian

Lexa66

Lothian

heliotrope

Lexa66

heliotrope

Veuillez vous connecter pour commenter

Parcourir

Activité