changer l'image-frontière sur mouseover

J'ai un problème, je travaille sur un script php de la galerie et j'ai besoin d'aide, j'ai une image, il a une bordure lightgray autour, et si theres un événement mouseover, je veux la frontière devenir gris. Comment puis je faire ça?changer l'image-frontière sur mouseover

merci à l'avance

Source

2009-01-21 Anonymous

Utilisez la classe: hover pseudo. Par exemple:

<html> 
<head> 
    <style> 
     IMG.HoverBorder {border:5px solid #eee;} 
     IMG.HoverBorder:hover {border:5px solid #555;} 
    </style> 
</head> 
<body> 
    <img class="HoverBorder" src="test.png" /> 
</body> 
</html>

Le code ci-dessus fonctionne bien sur tous les navigateurs sensés auxquels j'ai accès. Si vous avez besoin d'un soutien IE 6, prenez une profonde respiration et check this out (grâce à Kim @ Brian de me rappeler IE6):

<html> 
<head> 
    <style> 
     a:hover{ background-color:white; } 
     a:link img, a:visited img{ border:5px solid #eee; } 
     a:hover img{ border:5px solid #555; } 
    </style> 
</head> 
<body> 
    <a href="#"><img class="HoverBorder" src="03 messed up status log edit IE6.png" /></a> 
</body> 
</html>

Il existe plusieurs variantes de cette approche - je vous suggère de cliquer à travers sur ce site pour d'autres options qui pourraient être plus adaptées à votre situation.

Source

2009-01-21 18:42:59

Est-ce que cela fonctionne aussi sur IE6? –

J'ai mis à jour la réponse avec IE6 info, merci de me le rappeler –

Vous pouvez utiliser la :hover pseudo-classe.

Par exemple:

<style> 
a.bordered:hover img { 
    border: solid 2px grey; 
} 
</style> 

<a href="..." class="bordered"><img src="..." /></a>

Source

2009-01-21 18:42:08 DavGarcia

utilisez .mypictureclass: survolez pour appliquer la bordure.

mais également d'appliquer une bordure transparente à la classe d'affichage d'image pour éviter qu'elle saute lorsque la bordure est ajoutée.

Source

2009-01-21 18:43:52 GeekyMonkey

ok les gars je l'ai XD comme je l'ai dit, je suis un gars html, et je viens de découvrir comment cela fonctionne, il a utilisé un CSS comme style, donc j'ai essayé beaucoup de choses, et, surprise, je vient de faire une copie de la imagethumbnail-tag et a changé le bordercoler et édité le titre imagethumbnail: hover

merci vous tous ainsi :)

Source

2009-01-21 20:55:08

<style type="text/css"> 
body,td,th { 
    font-size: 14px; 
    color: #FFF; 
} 
body { 
    background-color: #000; 
} 
a { 
    font-size: 14px; 
    color: #FFF; 
} 
a:link { 
    text-decoration: none; 
} 
a:visited { 
    text-decoration: none; 
    color: #FFF; 
} 
a:hover { 
    text-decoration: none; 
    color: #CCC; 
} 
a:active { 
    text-decoration: none; 
    color: #FC3; 
} 
a:img, 
a:link img, 
a:visited img, 
a:focus img, 
a:hover img, 
a:active img { 
    border: none; 
} 
</style>

le code suit tout ce que j'ai vu jusqu'à présent , mais n'est toujours pas affiché dans IE correctement & montre les frontières autour des images. Ceci est un échantillon de l'une des images de mouseover.

<a href="index.html"> 
     <img src="images/buttons/home.png" alt="Home" width="216" height="44" 
     onmouseover="this.src='images/buttons/home_.png'" onmouseout="this.src='images/buttons/home.png'"></a>

Source

2009-06-17 21:08:45

changer l'image-frontière sur mouseover

Répondre

Questions connexes