Imprimer la Page

Forum-webmaster

Technique - programmation => Javascript / DOM / Ajax => Message commencé par: Vicolaships le le 08-01-2013 a 22:28:01

Titre: Bidouillage javascript
Posté par: Vicolaships le le 08-01-2013 a 22:28:01

Salut,

J'ai aucune connaissances en HTML/javascript/jQuerry je sais à peine ce que c'est.

J'ai réussi à faire un utilitaire pour comparer des photos en ligne avec des bouts de code glanés sur le web, je reste coincé sur une dernière fonctionnalité.

Cliquer ici pour voir de quoi il s'agit (http://vicopsp.free.fr/photo/)

On bouge simplement la souris pour comparer les deux images
Les boutons en haut à droite doivent servir à changer l'image retouchée (en gardant l'image originale telle quelle)

Seulement je coince j'ai pas réussi à changer quoique ce soit ! Voici mon code :

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Comparateur de photos</title>

<style type="text/css">

body {
color:black;
background-color:#333;
}

.avant_apres {
overflow: hidden;
display: block;
clear: both;
width: 900px;
height: 675px;
}
.avant_apres > div {
display: block;
min-width: 0px;
max-width: 900px;
height: 675px;
position: relative;
top: 0;
left: 0;
background-repeat: no-repeat;
}
.avant_apres .avant {
float: right;
background-position: right top;
}
.avant_apres .apres {
background-position: left top;
}

</style>

<script type="text/javascript">

   var souris_x;

   document.onmousemove=function(event)
   {
      ev = event || window.event;
      souris_x = ev.pageX;
   }

   function avant_apres(objet)
   {
      var divisions = objet.getElementsByTagName('div');

      for(i=0;i<divisions.length;i++)
      {
         if(divisions.className=='avant') var avant = divisions;
         if(divisions.className=='apres') var apres = divisions;
      }

      apres.style.width = souris_x - positionX(objet);
      avant.style.width = positionX(objet) + 900 - souris_x ;
   }

   function positionX(objet)
   {
var x = objet.offsetLeft || 0;
while (objet = objet.offsetParent) x += objet.offsetLeft;
return x;
   }

function changeImage1()
{
var v = "apres1.jpg"
var z = new Image();
z.src = v;
document.avant_apres.apres.background = z.src;
}

function changeImage2()
{
var v = "apres2.jpg"
var z = new Image();
z.src = v;
document.avant_apres.apres.background = z.src;
}

function setImage()
{
   var z = new Image();
   z.src = "apres.jpg";
   document.avant_apres.apres.background = z.src;
}
window.onload=setImage;

</script>
</head><body>
<div class="avant_apres" onmousemove="avant_apres(this)">
<div class="avant" style="background-image: url(avant.jpg); width: 450px;"> </div>
<div class="apres" style="background-image: url(apres1.jpg); width: 450px;"> </div>
</div>

<div style="position: fixed; left: 950px; top: 20px;">
<input onclick="changeImage1()" value="Retouche 1" type="button"></div>
<div style="position: fixed; left: 950px; top: 60px;">
<input onclick="changeImage2()" value="Retouche 2" type="button"></div>

</body></html>

J'imagine que cette ligne là est fausse :
document.avant_apres.apres.background = z.src;

Si quelqu'un avait la gentillesse de me donner un coup de pouce ça serait super :)

Titre: Re:Bidouillage javascript
Posté par: Vicolaships le le 13-01-2013 a 16:12:01

J'ai essayé d'autres choses, comme :

Code:

function changeImage1()
{
/*document.body.style background = "#000000 url(apres3.jpg) no-repeat";*/
document.body.style.background="#00F5F0";
avant.style.background="url(apres3.jpg)";
apres.style.background="url(apres3.jpg)";

}

Mais ca ne marche pas, quelqu'un veut bien m'aider ?