begin process at 2012 02 12 00:16:15
  Trouver un code source :
 
dans
 
[ Dernières recherches ]
Accueil > 

Code

 > 

Graphique

 > REDIMENSIONNER UNE IMAGE PAR DRAG/DROP GLISSEZ/DEPLACEZ

REDIMENSIONNER UNE IMAGE PAR DRAG/DROP GLISSEZ/DEPLACEZ


 Information sur la source

Note :
9,33 / 10 - par 3 personnes
9,33 / 10

  • 1

  • 2

  • 3

  • 4

  • 5

  • 6

  • 7

  • 8

  • 9

  • 10
Catégorie :Graphique Niveau :Initié Date de création :07/08/2003 Date de mise à jour :07/08/2003 10:59:59 Vu / téléchargé :11 313 / 1 033
Auteur : memiks

Ecrire un message privé
Commentaire sur cette source (4)
Ajouter un commentaire et/ou une note

 Description

permet de redimensionner une image en cliquant dessus et en déplaçant la sourie.

il fonctionne sous ie5,ns4.8 et ns7.02, je l'ai testé !!

Source

  • <HTML>
  • <HEAD>
  • <SCRIPT language="javascript" TYPE="text/javascript">
  • var ie4 = document.all;
  • var ns4 = document.layers;
  • var ns6 = ((!ie4)&&(document.getElementById));
  • var monCalque;
  • function init()
  • {
  • if(ns6)
  • {
  • document.addEventListener("mousedown",start, false); // on affecte une fonction à chaque evenement
  • document.addEventListener("mousemove",drag, false);
  • document.addEventListener("mouseup",drop, false);
  • }
  • else
  • {
  • if(ns4)
  • {
  • document.captureEvents(Event.MOUSEDOWN|Event.MOUSEMOVE|
  • Event.MOUSEUP) // on capture les evenements
  • }
  • document.onmousedown=start; // on affecte une fonction à chaque evenement
  • document.onmousemove=drag;
  • document.onmouseup=drop;
  • }
  • }
  • function start(e)
  • {
  • if (ns4)
  • {
  • monCalque=document.layers[e.target.name];
  • if(monCalque)
  • {
  • imsrc = e.target.src; // on recupere le nom de l'image
  • imname = e.target.name; // le nom de la balise <img>
  • imwidth = e.target.width; // sa taille initiale en X
  • imheight = e.target.height; // en Y
  • monCalque.X=monCalque.left; // sa place à gauche
  • monCalque.Y=monCalque.top; // sa place en haut
  • }
  • return false;
  • }
  • else if (ie4)
  • {
  • monCalque=event.srcElement.parentElement;
  • if(monCalque)
  • {
  • imsrc = event.srcElement.src;
  • imname = event.srcElement.name;
  • imwidth = event.srcElement.width;
  • imheight = event.srcElement.height;
  • monCalque.X=monCalque.style.left;
  • monCalque.X=monCalque.X.substring(0,monCalque.X.length-2); // on supprime px à la fin de la chaine
  • monCalque.Y=monCalque.style.top;
  • monCalque.Y=monCalque.Y.substring(0,monCalque.Y.length-2); // on supprime px à la fin de la chaine
  • }
  • }
  • else if (ns6)
  • {
  • monCalque=document.getElementById(e.target.name);
  • if(monCalque)
  • {
  • imsrc = e.target.src;
  • imname = e.target.name;
  • imwidth = e.target.width;
  • imheight = e.target.height;
  • monCalque.X=monCalque.style.left;
  • monCalque.X=monCalque.X.substring(0,monCalque.X.length-2);
  • monCalque.Y=monCalque.style.top;
  • monCalque.Y=monCalque.Y.substring(0,monCalque.Y.length-2);
  • }
  • }
  • }
  • function drag(e)
  • {
  • if(monCalque)
  • {
  • contenu = '<img name="'+imname+'" border="1px" src="dummy.gif" width="'+ imwidth; // dummy.gif pour une image vide.
  • contenu += 'px" height="'+ imheight +'"></img>'; // border=1px pour voir un cadre.
  • if (ns4)
  • {
  • imwidth = eval(e.pageX-monCalque.X); // on recupere la nouvelle taille en X
  • imheight = eval(e.pageY-monCalque.Y); // en Y
  • monCalque.document.open();
  • monCalque.document.write(contenu);
  • monCalque.document.close();
  • }
  • else if ((ie4)&&(monCalque.id))
  • {
  • imwidth = eval(event.clientX-monCalque.X); // on recupere la nouvelle taille en X
  • imheight = eval(event.clientY-monCalque.Y); // en Y
  • monCalque.innerHTML=contenu;
  • return false;
  • }
  • else if ((ns6)&&(monCalque.id))
  • {
  • imwidth = eval(e.clientX-monCalque.X); // on recupere la nouvelle taille en X
  • imheight = eval(e.clientY-monCalque.Y); // en Y
  • monCalque.innerHTML=contenu;
  • return false;
  • }
  • }
  • }
  • function drop(e)
  • {
  • if(monCalque)
  • {
  • contenu = '<img name="'+imname+'" src="'+ imsrc +'" width="'+ imwidth;
  • contenu += 'px" height="'+ imheight +'"></img>';
  • if (ns4)
  • {
  • monCalque.document.open(); // on ouvre puis on ecrit le document
  • monCalque.document.write(contenu);
  • monCalque.document.close();
  • monCalque=null;
  • }
  • else if ((monCalque.id)) // pour ie et ns>4
  • {
  • monCalque.innerHTML=contenu; // on ouvre puis on ecrit le document
  • monCalque=null;
  • return false;
  • }
  • }
  • }
  • </SCRIPT>
  • </HEAD>
  • <BODY>
  • <DIV id="dgo" z-index="auto" style="position:absolute;left:5;top:10" > <!-- position:absolute necessaire pour ns4 -->
  • <IMG name="dgo" src="irlande2.jpg" width="100px" height="101px"></DIV>
  • <DIV id="dgo2" z-index="auto" style="position:absolute;left:300;top:10" >
  • <IMG name="dgo2" src="irlande.jpg" width="102px" height="103px"></DIV>
  • <SCRIPT> init();</SCRIPT> <!-- déclenchement ------->
  • </BODY>
  • </HTML>
