js 实现图片位置定位

小弟目前在用PHP做一个简单的网站 
遇到了一个棘手的问题，就是页面上用JS加载了一个图片,用JS控制图片的放大，缩小，移动 
但是JS能不能实现在图片上定位呐？（可以假想成地图，点击不同区域就进入不同的页面） 
小弟在线等 
或者有没有别的方法实现，比如FLASH,FLEX，也可以，请赐教~~ 
万分感谢~

解决方案 »

  1.   

    参考http://www.w3school.com.cn/tiy/t.asp?f=html_areamap
      

  2.   


    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <title>test</title>
    <script src="../../lib/jquery/jquery-1.4.2.js"></script><script>
        $(document).ready(function(){
           $("#map").click(function(evt){
                alert("position:" + evt.clientX + "," + evt.clientY);
           })
        });
    </script>
    </head>
    <body>
        <div id="content">
            <img id="map" src="test.png">
        </div>
    </body>
    </html>
    利用点击的位置(clientX, clientY)，你可以把用户送到不同的网址。
      

  3.   

    用<area/>元素做
    1L给的连接例子不错
    http://www.w3school.com.cn/tiy/t.asp?f=html_areamap
      

  4.   


    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    <HTML>
    <HEAD>
    <TITLE> 窗体移动 </TITLE>
    <style type="text/css">
    A {
    text-decoration:none;
    }
    </style>
    <SCRIPT LANGUAGE="JavaScript">
    <!--
    //当前的宽度
    var curLeft = 0;
    //当前的高度
    var curTop = 0;
    //鼠标移动的X坐标
    var curClientX = 0;
    //鼠标移动的Y坐标
    var curClientY = 0;
    var curBool = false; //鼠标点击事件
    function show() {
    curLeft = document.getElementById("advShow").style.pixelLeft;
    curTop = document.getElementById("advShow").style.pixelTop;
    curClientX = event.clientX;
    curClientY = event.clientY;
    document.onmousemove = showDown;
    curBool = true;
    } //鼠标划过事件
    function showDown() {
    if (curBool) {
    var curX = event.clientX; //鼠标划过的X轴坐标
    var curY = event.clientY;//鼠标划过的Y轴坐标
    document.getElementById("advShow").style.pixelLeft = curLeft + (curX - curClientX);
    document.getElementById("advShow").style.pixelTop = curTop + (curY - curClientY);
    }
    }
    //-->
    </SCRIPT>
    </HEAD>
    <BODY>
    <div id="advShow" style="position:absolute;height:200px;width:200px;z-index:1;background-color:#0080FF;" onmouseup="curBool = false">
    <div style="height:20px;width:200px;text-align:right;background-color:#FF80FF;cursor:hand;" onmousedown="show()">
    </div>
    </div>
    </BODY>
    </HTML>