Ну вот есть у меня пример один. как заменить вместо квадрата
<a href="URL">...</a> ну или привязать к квадрату
<html>
<head>
<IMG SRC=1.jpg>
<title>drag</title>
<style>
#obj01 {
width: 100px;
height: 100px;
border: solid 1px gray;
background-color: white;
position: absolute;
}
</style>
<script type="text/javascript" charset="utf-8">
var dragObject;
var offsetX, offsetY;
var isDragging = false;
window.onload = init;
document.onmousemove = mouseMove;
document.onmouseup = mouseUp;
function init() {
var o = document.getElementById("obj01");
o.ondrag = function() { return false; };
o.onselectstart = function() { return false; };
o.style.left = "100px";
o.style.top = "100px";
o.style.display = "block";
}
function mouseDown(o, e) {
dragObject = o;
if(window.event) e = window.event;
var oX = parseInt(dragObject.style.left);
var oY = parseInt(dragObject.style.top);
var mouseX = e.clientX;
var mouseY = e.clientY;
offsetX = mouseX - oX;
offsetY = mouseY - oY;
isDragging = true;
return false;
}
function mouseMove(e) {
if(!isDragging) return;
if(window.event) e = window.event;
var mouseX = e.clientX;
var mouseY = e.clientY;
var newX = mouseX - offsetX;
var newY = mouseY - offsetY;
dragObject.style.left = newX + "px";
dragObject.style.top = newY + "px";
return false;
}
function mouseUp() {
if(!isDragging) return;
isDragging = false;
return false;
}
</script>
</head>
<body>
<div id="obj01" onmousedown="javascript:mouseDown(this, event)"></div>
</body>
</html>