Se connecter / S'enregistrer
Votre question

Onmouseover dans une popup ?

Tags :
  • Script
  • Programmation
Dernière réponse : dans Programmation
16 Décembre 2009 03:03:09

Bonjour,

J'ai un code javascript avec lequel j'ouvre une image dans une popup et j'aimerais savoir comment faire changer l'image de la popup au survol de la souris, de facon a voir la photo avant et apres la retouche.

Voici l'exemple

Voici mes codes.

Le script entre <head> et </head>

  1. <script language="JavaScript" type="text/javascript">
  2. function open_window(page, hauteur, largeur)
  3. {
  4. var hauteur_popup=screen.height;
  5. var H = (screen.height - hauteur) / 2;
  6. var largeur_popup=screen.width;
  7. var L = (screen.width - largeur) / 2;
  8. pop_up = window.open(page,"Popup","toolbar=no,location=no,status=no,menubar=no,scrollbars=no,resizable=no,height="+hauteur+",width="+largeur+",top="+H+",left="+L);
  9. }
  10. <!--
  11. function namosw_goto_byselect(sel, targetstr)
  12. {
  13. var index = sel.selectedIndex;
  14. if (sel.options[index].value != '') {
  15. if (targetstr == 'blank') {
  16. window.open(sel.options[index].value, 'win1');
  17. } else {
  18. var frameobj;
  19. if (targetstr == '') targetstr = 'self';
  20. if ((frameobj = eval(targetstr)) != null)
  21. frameobj.location = sel.options[index].value;
  22. }
  23. }
  24. }
  25.  
  26. // -->
  27. </script>



Et mon code pour ouvrir l'image:


  1. <a href="javascript:open_window('photos/graphisme/1.jpg', 679, 800)"><img src="photos/graphisme/1s.jpg" alt="" width="176" height="150" border="0" /></a>



Merci d'avance pour votre aide.

Autres pages sur : onmouseover popup

16 Décembre 2009 15:31:37

La tu ouvres juste l'images dans une pop-up, donc l'exécution de javascript sur une image est impossible (enfin je crois ;( )
Il faut que tu ouvres un page web contenant ton image. Et ensuite avec deux fonction en javascript tu as ton bonheur

Tadouum :
( http://pastebin.com/f7e877666 )
  1. <html>
  2. <head>
  3. <title>Nom de l'image</title>
  4. <script type="text/javascript">
  5. function retabli(urlimg)
  6. {
  7. var retabli = document.getElementById('image');
  8. retabli.src = urlimg;
  9. }
  10.  
  11. function change(urlimg)
  12. {
  13. var change = document.getElementById('image');
  14. change.src = urlimg;
  15. }
  16. </script>
  17. </head>
  18. <body>
  19. <img border="0" src="<a href="http://clip2net.com/clip/m25508/1260973841-clip-1kb.png" rel="nofollow" target="_blank">http://clip2net.com/clip/m25508/1260973841-clip-1kb.png</a>" alt="" onmouseover="change('<a href="http://clip2net.com/clip/m25508/1260973863-clip-1kb.png" rel="nofollow" target="_blank">http://clip2net.com/clip/m25508/1260973863-clip-1kb.png</a>')" onmouseout="retabli('<a href="http://clip2net.com/clip/m25508/1260973841-clip-1kb.png" rel="nofollow" target="_blank">http://clip2net.com/clip/m25508/1260973841-clip-1kb.png</a>')" id="image">
  20. </body>
  21. </html>


Le "onmouseover" change la source de image ("<img>" avec l'id "image") par l'image qui doit rempalce l'image de base.
Et le "onmouseout", rétabli l'image par defaut.

Mais je pense que t'y connais assez bien en javascript pour comprendre ça.
(Code by moi :D  )
m
0
l
16 Décembre 2009 21:41:22

Merci pour ta réponse.

J'avais déjà pensé à faire comme ça en fait, créer une page html pour ma popup, mais ce que je cherche est plus complexe, j'ai surement mal du m'exprimer.

En fait, je souhaite avoir un code javascript, qui ouvre mon image dans une popup (ça c'est bon) et avec une variable qui dise dans le script "quand la souris passe sur l'image en question, change la par telle image", de façon a avoir juste a faire un code en renseignant mes deux images dans mon <body>.


Car le problème avec la popup html, c'est qu'il faut en créer une pour chaque image, donc si j'ai beaucoup d'image ...
m
0
l
17 Décembre 2009 00:10:15

Ah ok je crois que j'ai compris.
Bah au lieu d'ouvrir la retouche dans un pop-up, mais un ptit cadre dans la page avec dedans la retouche de l'image survoler.

Ou sinon pour avoir que une seul pop-up html, et bah tu fais des pop-up php avec des paramètre get.

Exemple :
Tu as la photo une, tu cliques dessus ça ouvre la pop-up : pop-up.php?image=1.jpg&imager=1s.jpg
Et la la page php affiche :
  1. <html>
  2. <head>
  3. <title>Nom de l'image</title>
  4. <script type="text/javascript">
  5. function retabli(urlimg)
  6. {
  7. var retabli = document.getElementById('image');
  8. retabli.src = urlimg;
  9. }
  10.  
  11. function change(urlimg)
  12. {
  13. var change = document.getElementById('image');
  14. change.src = urlimg;
  15. }
  16. </script>
  17. </head>
  18. <body>
  19. <img border="0" src="1.jpg" alt="" onmouseover="change('1s.jpg')" onmouseout="retabli('1.jpg')" id="image">
  20. </body>
  21. </html>
m
0
l
Tom's guide dans le monde
  • Allemagne
  • Italie
  • Irlande
  • Royaume Uni
  • Etats Unis
Suivre Tom's Guide
Inscrivez-vous à la Newsletter
  • ajouter à twitter
  • ajouter à facebook
  • ajouter un flux RSS