codice:
<html>
<head>
<TITLE>Drag-and-Drop Example</TITLE>
<SCRIPT LANGUAGE="JavaScript">
var isNav, isIE
var offsetX, offsetY
var selectedObj
var posbarre_x = 510
var posbarre_y = 50
var poscurseur_y = posbarre_y + 10
var scalaTop = posbarre_y + 10
var scalaBottom = posbarre_y + 270
var scalawidth = scalaBottom - scalaTop
var poscurseur_x = posbarre_x
if (parseInt(navigator.appVersion) >= 4) {
if (navigator.appName == "Netscape") {
isNav = true
} else {
isIE = true
}
}
function setZIndex(obj, zOrder) {
obj.zIndex = zOrder
}
function shiftTo(obj, x, y) {
// Control of over-scrolling
if (y<=scalaTop) {y=scalaTop}
if (y>=scalaBottom) {y=scalaBottom}
if (isNav)
{
// Scrolling code for Navigator
obj.moveTo(y,poscurseur_x)
document.layers["contenu"].top = 2 * (posbarre_y) - y + 20;
document.layers["contenu"].clip.bottom = 293 + y - posbarre_y - 20;
document.layers["contenu"].clip.top = -posbarre_y + y - 20;
document.close()
}
else
{
// Scrolling code for Internet Explorer
obj.pixelTop = y;
obj.pixelBottom = poscurseur_y;
// document.all["contenu"].style.top = 2 * (posbarre_y) - y + 20;
document.all["contenu"].style.top = 2 * (posbarre_y) - y + 20;
// Order of rect coordinates: top right bottom left
ev = 'rect('+eval(-posbarre_y + y - 20)+'px 460px '+eval(300)+'px 0px)';
document.all["contenu"].style.clip = ev;
}
}
function setSelectedElem(evt) {
if (isNav) {
var testObj
var clickX = evt.pageX
var clickY = evt.pageY
for (var i = document.layers.length - 1; i >= 0; i--) {
testObj = document.layers[i]
if ((clickX > testObj.left) &&
(clickX < testObj.left + testObj.clip.width) &&
(clickY > testObj.top) &&
(clickY < testObj.top + testObj.clip.height) && (testObj.name=="curseur")) {
selectedObj = testObj
setZIndex(selectedObj, 100)
return
}
}
} else {
var imgObj = window.event.srcElement
if (imgObj.parentElement.id.indexOf("curseur") != -1) {
selectedObj = imgObj.parentElement.style
setZIndex(selectedObj,100)
return
}
}
selectedObj = null
return
}
function dragIt(evt) {
if (selectedObj) {
if (isNav) {
shiftTo(selectedObj, (evt.pageX - offsetX), (evt.pageY - offsetY))
} else {
shiftTo(selectedObj, (window.event.clientX - offsetX), (window.event.clientY - offsetY))
return false
}
}
}
function engage(evt) {
setSelectedElem(evt)
if (selectedObj) {
if (isNav) {
offsetX = evt.pageX - selectedObj.left
offsetY = evt.pageY - selectedObj.top
} else {
offsetX = window.event.offsetX
offsetY = window.event.offsetY
}
}
return false
}
function release(evt) {
if (selectedObj) {
setZIndex(selectedObj, 0)
selectedObj = null
}
}
function setNavEventCapture() {
if (isNav) {
document.captureEvents(Event.MOUSEDOWN | Event.MOUSEMOVE | Event.MOUSEUP)
}
}
function init() {
if (isNav) {
document.barre.left = posbarre_x
document.barre.top = posbarre_y
document.curseur.left = poscurseur_x
document.curseur.top = poscurseur_y
setNavEventCapture()
}
if (isIE) {
document.all.barre.style.posLeft = posbarre_x
document.all.barre.style.posTop = posbarre_y
document.all.curseur.style.posLeft = poscurseur_x
document.all.curseur.style.posTop = poscurseur_y
}
document.onmousedown = engage
document.onmousemove = dragIt
document.onmouseup = release
}
</SCRIPT>
<style type="text/css">
#barre {position:absolute;left:-2000;top:50;}
#curseur {position:absolute;left:-2000;top:50;}
.texte
{
font-size: 8pt;
color: white;
font-family: verdana,arial
}
</STYLE>
</HEAD>
<BODY bgcolor="#000000" onLoad="init()">
<DIV ID="barre">[img]barra.gif[/img]</DIV>
<DIV ID="curseur">[img]valigia.gif[/img]</DIV>
<div class="texte" ID="contenu" style="position:absolute; left:50px; top:50px; width:460px; height:300px; background-color: #0088CA; layer-background-color: #0088CA; border: 1px none #000000; padding: 3px;clip:'rect(0px 460px 300px 0px)'">
[img]dhtml-a07-im1.gif[/img]
Internet is, first and foremost, a network. In computer science,
a network is a mesh of interconnected computers.
These computers and their users (you
for instance!) can exchange data. The
transmitted data can be text, sound,
videos, etc...
Internet is, first and
foremost, a network. In computer science,
a network is a mesh of interconnected computers.
These computers and their users (you
for instance!) can exchange data. The
transmitted data can be text, sound,
videos, etc...Internet is, first and
foremost, a network. In computer science,
a network is a mesh of interconnected computers.
These computers and their users (you
for instance!) can exchange data. The
transmitted data can be text, sound,
videos, etc...Internet is, first and
foremost, a network. In computer science,
a network is a mesh of interconnected computers.
These computers and their users (you
for instance!) can exchange data. The
transmitted data can be text, sound,
videos, etc...Internet is, first and
foremost, a network. In computer science,
a network is a mesh of interconnected computers. These computers and their users
(you for instance!) can exchange data. The transmitted data can be text, sound,
videos, etc...Internet is, first and foremost, a network. In computer science,
a network is a mesh of interconnected computers. These computers and their users
(you for instance!) can exchange data. The transmitted data can be text, sound,
videos, etc...Internet is, first and foremost, a network. In computer science,
a network is a mesh of interconnected computers. These computers and their users
(you for instance!) can exchange data. The transmitted data can be text, sound,
videos, etc...</div>
</BODY>
</HTML>