Image plus grande quand on passe dessus.

Image plus grande quand on passe dessus. - HTML/CSS - Programmation

Marsh Posté le 16-06-2006 à 22:01:42    

Bonjour,
je suis tombé sur un site qui m'a enormément troublé car dès que l'on passe la souris sur une image une fenêtre apparait avec l'image en plus grand. Ce n'est pas du flash, mais autre chose. Quelqu'un sait-il de quoi il en retourne ?
Je vous donne l'adresse du site : http://www.templatemonster.com/
Ah oui et surtout : comment on fait ca ?
 
 
En vous remerciant par avance...

Reply

Marsh Posté le 16-06-2006 à 22:01:42   

Reply

Marsh Posté le 16-06-2006 à 22:14:31    

Reply

Marsh Posté le 18-06-2006 à 23:11:08    

Oui mais non...  
En fait j'ai sorti de code source et j'ai trouvé cela : comme code  
 

Citation :

<a style="cursor: hand" href="/website-templates/11227.html" target="_blank"><IMG SRC="http://images.templatemonster.com/screenshots/11200/11227-m.jpg" border=0 alt='Template 11227' border=1 style="border-color: 777777"      
         onmouseover="showtrail('http://images.templatemonster.com/screenshots/11200/11227-b.jpg ','Template 11227',430,430)"   onmouseout="hidetrail()"
  ></a>


Vous pouvez me l'expliquer car je ne comprend pas bien. En effet, la fenetre qui apparait c'est quoi ? C'est un calque ?
 
Merci de votre aide.

Message cité 1 fois
Message édité par Prozac-72 le 18-06-2006 à 23:17:06
Reply

Marsh Posté le 18-06-2006 à 23:17:23    

Prozac-72 a écrit :

Oui mais non...  
En fait j'ai sorti de code source et j'ai trouvé cela : comme code  
 
___________________________
<a style="cursor: hand" href="/website-templates/11227.html" target="_blank"><IMG SRC="http://images.templatemonster.com/screenshots/11200/11227-m.jpg" border=0 alt='Template 11227' border=1 style="border-color: 777777"      
         onmouseover="showtrail('http://images.templatemonster.com/screenshots/11200/11227-b.jpg ','Template 11227',430,430)"   onmouseout="hidetrail()"
  ></a>
 
______________________________
Vous pouvez me l'expliquer car je ne comprend pas bien


 
 
Non on va pas texpliquer...surtout pour du code sortie de la galaxie noob45...
 
On te file une soluce, toute belle, toute propre, exploite là ;)

Reply

Marsh Posté le 19-06-2006 à 06:52:51    

Moi avant j'avais fait un truc comme ceci, après t'a juste à régler les carractéristiques.
 

Code :
  1. <SPAN style="position: absolute; top: 150 px; left: 100px;width: 800px; height: 0px">
  2. <A HREF="Dossier_Play-Yan_micro_suite.html" onMouseover="Permut(1,'IMG1');" onMouseout="Permut(0,'IMG1');">
  3. <IMG SRC="Boite_petite.bmp" border=1 NAME="IMG1" onLoad="preloadPermut(this,'Boite_grande.gif');" ></A>
  4. </SPAN>
  5. <SPAN style="position: absolute; top: 150 px; left: 203px;width: 800px; height: 0px">
  6. <A HREF="Dossier_Play-Yan_micro_suite.html" onMouseover="Permut(1,'IMG2');" onMouseout="Permut(0,'IMG2');">
  7. <IMG SRC="Play_yan_micro_petit.bmp" border=1 NAME="IMG2" onLoad="preloadPermut(this,'Play_yan_micro_grand.gif');" ></A>
  8. </SPAN>
  9. <SPAN style="position: absolute; top: 150 px; left: 1px;width: 800px; height: 0px">
  10. <A HREF="Dossier_Play-Yan_micro_suite.html" onMouseover="Permut(1,'IMG3');" onMouseout="Permut(0,'IMG3');">
  11. <IMG SRC="Play_yan_micro_petit2.bmp" border=1 NAME="IMG3" onLoad="preloadPermut(this,'Play_yan_micro_grand2.gif');" ></A>
  12. </SPAN>

Reply

Marsh Posté le 19-06-2006 à 11:06:25    

non mais surtout c'est quoi ces notions "showtrail" et "hidetrail" ?

Reply

Marsh Posté le 19-06-2006 à 11:13:36    

Ce sont des fonctions que logiquement tu dois avoir créé
 
 [:jean-guitou]

Reply

Marsh Posté le 19-06-2006 à 11:15:18    

ah ok... donc cela référe à un code qui est quelque part sur le site, si j'ai bien compris.

Reply

Marsh Posté le 19-06-2006 à 14:06:59    

[:aia] Oléééé , tu as tout compris

Reply

Marsh Posté le 24-08-2006 à 04:10:42    

Salut, mon site avance petit à petit, sauf concernant ceci :
J'aimerais faire pareil que Prozac-72 sur son site (http://www.templatemonster.com/ ).
Je veux simplement avoir quelque chose de clair pour que, quand je passe la souris sur cette image http://img176.imageshack.us/img176/4874/mwseu1.png(MWS.bmp) elle devienne cette image http://img176.imageshack.us/img176/9138/mwsgdcl4.gif(MWSgd.gif) et quand j'enlève la souris, l'image redevient comme au début.


