Image Clicable avec agrandissement

Sujet résolu

27 octobre 2008 à 9:55:45

Bonjour,

Voila sur une page j'ai trois images de 180*110. J'aimerais pouvoir cliquer dessus et voir un zoom de l'image puis avec un autre clic l'image revient a a taille normal.

J'ai tenté un code en java script mais sa ne fonctionne pas.

je c'est pas si c'est possible avec du html ou du css , je pencherai plus ver le javascript mais je ne c'est pas.

Peu être avec un overclic.
Franchement je ne c'est pas .

merci d'avance.

TiToF75

27 octobre 2008 à 10:52:59

Salut,

tres simple avec du CSS :

<html>
<head>
<meta http-equiv=Content-Type content="text/html; charset=iso-8859-1">
<style type="text/css">
a img {border:none} 
a:hover {border:0px } 
a:hover img {width:300px ; height:216px} 
</style>
</head>

<body>


<a href="#"><img src="image.jpg" width="200" height="144" alt=""></a>

</body>
</html>

pitcore

27 octobre 2008 à 10:56:21

salut,

merci de ta réponse, se code fonctionne bien mais, le zoom se fait sans clic, alors que je voudrais que l'on clic pour zoomer .

Elias le Vert

27 octobre 2008 à 11:14:02

Je suppose que l'effet recherché est un effet "lightbox" ?
-> http://www.huddletogether.com/projects/lightbox2/

pitcore

27 octobre 2008 à 11:25:41

Tu suppose bien mais a moitié

Je veut bien que sa zoom mais pas en ouvrant "un mini popup" car je c'est pas comment sa s'appelle.

Mais je veut que le zoom se face dans la même fenêtre au même endroit et tout sa grâce au clic du visiteur

TiToF75

27 octobre 2008 à 11:37:11

dans ce cas, sur le click on change la class par une fonction Javascript

<html>
<head>
<meta http-equiv=Content-Type content="text/html; charset=iso-8859-1">
<script>
function change_class() { 
var elm = document.getElementById("monimage"); 
if (elm.className == "img1")
	{
	elm.className= "img2"; 
	}
else
	{
		elm.className= "img1"
	}
} 
</script>
<style type="text/css">
.img1
{
border:none;
}

.img2
{
	width:300px ; 
	height:216px
}
</style>
</head>

<body>
<a href="#"><img src="castar4.jpg" width="200" height="144" alt="" class="img1" id="monimage" name="monimage" onclick="change_class();"></a>
</body>
</html>

pitcore

27 octobre 2008 à 11:40:41

Merci,

c'est tout a fait sa