Agrandir une image dans une même page HTML
Utilisateur anonyme
-
Utilisateur anonyme -
Utilisateur anonyme -
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
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:
- Html agrandir image
- Comment agrandir une image - Guide
- Editeur html - Télécharger - HTML
- Image iso - Guide
- Comment agrandir un tableau sur word - Guide
- Raccourci agrandir fenetre - Guide
2 réponses
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.
--
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.
--
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
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
Merci de ces petits tuyaux...!
J'espère que je vais m'en sortir !
Bonne soirée,
A bientôt