Aggrandir une petite en grande image sur site
streckers
Messages postés
2
Statut
Membre
-
pijaku Messages postés 13513 Date d'inscription Statut Modérateur Dernière intervention -
pijaku Messages postés 13513 Date d'inscription Statut Modérateur Dernière intervention -
Bonjour,
comment aggrandir au passage de la souris une petite en grande image sur site
J’ai aucune connaissance de la programmation mais j'aimerai donc sur mon site mettre des photos, ca ce n’est pas le plus dure.
Par contre ce qui m'embête c’est, comment faire avec tous ces codes et repérage que j'ai vue lors de mes recherche sur le net, j’en ai essayé et je n'y suis pas arrivé.
Mon projet est simple j'aimerai que les visiteurs de mon site au passage de leur souris puissent agrandir l'image qui est à la base en format vignette (petite).
Voila ce que j'ai trouvé pour pouvoir les faires, mais je n'y comprends rien désole:
1) façon de faire, pas réussie ?<a href="imagegrande.jpg" target="_blank"><img src="200x145_moyeu+parasol.jpg" border="0"></
a>
2) façon de faire, pas réussie <a href="URL_PHOTO" onClick="window.open
('URL_PHOTO','','scrollbars=no,width=xxx,height=xxx,left=xxx,top=xxx');return false"><img src="URL_VIGNETTE"
border="0" alt="" width=xxx height=xxx></a>
Y à t-il une ou bien plusieurs personnes qui ont des bonnes connaissances et qui puissent m'aider pas à pas, car, il ne suffit pas uniquement avoir des connaissances, il faut pouvoir l’enseigner.
Pas simple je sais, mais je garde espoir merci encore ....
comment aggrandir au passage de la souris une petite en grande image sur site
J’ai aucune connaissance de la programmation mais j'aimerai donc sur mon site mettre des photos, ca ce n’est pas le plus dure.
Par contre ce qui m'embête c’est, comment faire avec tous ces codes et repérage que j'ai vue lors de mes recherche sur le net, j’en ai essayé et je n'y suis pas arrivé.
Mon projet est simple j'aimerai que les visiteurs de mon site au passage de leur souris puissent agrandir l'image qui est à la base en format vignette (petite).
Voila ce que j'ai trouvé pour pouvoir les faires, mais je n'y comprends rien désole:
1) façon de faire, pas réussie ?<a href="imagegrande.jpg" target="_blank"><img src="200x145_moyeu+parasol.jpg" border="0"></
a>
2) façon de faire, pas réussie <a href="URL_PHOTO" onClick="window.open
('URL_PHOTO','','scrollbars=no,width=xxx,height=xxx,left=xxx,top=xxx');return false"><img src="URL_VIGNETTE"
border="0" alt="" width=xxx height=xxx></a>
Y à t-il une ou bien plusieurs personnes qui ont des bonnes connaissances et qui puissent m'aider pas à pas, car, il ne suffit pas uniquement avoir des connaissances, il faut pouvoir l’enseigner.
Pas simple je sais, mais je garde espoir merci encore ....
A voir également:
- Aggrandir une petite en grande image sur site
- Site de telechargement - Accueil - Outils
- Site x - Guide
- Site pour partager des photos - Guide
- Quel site remplace coco - Accueil - Réseaux sociaux
- Site pour vendre des objets d'occasion - Guide
5 réponses
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.
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
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
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