Message édité par lyneus le 24-08-2006 à 04:12:36
Reply

Marsh Posté le 24-08-2006 à 04:10:42   

Reply

Marsh Posté le 24-08-2006 à 11:21:04    

<img src="mwseu1.png" onmouseover="this.src='mwsgdcl4.gif'" onmouseout="this.src='mwseu1.png'"/>

Reply

Marsh Posté le 24-08-2006 à 12:09:21    

c'est parfait merci, sauf qu'il y à un tout petit truc, c'est que quand je la grande image se met, elle déforme un peu tout le site...je voudrais juste qu'elle passe au dessus des autres images ou texte.

Message cité 1 fois
Reply

Marsh Posté le 24-08-2006 à 12:32:13    

lyneus a écrit :

c'est parfait merci, sauf qu'il y à un tout petit truc, c'est que quand je la grande image se met, elle déforme un peu tout le site...je voudrais juste qu'elle passe au dessus des autres images ou texte.


 
Je pense que tu devrais faire une boite dans laquelle tu mets ton image avec du CSS

Code :
  1. .boite {
  2. position: absolute;
  3. height: 131px;
  4. width: 200px;
  5. visibility:hidden;
  7. }


 
Ensuite tu fais 2 fonctions:

Code :
  1. <script language="JavaScript">
  6. function afficher (adresse, x,y){document.all.boite.style.backgroundImage=adresse;
  7.  document.all.boite.style.left=x;
  8.  document.all.boite.style.top=y;
  9.  document.all.boite.style.visibility="visible";
  12.  }
  13.  function cacher () {
  15.  document.all.boite.style.visibility="hidden";
  18.    }
  20. </script>


Tu fais un area shape sur ta premiere image. N'oublies pas de insérer dans ta balise image usemap="#Map".
voila le code de la suite:

Code :
  1. <img src="....jpg" border="0" usemap="#Map" />
  2. <div id="boite" class="boite" ></div>
  3. <p>
  4.   <map name="Map" id="Map">
  5.     <area onmouseover="afficher('url(adresse/deton/image.jpg)',x,y,')"  onmouseout="cacher()" shape="square" coords="....." nohref />


Voila si ta des questions n'hésite pas

Message cité 1 fois

---------------
[:bossik]
Reply

Marsh Posté le 24-08-2006 à 12:36:08    

Euuh, vu que je ne suis pas encore un expert en html et css, je préfèrerais rester dans les choses simple, mais je vais quand tester ce que tu m'as donné. Donc je recherche toujours le petit truc qui permettrait à mon image de ne pas déformer ma page.

Reply

Marsh Posté le 24-08-2006 à 12:37:44    

mjcom a écrit :

[:pingouino]


 
va apprendre le html toi [:sarko]

Reply

Marsh Posté le 24-08-2006 à 12:45:14    

koi ca marche!!!


---------------
[:bossik]
Reply

Marsh Posté le 24-08-2006 à 12:48:33    

Svp, je veux juste un truc simple qui tient sur une ligne pour pas que ça déplace tout mon site quand la grande image s'affiche.

Reply

Marsh Posté le 24-08-2006 à 12:52:40    

Et en mettant ton image dans un conteneur css, dont tu aurais modifié le z-index, afin qu'il soit au dessus de ton texte.. ainsi l'image tu la place en relatif par rapport au texte, et quand tu passe dessus elle grossis, mais elle risque de cacher une partie du texte...

Reply

Marsh Posté le 24-08-2006 à 12:57:22    

c'est pas grave qu'elle cache le texte, c'est le but....
il y à pas juste une balise à rajouter à ça...

Code :
  1. <img src="mwseu1.png" onmouseover="this.src='mwsgdcl4.gif'" onmouseout="this.src='mwseu1.png'"/>


...juste pour dire qu'il faut que sa passe dessus  :(  :??:

Reply

Marsh Posté le 24-08-2006 à 13:08:54    

va voir ICI pour le fonctionnement du z-index.
 
Je ne pense pas qu'il y ai de solution plus simple.

Reply

Marsh Posté le 24-08-2006 à 13:26:47    

J'ai mis ça :

Code :
  1. <!--Debut News 1--><center><p class="obj2">
  2.             <br />
  3.             <img src="img/MWS.bmp" onmouseover="this.src='img/MWSgd.gif'" onmouseout="this.src='img/MWS.bmp'" /></p>
  4.   <br />
  5.   <p class="obj1">Magic WorkStation est un petit logiciel qui vous permet de jouer au célèbre jeux de crates Magic sur internet. Il est gratuit, cependant il existe une version payante qui vous permet d'avoir des options en plus.
  6.   <br />
  7.   <br />
  8. <!--Fin NEws 1-->  </p></center>


 
 
Et dans mon CSS àa :

Code :
  1. .obj1 {
  2.   z-index: 1;
  3. }
  5. .obj2 {
  6.   z-index: 2;
  7. }
  9. .obj3 {
  10.   z-index: 3;
  11. }


 
Et ça m'a rien changé, cela déforme toujours le site...
 
Pour vous donner une petite idée, voici mon site...  http://multymygames.rox.fr


Message édité par lyneus le 24-08-2006 à 13:28:39
Reply

Marsh Posté le 24-08-2006 à 14:24:47    

C'est bon, après pleins d'éssais et de réflexion, j'ai réussi.

Reply

Marsh Posté le    

Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed