| Accueil | table JavaScript | index JavaScript | précédent | suivant |

Exemple - tirer une image par le curseur

Ce script permet de tirer l'image par le curseur en appuyant sur le bouton de la souris. Cette action est interprétée par défaut par les navigateurs comme une sélection de la zone survolée ce qui empêche le script de fonctinner. Il faut donc annuler cette action par défaut en employant la fonction event.preventDefault(). Elle peut ne pas fonctionner avec certaines versions d'Internet Exporer qui utilise la séquence event.returnValue=false;. L'emploi combiné des deux méthodes permet de couvrir la plupart des versions existantes de tous le navigateurs.

Ces méthodes sont à employer toutes les fois que l'on veut annuler l'action implicite du navigateur (par exemple empêcher l'envoi d'un formulaire par le bouton submit).

Le script utilise tous les événements liés au curseur.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>Titre de cette page : exemple16</title>
<meta name="description" content="site http://www.construireunsite.fr" />
<meta name="keywords" content="mot1 mot2, mot3 mot4 mot5, mot6" />
<link rel="stylesheet" type="text/css" href="Jstyle07.css" />

<script type="text/javascript">
var C1top=10; // position du cadre1
var C1left=150;
var C1width=600; // dimensions du cadre1
var C1height=50;
var C2top=60;
var C2height=500;
var status="stop";
var xmouse, ymouse;
var image;
var ximage=15;
var yimage=15;
var dx, dy, xpos, ypos, newx, newy;
var imageWidth=80;
var imageHeight=80;

function Down(e)
{

status="moving";
xmouse=e.clientX;
ymouse=e.clientY;
// annuler l'action par défaut du navigateur
e.returnValue = false;
e.preventDefault();

}

function Down1(e)
{

// annuler l'action par défaut du navigateur
e.preventDefault();
e.returnValue = false;

}

function Up()
{
status="stop";
}

function Move(e)
{

if(status != "stop")
{

// déplacer l'image
dx=e.clientX-xmouse;
dy=e.clientY-ymouse;
xmouse=e.clientX;
ymouse=e.clientY;

newx=ximage+dx;
if(newx < 15) {newx=15;}
if(newx > (C1width-imageWidth-15)) {newx=C1width-imageWidth-15;}
ximage=newx;

newy=yimage+dy;
if(newy > (C2height-imageHeight-15)) {newy=C2height-imageHeight-15;}
if(newy < 15) {newy=15;}
yimage=newy;

image=document.getElementById("imageD");
xpos=ximage.toString().concat("px");
ypos=yimage.toString().concat("px");
image.style.left=xpos;
image.style.top=ypos;

}

}

function Move1(e)
{

// annuler l'action par défaut du navigateur
e.preventDefault();
e.returnValue = false;

}

function Over(image)
{

image.style.cursor="pointer";

}

</script>

</head>

<body onmouseup="Up()" onmousedown="Down1(event)" onmousemove="Move1(event)">
<!-- Jscript16 -->
<div id="cadre1">
<p class="texte1">Tirez l'image en appuyant sur le bouton gauche</p>
</div>

<div id="cadre2">
<div id="imageD" onmousedown="Down(event)" onmouseout="Up()" onmouseover="Over(this)" onmousemove="Move(event)">
<img src='V037.jpg' alt='image' />
</div>
</div>

<script type="text/javascript">
var cadre1=document.getElementById("cadre1");
cadre1.style.top=C1top.toString().concat("px"); // positionner le cadre
cadre1.style.left=C1left.toString().concat("px");
cadre1.style.width=C1width.toString().concat("px");
cadre1.style.height=C1height.toString().concat("px");

var cadre2=document.getElementById("cadre2");
cadre2.style.top=C2top.toString().concat("px"); // positionner le cadre
cadre2.style.left=C1left.toString().concat("px");
cadre2.style.width=C1width.toString().concat("px");
cadre2.style.height=C2height.toString().concat("px");

var image=document.getElementById("imageD");
xpos=ximage.toString().concat("px");
ypos=yimage.toString().concat("px");
image.style.left=xpos;
image.style.top=ypos;
</script>

</body>
</html>


Afficher cette page



suivant