28173 sujets

CSS et mise en forme, CSS3

Mettre une image en miniature avec un rollover

Bonjour, je souhaite utiliser un style CSS qui affiche des images en miniature (ça ça marche) et lorsqu'on passe la souris dessus l'image s'affiche en taille réelle...

Voici ce que j'ai fait pour l'instant :

Je définis une classe thumb

.thumb img {
	width:150px;
	margin:3px;
	} 

.thumb a:hover img {
	width:300px;
	margin:3px;
	}


et dans le BODY j'appelle cette classe avec un SPAN :

 <span class="thumb">
	<a href="#"><img src="../images/divers/schem1.jpg" name="schem" border="0"/></a>
 </span>


Voilà ça ne marche pas évidemment...
Any idea ?
salut,


#thumb a {
  width: 150px;
  height: ?????;
  display: block;
  margin: 3px;
	color: yellow;
}
#thumb a:hover {
  color: #B0A071;
  background: #4d4d4d;
  border-bottom: 1px solid #000;
}
#thumb a span {
  display: none;
}
#thumb a:hover span {
  position: absolute;
  display: block;
  width: 300px;
  top: 50px;
  left: 10px;
  color: #000;
  font-weight: bold;
}
#thumb img {
border: none;
}


html

<div id="thumb">
	<a href="#">miniature<span><img src="no_image_90.gif" name="schem"/></span></a>
 </div>


+
Bonjour et merci pour cette solution ;
mais je voudrais afficher à la place du terme "miniature" l'image justement en taille réduite, et ça ne fonctionne pas. Smiley decu

J'ai essayé ça mais l'image ne s'agrandit pas au passage de la souris :


#thumb a {
  width: 150px;
  border:none;
  display: block;
  margin: 3px;
}

#thumb a:hover {
  position: absolute;
  border:none;
  display: block;
  width: 300px;
  top: 50px;
  left: 10px;
}

Modifié par weuw (05 Oct 2006 - 12:02)

.thumb a img {
	width:150px;
	margin:3px;
	} 

.thumb a:hover img {
	width:300px;
	margin:3px;
	}
Ok j'ai essayé mais ça ne marche pas non plus, l'image ne s'agrandit pas.
J'appelle l'image comme ça :

<span class="thumb">
<a href="javascript:void(0);">
<img src="../images/divers/schem1.jpg"/>
</a>
</span>

Modifié par weuw (05 Oct 2006 - 13:42)
Vire le span, il sert à rien.

et au pire, tu mets la classe thumb sur le lien : 


a.thumb img {
	width:150px;
	margin:3px;
	} 

a.thumb:hover img {
	width:300px;
	margin:3px;
	}


et tu écris ca : 

<a href="javascript:void(0);" class="thumb">
<img src="../images/divers/schem1.jpg"/>
</a>
Bonjour,

Et juste

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >		
<head> 
   <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
   <title></title> 
   <meta name="TITLE" content="" />
	<style type="text/css">
#thumb a img{

  width: 20px;

  margin: 3px;

}

#thumb a:hover img{
  width: 100%;

  margin: 3px;
}



	</style>

</head>
<body>

<div id="thumb">

	<a href="#"><img src="image.jpg" /></a>

 </div>
</body>
</html>


Non?
Hello,
je crois qu'IE ne pend pas en compte les largeurs à 100%.

pourquoi ne pas passer par PHP pour générer un code CSS par image ? au final, ça serait juste une seule ligne qui change (du moins le nom de l'image dans cette ligne) ... S'il y a 500 images, évidemment ce n'est pas top. Mais pour une 10aine...

Moi ce que je ferais sinon est d'agrandir l'image dans unre pop-up redimensionnée automatiquement ... Ainsi on affiche la vignette et lors du clic, une pop up s'ouvre avec l'image en taille réelle. C'est un peu plus propre.
Malcolm a écrit :
Hello,

pourquoi ne pas passer par PHP pour générer un code CSS par image ? au final, ça serait juste une seule ligne qui change (du moins le nom de l'image dans cette ligne) ... S'il y a 500 images, évidemment ce n'est pas top. Mais pour une 10aine...


je ne vois pas ce que tu veux dire ?
Salut weuw,

T sauvé !!!

C'est ici :
http://forum.alsacreations.com/topic.php?fid=4&tid=16199&s=a%3Ahover#p122980

donc c'est tout simple

html

<a href="#"><img src="image.jpg" alt="" /></a>

css

a:hover{
display:inline;/* ou toute autre déclaration inutile */
}

a img {
border:0;
width:80px; /* enfin la largeur de la vignette quoi  [smile] */
}

a:hover img {
width:auto;
}


<edit>
Bon le plaisir de la jonglerie css mis à part c'est quand même pas très bon comme idée en raison du manque d'accessibilité d'un tel dispositif en navigation clavier.

au passage prévoir de rajouter :

a:focus img {
width:auto;
}

dans la css,
ça limitera la casse même si le problème restera entier pour IE par manque d'implémentation.
</edit>
Modifié par clb56 (09 Oct 2006 - 18:57)
Sujet clos
Aller à