如何利用javascript实现JPG图片的在线标注_IT百科

鼠标在图片上点击时,用event.clientX和event.clientY取得点击的坐标,

再动态向<map>添加一个<area>

把鼠标分别放到图片的左上角和中间,是不是你要的效果?

<body>

<area

shape="circle"

coords="50,50,15"

href ="#"

target ="_blank" alt="x:50,Y:50,半径:15" />

<area

shape="rect"

coords="0,0,15,15"

href ="http://www.baidu.com"

target ="_blank"

alt="跳至百度" />

</map>

</body>

var i=0,div=document.getElementsByTagName("div")[0]

function addimg(){

var input=document.createElement("input")//创建input

input.setAttribute("type","file")//设置type属性

input.setAttribute("name","a"+(++i))//设置name属性

div.appendChild(input)//插入到div内

}

</script>

js点击事件原图片替换‘钩’图片

function click(){

document.getElementById('id').src='b.jpg'

}

</script>

a.jpg原图片b.jpg‘钩’图片

欢迎分享，转载请注明来源：内存溢出

如何利用javascript实现JPG图片的在线标注