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

Exemple - déplacer une image

Le script suivant amène l'image affichée sur le point que l'on a cliqué. L'image est confinée dans un cadre dont les dimensions sont définies par le script lors du chargemenr de la page. Le script utilise la fonction getElementById et les événements onclick et onmousemove.


/* feuille de style Jstyle07 */

h2
{
font-size : 12pt;
color : rgb(100,0,0);
text-align : center;
}

#cadre1
{
position : absolute;
top : 10px;
left : 150px;
width : 600px;
height : 50px;
background-color : rgb(255,245,230);
font-family : Verdana;
font-size : 10pt;

}

#cadre2
{
background-color : rgb(245,255,230);
position : absolute;
top : 50px;
left : 150px;
width : 600px;
height : 600px;
font-family : Verdana;
font-size : 10pt;

}

.texte1
{
margin-top : 20px;
margin-left: 20px;
margin-right : 20px;
color : rgb(150,20,20);
text-align : center;
}

.texte2
{
margin-top : 20px;
margin-left: 20px;
margin-right : 20px;
color : rgb(20,80,20);
}

#imageD
{
position : absolute;
}

<!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 : exemple15</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">
// variables globales
var status="off";
var C1top=10; // position du cadre1
var C1left=150;
var C1width=500; // dimensions du cadre1
var C1height=50;
var C2top=60;
var C2height=500;
var status="stop";
var xmouse;
var ymouse;
var ximage=15;
var yimage=15;
var imageWidth=80;
var imageHeight=80;

function cursor(e) // autoriser le déplacement et afficher le curseur
{

var cadre=document.getElementById("cadre2");
xmouse=e.clientX;
ymouse=e.clientY;
if
(

(xmouse > (C1left+15)) &&
(xmouse < (C1left+C1width-imageWidth-15)) &&
(ymouse > (C2top+15)) &&
(ymouse < (C2top+C2height-imageHeight-15)))

{

cadre.style.cursor="pointer";
status="on";

}
else
{

cadre.style.cursor="default";
status="off";

}

}

function Move(e) // déplacer l'image
{

if(status == "on")
{

ximage=e.clientX-C1left;;
yimage=e.clientY-C2top;
var image=document.getElementById("imageD");
xpos=ximage.toString().concat("px");
ypos=yimage.toString().concat("px");
image.style.left=xpos;
image.style.top=ypos;

}

}
</script>

</head>

<body onclick="Move(event)" onmousemove="cursor(event)">
<!-- Jscript15 -->
<div id="cadre1">
<h2>Déplacer une image sur le click</h2>
</div>

<div id="cadre2" >
<div id="imageD" >
<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 1
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 2
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"); // positionner l'image
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