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
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 ....

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
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.
0
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
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
0
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
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
0
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
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


<!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
0

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
Autant pour moi...
Merci de corriger c'est bien pour tout le monde.
0