<HTML>
<HEAD>
<SCRIPT language="javascript" TYPE="text/javascript">

var ie4 = document.all;
var ns4 = document.layers;
var ns6 = ((!ie4)&&(document.getElementById));

var monCalque;

function init()
{
 if(ns6)
 {
   document.addEventListener("mousedown",start, false); // on affecte une fonction à chaque evenement
   document.addEventListener("mousemove",drag, false);
   document.addEventListener("mouseup",drop, false);
 }
 else
 {
   if(ns4)
   {
     document.captureEvents(Event.MOUSEDOWN|Event.MOUSEMOVE|
                          Event.MOUSEUP) // on capture les evenements
   }
   document.onmousedown=start; // on affecte une fonction à chaque evenement
   document.onmousemove=drag;
   document.onmouseup=drop;
 }
}

function start(e)
{
 if (ns4)
 {
   monCalque=document.layers[e.target.name];
   if(monCalque)
   {
   imsrc = e.target.src;  // on recupere le nom de l'image
   imname = e.target.name; // le nom de la balise <img>
   imwidth = e.target.width; // sa taille initiale en X
   imheight = e.target.height;                  // en Y
   monCalque.X=monCalque.left; // sa place à gauche
   monCalque.Y=monCalque.top; // sa place en haut
   }
   return false;
 }
 else if (ie4)
 {
   monCalque=event.srcElement.parentElement;
   if(monCalque)
   {
   imsrc = event.srcElement.src;
   imname = event.srcElement.name;
   imwidth = event.srcElement.width;
   imheight = event.srcElement.height;
   monCalque.X=monCalque.style.left;
   monCalque.X=monCalque.X.substring(0,monCalque.X.length-2); // on supprime px à la fin de la chaine
   monCalque.Y=monCalque.style.top;
   monCalque.Y=monCalque.Y.substring(0,monCalque.Y.length-2); // on supprime px à la fin de la chaine
   }
 }
 else if (ns6)
 {
   monCalque=document.getElementById(e.target.name);
   if(monCalque)
   {
   imsrc = e.target.src;
   imname = e.target.name;
   imwidth = e.target.width;
   imheight = e.target.height;
   monCalque.X=monCalque.style.left;
   monCalque.X=monCalque.X.substring(0,monCalque.X.length-2);
   monCalque.Y=monCalque.style.top;
   monCalque.Y=monCalque.Y.substring(0,monCalque.Y.length-2);
   }
 }
}
function drag(e)
{
if(monCalque)
 {
    contenu =  '<img name="'+imname+'" border="1px" src="dummy.gif" width="'+ imwidth;  // dummy.gif pour une image vide.
    contenu += 'px" height="'+ imheight +'"></img>';                                    // border=1px pour voir un cadre.
  if (ns4)
  {
   imwidth = eval(e.pageX-monCalque.X);  // on recupere la nouvelle taille en X
   imheight = eval(e.pageY-monCalque.Y);                                // en Y
   monCalque.document.open();
   monCalque.document.write(contenu);
   monCalque.document.close();
  }
  else if ((ie4)&&(monCalque.id))
  {
   imwidth = eval(event.clientX-monCalque.X);  // on recupere la nouvelle taille en X
   imheight = eval(event.clientY-monCalque.Y);                                // en Y
    monCalque.innerHTML=contenu;
   return false;
  }
  else if ((ns6)&&(monCalque.id))
  {
   imwidth = eval(e.clientX-monCalque.X);   // on recupere la nouvelle taille en X
   imheight = eval(e.clientY-monCalque.Y);                                 // en Y
    monCalque.innerHTML=contenu;
   return false;
  }
 }
}

