Bidouillage javascript - Forum Javascript / DOM / Ajax

La Communauté Webmaster

  Forum-webmaster
  Technique - programmation
  Javascript / DOM / Ajax (Modérateurs: Shain, Netah, Lilian, lauryv, ToToMaStEr)
  Bidouillage javascript

« Précédent Suivant »

Pages: [1]

Auteur

Sujet: Bidouillage javascript (Lu 2343 fois)

Bidouillage javascript
« sur: le 08-01-2013 a 22:28:01 »

Vicolaships
Membre récent

Hors-Ligne

Messages: 2

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

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[i].className=='avant') var avant = divisions[i];
         if(divisions[i].className=='apres') var apres = divisions[i];
      }

      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

« Dernière Édition: le 08-01-2013 a 22:30:34 par Vicolaships »

Rapporter au modérateur

Re:Bidouillage javascript
« Répondre #1 sur: le 13-01-2013 a 16:12:01 »

Vicolaships
Membre récent

Hors-Ligne

Messages: 2

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 ?