OVH Cloud OVH Cloud

comment activer le border en survol sur une image ?

4 réponses
Avatar
charly
Bonsoir,

J'ai un trou de mémoire et pas moyen de trouver ce que je cherche alors
je viens vous demander un petit coup de main :

Soit le CSS suivant :

.pic{
border : none;
}

.pic a:hover{
border:thick;
border-color : #FF247C;
}

et le code html :

<html>
<head>
<title></title>
<meta name="GENERATOR" content="Quanta Plus">
<link href="ressources/styles.css" rel="stylesheet" type="text/css">
</head>
<body>
<a href="www.yahoo.fr" ><img src="photos/toto.jpg" width="57"
height="43" class="pic"></a>

</body>

</html>

Ce que je veux faire :
Il n'y a pas de bordure sur l'image sauf quand je la survole avec la souris.
Pas de javascript (je ne veux pas de onMouseOver, onMouseOut ).

Je sais qu'on peut le faire mais impossible de remettre la main sur un
exemple..

Merci d'avance !

4 réponses

Avatar
Thibaut Allender
on 20/02/2004 15:29, charly wrote :

Quand le border apparait, le tableau bouge . Des suggestions ? (je
veux chercher pdt ce temps sur Google, au cas où :) )



il suffit de mettre le meme border par defaut, mais en transparent, ou
de la meme couleur que le fond
comme ca en hover il n'y a que la couleur qui change, et pas de decalage

--
freelance + web|system developer|designer
+ 32 496 26 75 76 + http://www.capsule.org
Avatar
loufoque
Message d'origine de Thibaut Allender :

on 20/02/2004 15:29, charly wrote :

Quand le border apparait, le tableau bouge . Des suggestions ? (je
veux chercher pdt ce temps sur Google, au cas où :) )




il suffit de mettre le meme border par defaut, mais en transparent, ou
de la meme couleur que le fond
comme ca en hover il n'y a que la couleur qui change, et pas de decalage



On peut aussi réduire le padding ou la marge de 1px, à condition que
ceux-ci soient non nuls et exprimés en pixels.
Avatar
charly
Zut, en fait, il y aun nveau problème :

Quand le border apparait, le tableau bouge .

Je précise :

mes images sont stockées dans une galerie générée par mon script PHP. On
voit les vignettes tout marche de ce coté :)

Par contre, quand le border apparaît, l'ensemble du tableau bouge, et
ce, même en réduisant le border à 1 px...

Des suggestions ? (je veux chercher pdt ce temps sur Google, au cas où :) )

Merci encore !
Avatar
charly
Pascal Vigneron wrote:
Est-ce ce que vous cherchez ?

<style type="text/css"><!--
.pic img {border:0;}
.pic a {display: table; border:1px solid #971276;}
.pic a:hover {border:1px solid #FF247C;}
--></style>

OK sous IE (Win) 5.5 et FireFox 0.8

Curieusement sous Opéra 6.05 il y a un espace blanc de 3px
entre l'image et la border (mais c'est beau)

Cet espace est reproductible sous Firefox et IE avec :
.pic a {display: table;border:1px solid #971276;padding:3px}
reproductible sous Firefox seul avec : .pic img {border:0;margin:3px}
Dans les 2 cas, ça s'ajoute chez Opéra (bas beau dans le 1er cas :
+ étroit en bas, alors que dans un encadrement il vaut mieux que
l'espace bas soit un poil plus large)

Pascal




Tout à fait, merci bcp !!
Je commençais à desespérer de parvenir à une solution !

Merci bcp bcp !!