Aggrandir une petite en grande image sur site
Fermé
streckers
Messages postés
2
Date d'inscription
lundi 25 août 2008
Statut
Membre
Dernière intervention
25 août 2008
-
25 août 2008 à 11:17
pijaku Messages postés 12263 Date d'inscription jeudi 15 mai 2008 Statut Modérateur Dernière intervention 15 mars 2023 - 25 août 2008 à 12:55
pijaku Messages postés 12263 Date d'inscription jeudi 15 mai 2008 Statut Modérateur Dernière intervention 15 mars 2023 - 25 août 2008 à 12:55
A voir également:
- Aggrandir une petite en grande image sur site
- Frédéric cherche à faire le buzz sur les réseaux sociaux. il a ajouté une image de manchots sur une image de plage. retrouvez l'image originale de la plage. que cachent les manchots ? ✓ - Forum Windows
- Recherche par image - Guide
- Votre colis est dans le site de livraison qui dessert votre adresse. nous le préparons pour le mettre en livraison. ✓ - Forum Consommation et internet
- Petite croix snap - Forum Snapchat
- Comment savoir si un site est fiable - Guide
5 réponses
pijaku
Messages postés
12263
Date d'inscription
jeudi 15 mai 2008
Statut
Modérateur
Dernière intervention
15 mars 2023
2 712
25 août 2008 à 12:04
25 août 2008 à 12:04
Salut,
Tout d'abord un petit script en javascript qui est en fait une fonction te permettant d'afficher ou de masquer un div (contenant ta grande image) :
<head>
<script type="text/javascript"><!--
div = {
show: function(elem) {
document.getElementById(elem).style.visibility = 'visible';
},
hide: function(elem) {
document.getElementById(elem).style.visibility = 'hidden';
}
}
--></script>
</head>
Ensuite, le code html pour faire fonctionner tout ça :
<body>
<a href="#" onMouseOver="div.show('grandeimage')" onMouseOut="div.hide('grandeimage')"><img src="url de ta petite image"></a>
<div id="grandeimage">
<img src="url de ta grande image"/>
</body>
</html>
Le reste est de la mise en place.
Tout d'abord un petit script en javascript qui est en fait une fonction te permettant d'afficher ou de masquer un div (contenant ta grande image) :
<head>
<script type="text/javascript"><!--
div = {
show: function(elem) {
document.getElementById(elem).style.visibility = 'visible';
},
hide: function(elem) {
document.getElementById(elem).style.visibility = 'hidden';
}
}
--></script>
</head>
Ensuite, le code html pour faire fonctionner tout ça :
<body>
<a href="#" onMouseOver="div.show('grandeimage')" onMouseOut="div.hide('grandeimage')"><img src="url de ta petite image"></a>
<div id="grandeimage">
<img src="url de ta grande image"/>
</body>
</html>
Le reste est de la mise en place.
pijaku
Messages postés
12263
Date d'inscription
jeudi 15 mai 2008
Statut
Modérateur
Dernière intervention
15 mars 2023
2 712
25 août 2008 à 12:09
25 août 2008 à 12:09
J'oubliais..... Dans ce code, quand tu ouvres ta page html, les 2 img s'affichent, puis lorsque tu survole la petite, la grande apparait puis disparait. Si tu veux n'avoir que la petite image à l'affichage de ta page il faut ajouter ceci entre tes balises <head> :
<style type="text/css">
div#grandeimage
{
visibility: hidden;
}
</style>
ce qui te donne en tout :
entre tes balises <head> et </head> :
<style type="text/css">
div#grandeimage
{
visibility: hidden;
}
</style>
<script type="text/javascript"><!--
div = {
show: function(elem) {
document.getElementById(elem).style.visibility = 'visible';
},
hide: function(elem) {
document.getElementById(elem).style.visibility = 'hidden';
}
}
--></script>
Et entre tes balises <body> et </body>
<a href="#" onMouseOver="div.show('grandeimage')" onMouseOut="div.hide('grandeimage')"><img src="url de ta petite image"></a>
<div id="grandeimage">
<img src="url de ta grande image"/>
Et voili voilou
<style type="text/css">
div#grandeimage
{
visibility: hidden;
}
</style>
ce qui te donne en tout :
entre tes balises <head> et </head> :
<style type="text/css">
div#grandeimage
{
visibility: hidden;
}
</style>
<script type="text/javascript"><!--
div = {
show: function(elem) {
document.getElementById(elem).style.visibility = 'visible';
},
hide: function(elem) {
document.getElementById(elem).style.visibility = 'hidden';
}
}
--></script>
Et entre tes balises <body> et </body>
<a href="#" onMouseOver="div.show('grandeimage')" onMouseOut="div.hide('grandeimage')"><img src="url de ta petite image"></a>
<div id="grandeimage">
<img src="url de ta grande image"/>
Et voili voilou
pijaku
Messages postés
12263
Date d'inscription
jeudi 15 mai 2008
Statut
Modérateur
Dernière intervention
15 mars 2023
2 712
25 août 2008 à 12:27
25 août 2008 à 12:27
Encore moi...
Si tu veux te passer de javascript, tu as la solution de Radzone ici :
http://www.commentcamarche.net/forum/affich 8052322 xhtml css img hover sans javascript
Si tu veux te passer de javascript, tu as la solution de Radzone ici :
http://www.commentcamarche.net/forum/affich 8052322 xhtml css img hover sans javascript
RAD ZONE
Messages postés
5205
Date d'inscription
samedi 20 janvier 2007
Statut
Contributeur
Dernière intervention
19 avril 2020
1 347
25 août 2008 à 12:54
25 août 2008 à 12:54
SALUTpijaku
Si tu veux te passer de javascript, tu as la solution de Radzone ici :
non avec celui la c est un simple rollover tu ne pourras pas, car les 2 image sont charge dans le meme bloc !!
mais en voici un simple effet zoom en CSS
RAD
Si tu veux te passer de javascript, tu as la solution de Radzone ici :
non avec celui la c est un simple rollover tu ne pourras pas, car les 2 image sont charge dans le meme bloc !!
mais en voici un simple effet zoom en CSS
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" type="text/css" href="img/gallery.css" />
<title>Images Pure CSS
</title>
<style type="text/css">
/*<![CDATA[*/
.zoom {
height:300px;
}
.zoom p {
text-align:center;
}
.zoom img {
width:200px;
height:150px;
}
.zoom img:hover {
width:800px;
height:600px;
}
/*]]>*/
</style>
</head>
<body>
<div class="zoom">
<p>
<img src="1.jpg" alt="img" />
</p>
</div>
</body>
</html>
RAD
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
pijaku
Messages postés
12263
Date d'inscription
jeudi 15 mai 2008
Statut
Modérateur
Dernière intervention
15 mars 2023
2 712
25 août 2008 à 12:55
25 août 2008 à 12:55
Autant pour moi...
Merci de corriger c'est bien pour tout le monde.
Merci de corriger c'est bien pour tout le monde.