Menu
I’m developing the following code for zooming and draggin’ that works through
different web browsers such as opera FF IE and so on what I want is to customize my code to make zooming image in all direction: y-up,y-down,x-left,x-right all simultaneously. exactly like the folloing link
[url]http://jibbering.com/routeplanner/#
here is my code to be customized:
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN” “
<html lang=”en”>
<head>
<title>Dynamically Scaling Image Maps</title>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″>
<meta http-equiv=”imagetoolbar” content=”no”>
<style type=”text/css”>
.dragclass{
position : relative;
cursor : move;
}
</style>
<script type=”text/javascript”>
if (document.getElementById){
(function(){
if (window.opera){
document.write(“<input type=’hidden’ id=’Q’ value=’ ‘>”);
}
var n = 500;
var dragok = false;
var y,x,d,dy,dx;
function move(e){
if (!e) e = window.event;
if (dragok){
d.style.left = dx + e.clientX – x + “px”;
d.style.top = dy + e.clientY – y + “px”;
return false;
}
}
function down(e){
if (!e) e = window.event;
var temp = (typeof e.target != “undefined”)?e.target:e.srcElement;
if (temp.tagName != “HTML”|”BODY” && temp.className != “dragclass”){
temp = (typeof temp.parentNode != “undefined”)?temp.parentNode:temp.parentElement;
}
if (temp.className == “dragclass”){
if (window.opera){
document.getElementById(“Q”).focus();
}
dragok = true;
temp.style.zIndex = n++;
d = temp;
dx = parseInt(temp.style.left+0);
dy = parseInt(temp.style.top+0);
x = e.clientX;
y = e.clientY;
document.onmousemove = move;
return false;
}
}
function up(){
dragok = false;
document.onmousemove = null;
}
document.onmousedown = down;
document.onmouseup = up;
})();
}//End.
</script>
<script type=”text/javascript”>
function getMap(elImage) {
// Be sure a map is specified for the image.
if (null != elImage.getAttribute(‘usemap’)) {
// Remove the leading # from the bookmark.
var strMap = elImage.getAttribute(‘usemap’).substring(1);
// Return the element with the specified name.
return strMap;
}
return null;
}
function zoomImage(elImage, amount) {
// Expand the image the specified amount.
var elMap = getMap(elImage);
elImage.width *= amount;
elImage.height *= amount;
// If an image map is available, scale it too.
if (null != elMap) {
elMap=document.getElementsByName(elMap)[0];
for (var intLoop = 0; intLoop < elMap.areas.length; intLoop++) {
var elArea = elMap.areas[intLoop];
// Break the coordinates string into an array.
var coords = elArea.coords.split(“,”);
var scaledCoords = “”;
// Rebuild the new scaled string.
for (coord in coords) {
scaledCoords += (coords[coord] * amount) + “,”;
}
// Put the scaled coordinates back into the map.
elArea.coords = scaledCoords;
}
}
}
</script>
</head><BODY >
<DIV ID=”myDiv”
style=”margin-bottom: 600px;margin-top: 80px; margin-left: 300px; margin-right: 200px; text-align: center;BORDER-RIGHT: #ffffff 1px; BORDER-TOP: #ffffff 1px; Z-INDEX: 1; VISIBILITY: visible; overflow:hidden; BORDER-LEFT: #ffffff 1px; WIDTH: 200px; BORDER-BOTTOM: #ffffff 1px; POSITION:absolute; top:10px;right:50px; HEIGHT: 200px; BACKGROUND-COLOR: #ffffff; layer-background-color: #FFFFFF ; padding:0″ >
<IMG src=”places.gif” id=”img1″ class=”dragclass” onmousemove=”showPosition(event)” name=imageName usemap=”#map1″ width=”200″ height=”200″ border=”0″ >
</div>
<p>
<input value=”Zoom In” onclick=”zoomImage(document.getElementById(‘img1’), 2); ” id=”zoomin” type=”button”>
<input value=”Zoom Out” onclick=”zoomImage(document.getElementById(‘img1’), .5); ” id=”zoomout” type=”button”>
</p>
<p>
</body>
</html>