High-Tech Santé Médecine Droit-Finances

Auto-Entrepreneur

Comment faire ?

Rechercher : dans
Par :

Aggrandir une petite en grande image sur site

Dernière réponse le 25 aoû 2008 à 12:55:51 streckers, le 25 aoû 2008 à 11:17:24 
 Signaler ce message aux modérateurs

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

Configuration: Windows XP
Internet Explorer 7.0

Meilleures réponses pour « aggrandir une petite en grande image sur site » dans :
[Webmaster] Afficher une image de grande taille VoirPour la plupart des internautes, afficher une image de grande taille dans une page web est trop lourd. Zoomify est un petit programme Flash qui permet de rendre une image zoomable et navigable, et chargeant l'image par morceau selon le...
Les images ne s'affichent pas sur le site VoirDans une page web, les images sont spécifiées grâce à la balise IMG, avec la notation suivante : Les formats d'images supportés sur le web sont les formats GIF, JPG et PNG. Le format BMP n'est pas supporté par les...
Hébergement gratuit d'images, de photos et d'autres fichiers VoirPlusieurs sites vous permettent d'héberger gratuitement toutes vos images : PixyUp.com imgur.com IMAGEDream Web-Images ImageVenue xs.to ImageShack CJoint Servimg Mabul UpandPost HostinPics Lacr@p zimage.biz Imagilive.com
Posez votre question Répondre

1

pijaku, le 25 aoû 2008 à 12:04:12

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.

   
Répondre à pijaku

2

pijaku, le 25 aoû 2008 à 12:09:13

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

   
Répondre à pijaku

3

pijaku, le 25 aoû 2008 à 12:27:07

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

   
Répondre à pijaku

4

RAD ZONE, le 25 aoû 2008 à 12:54:26

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
♣  La plus grande erreur que puisse faire un homme est d'avoir peur d'en faire une. ♣

   
Répondre à RAD ZONE

5

 pijaku, le 25 aoû 2008 à 12:55:51

Autant pour moi...
Merci de corriger c'est bien pour tout le monde.

   
Répondre à pijaku
Posez votre question Répondre
Ils ont besoin de votre aide
Collection CommentÇaMarche.net