Objet amovible dans une page HTML (DHTML)

Language :  Javascript + DHTML
Compatibilité :  
FireFox : Toutes versions
Mozilla : 1 et +
Internet Explorer : 5 et +
Netscape Navigator : 6 et +

 
Objectif :   

Le but est d'avoir des éléments que le visiteur peut déplacer dans la page web. Ici une image, l'utilsateur pour placer l'image "Lo Valvo.ch" ou il le désire dans la page.

Source à placer dans un fichier : dhtml_move.js
 

document.write('<style type="text/css"> A.ejsmenu { color:#000000;text-decoration:none } </style>')
document.write('<DIV id=menu_dep STYLE="position:absolute; top:10; left:10"><TABLE BORDER=0 CELLPADDING=1 CELLSPACING=2 WIDTH=150>')
document.write('<TR><TD onMouseDown="testClick()" onMouseUp="testClick2()" style="cursor:move"><img src="http://www.lovalvo.net/resserver.php?blogId=1&resource=logo.gif" border="0"></TD></TR>')
document.write('</TR><TR></TR></TABLE></DIV>')

clickOui = false;
bloc_x = 10;
bloc_y = 10;

function testClick() {
base_x = x-bloc_x;
base_y = y-bloc_y;
clickOui=true;
}
function testClick2() {
clickOui=false;
}

function get_mouse(e)
{
x = (navigator.appName.substring(0,3) == "Net") ? e.pageX : event.x+document.body.scrollLeft;
y = (navigator.appName.substring(0,3) == "Net") ? e.pageY : event.y+document.body.scrollTop;
if(clickOui && document.getElementById)
{
bloc_x = x-base_x;
bloc_y = y-base_y;
}
document.getElementById("menu_dep").style.left = bloc_x
document.getElementById("menu_dep").style.top = bloc_y
}
if(navigator.appName.substring(0,3) == "Net")
document.captureEvents(Event.MOUSEMOVE);
document.onmousemove = get_mouse;

 
Code à placer après le <body>
<script language="JavaScript" src="dhtml_move.js"></script>
 

Publié le 04 Octobre 2005 par luca | Ecouter l'article

Publié dans : Programmation

Accueil Précédent Suivant