Agrandir une image dans une même page HTML

Fermé
Utilisateur anonyme - 4 mars 2008 à 10:13
 Utilisateur anonyme - 7 mars 2008 à 12:56
Bonjour,

Voilà, je suis en train de créer un site Internet et dans l'une des pages j'aimerai présenter plusieurs petites images et lorsque l'on cliquerait sur l'une d'elles, elle pourrait s'agrandir...
Mais le truc c'est qu'il faudrait que cela se passe dans la même page HTML...

Genre :
en bas, de la page, j'ai un tableau avec toutes les vignettes et au-dessus, l'image agrandie lorsque je clique sur la vignette.

Si ça se trouve c'est pas compliqué, mais comme je débute, je ne suis pas très douée encore !!!
Merci d'avance de vos précieux conseils...

Bonne journée,
A bientôt
A voir également:

2 réponses

Gihef Messages postés 5150 Date d'inscription mercredi 20 juillet 2005 Statut Contributeur Dernière intervention 20 février 2023 2 775
4 mars 2008 à 19:36
Bonjour,

Il existe des solutions en Javascript.
Vois ces quelques solutions.

On peut aussi “détourner” certaines fonctions des CSS.
Comme dans cette page.
Mais il vaut mieux éviter.

 --

1
Utilisateur anonyme
4 mars 2008 à 19:47
Bonsoir,

Merci de ces petits tuyaux...!
J'espère que je vais m'en sortir !

Bonne soirée,
A bientôt
0
Utilisateur anonyme
7 mars 2008 à 12:56
Bonjour,
Voilà, je suis allée sur les pages que tu m'as donné, mais il y a un truc qui merde...
Lorsque je clique sur l'image que je souhaite agrandir, elle va s'ouvrir dans une nouvelles page ce que je ne voulais pas...
Pffffff... c'est pas simple !
Je t'envoie le script de ma page au cas où je n'aurais pas fait les choses correctement !

----------------------------------------------------------------------------------------------------------------------------------
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<title>essai</title>
<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects"></script>
<script type="text/javascript" src="js/lightbox.js"></script>

<style type="text/css">
body{
color: #080808;
font-family: Arial, Helvetica, sans-serif;
font-size: 10pt;
}
</style>

<link href="/Lightbox/css/lightboxd_vigier.css" rel="stylesheet" type="text/css" />
</head>

<body>

<a href="css/images/D01.jpg" rel="lightbox[roadtrip]"><img src="css/images/ex01.jpg" /></a>
<a href="css/images/D01.jpg" rel="lightbox[roadtrip]"><img src="css/images/ex01.jpg" /></a>
</body>
</html>
-------------------------------------------------------------------------------------------------------------------------------------

voilà ! à bientôt
blandine
1