function drop(e)
{
if(monCalque)
 {
    contenu =  '<img name="'+imname+'" src="'+ imsrc +'" width="'+ imwidth;
    contenu += 'px" height="'+ imheight +'"></img>';

  if (ns4)
  {
   monCalque.document.open(); // on ouvre puis on ecrit le document
   monCalque.document.write(contenu);
   monCalque.document.close();
   monCalque=null;
  }
  else if ((monCalque.id))  // pour ie et ns>4
  {
   monCalque.innerHTML=contenu;  // on ouvre puis on ecrit le document
   monCalque=null;
   return false;
  }
 }
}
</SCRIPT>
</HEAD>

<BODY>
<DIV id="dgo" z-index="auto" style="position:absolute;left:5;top:10" > <!-- position:absolute necessaire pour ns4 -->
 <IMG name="dgo" src="irlande2.jpg" width="100px" height="101px"></DIV>
<DIV id="dgo2" z-index="auto" style="position:absolute;left:300;top:10" >
 <IMG name="dgo2" src="irlande.jpg" width="102px" height="103px"></DIV>
<SCRIPT> init();</SCRIPT>     <!--  déclenchement  ------->
</BODY>

</HTML>


 Fichier Zip

Les Membres Club peuvent télécharger directement un fichier contenu dans le zip sans télécharger le zip en entier !

Télécharger le zip


 Sources du même auteur

Source avec Zip Source avec une capture POPUP POUR CHOISIR LE STYLE D'UN TEXTE (COULEUR, GRAS, CENTR...
Toutes les sources de memiks

 Sources de la même categorie

Source avec Zip Source avec une capture EFFET DE ROTATION A 360° D'IMAGE AVEC ACCELERATION DECELERAT... par kazma
Source avec Zip Source avec une capture PETIT LOGICIEL DE DESSIN, RETOUCHE AVEC CANVAS par kazma
Source avec Zip Source avec une capture CALCULATRICE HEURE par m22001111
Source avec Zip Source avec une capture DRAG & DROP VERS UN CANVAS par kazma
Source avec Zip ROTATION D'UNE IMAGE, ANIMATION par william voirol
Toutes les sources de la catégorie Graphique

Commentaires et avis

Commentaire de leris le 01/09/2003 09:26:29

bonjour,
est-t'il possible de conserver le ratio de l'image en l'agrandissant ?
ce serait assez genial .
merci.

Commentaire de attarte le 09/10/2004 18:06:05

Le code fonctionne très bien... serai-il possible de récupérer les dimensions de l'image après modification ?
en les écrivant sous l'image par exemple ?
merci

Commentaire de memiks le 09/10/2004 19:19:57

pour afficher la taille de l'image il suffit de modifier la fonction drop :
on change contenu par :

contenu =  '<img name="'+imname+'" src="'+ imsrc +'" width="'+ imwidth;
contenu += 'px" height="'+ imheight +'"></img>';
contenu += 'width='+ imwidth +'px  height='+ imheight;

Voila.

pour garder le ratio il suffit de faire un coefficient à la fin de la fonction start :

coeff = imheight / (imwidth * 1.0);

puis on modifit la fonction drop et plus particuliérement contenu :

contenu =  '<img name="'+imname+'" src="'+ imsrc +'" width="'+ imwidth;
contenu += 'px" height="'+ imheight +'"></img>';
contenu += 'width='+ imwidth +'px  height='+ imwidth*coeff;

Voila !! @++ Mémîks

Commentaire de attarte le 10/10/2004 11:49:18

OK, nickel ! Je suis en train de rajouter la possibilité d'afficher la taille dans deux champs d'un formulaire afin de l'enregistrer dans une table d'une base access...
merci !

 Ajouter un commentaire

Nos sponsors


Sondage...

Comparez les prix


Acer Liquid (noir) (XP.H480Q.013)
Entre 300€ et 346€

Visiter le guide achat

CalendriCode

Février 2012
LMMJVSD
  12345
6789101112
13141516171819
20212223242526
272829    

Consulter la suite du CalendriCode
 
Développement réalisé par Nicolas SOREL (Nix) avec l'aide de : Cyril DURAND et Emmanuel (EBArtSoft), Merci à Vincent pour ses précieux conseils.
CodeS-SourceS.com© Toute reproduction même partielle est interdite sauf accord écrit du Webmaster
CodeS-SourceS.com© est une marque déposée tous droits réservés

Google Coop CodeS-SourceS Google Coop CodeS-SourceS
Temps d'éxécution de la page : 0,624 sec (4)

Nous contacter | Annoncer sur CodeS-SourceS | Mentions légales
Outils Convertisseur VB/C# Snippets et scripts Outils en ligne La ToolBox
Communauté Programmation Photographie Technologie Newsgroups Emploi Forum Blogs
Guide d'achat Téléphonie mobile Image et son Informatique Bureautique Jeux vidéo
Logiciels Internet & Réseau Développement Market Android Jeux & Loisirs Graphisme Multimédia Sécurité Pilotes
Loisirs Cartes virtuelles Vidéos droles Jeux en ligne Géoguide AndroLib (Android Market)