Onmouseover dans une popup ?

skhigh

16 Décembre 2009 02: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>

<script language="JavaScript" type="text/javascript">

function open_window(page, hauteur, largeur)

{

var hauteur_popup=screen.height;

var H = (screen.height - hauteur) / 2;

var largeur_popup=screen.width;

var L = (screen.width - largeur) / 2;

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);

}

<!--

function namosw_goto_byselect(sel, targetstr)

{

  var index = sel.selectedIndex;

  if (sel.options[index].value != '') {

     if (targetstr == 'blank') {

       window.open(sel.options[index].value, 'win1');

     } else {

       var frameobj;

       if (targetstr == '') targetstr = 'self';

       if ((frameobj = eval(targetstr)) != null)

         frameobj.location = sel.options[index].value;

     }

  }

}

 
// -->

</script>

Et mon code pour ouvrir l'image:

<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

| Etre averti des réponses
| Alerter

Répondre à skhigh

cyrildu78

16 Décembre 2009 14: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 )

<html>
<head>
	<title>Nom de l'image</title>
	<script type="text/javascript">
	function retabli(urlimg)
	{
		var retabli = document.getElementById('image');
		retabli.src = urlimg;
	}
 
	function change(urlimg)
	{
		var change = document.getElementById('image');
		change.src = urlimg;
	}		
</script>
</head>
<body>
<img border="0" src="<a href="http://clip2net.com/clip/m25508/1260973841-clip-1kb.png" 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" 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" target="_blank">http://clip2net.com/clip/m25508/1260973841-clip-1kb.png</a>')" id="image">
</body>
</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

)

| Alerter

Répondre à cyrildu78

skhigh

16 Décembre 2009 20: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 ...

| Alerter

Répondre à skhigh

cyrildu78

16 Décembre 2009 23: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 :

<html>
<head>
	<title>Nom de l'image</title>
	<script type="text/javascript">
	function retabli(urlimg)
	{
		var retabli = document.getElementById('image');
		retabli.src = urlimg;
	}
 
	function change(urlimg)
	{
		var change = document.getElementById('image');
		change.src = urlimg;
	}		
</script>
</head>
<body>
<img border="0" src="1.jpg" alt="" onmouseover="change('1s.jpg')" onmouseout="retabli('1.jpg')" id="image">
</body>
</html>

| Alerter

Répondre à cyrildu78

Tom's guide dans le monde