function savepic(o){
pic=window.open(o.src,"demo")
setTimeout('pic.document.execCommand("saveas")',0)
}
</script>
<iframe name=demo style="display:none"></iframe>
<img src="图片" style="cursor:pointer" alt="点击下载" border="0" onclick="savepic(this)/>
你的意思是用canvas2D绘制是吧?实际上,拿canvas2D绘制,只是把image渲染到 canvas(画布上).而实际的事件,就不能像标签那么处理,应该对canvas的事件做处理.
实现逻辑是这样:
1,添加事件监听,比如说,鼠标按下 做什么,滑动 做什么,弹起做什么.一般鼠标事件都是判断弹起的位置
2,判断有效坐标,在事件中判断坐标位置是否在图片位置,也就是图片在canvas的位置.
ex:
//some code...
canvas.width=400
canvas.height=400
var context2d = canvas.getContext("2d")
var img =new Image()
img.src="xxx/xxx.png"
img.onload=function(){
context2d.drawImage(img,X,Y,WIDTH,HEIGTH)
//X=0,Y=0,W=50,H=50
canvas.addEventListener("mouseup", keyUp, false)
}
function keyUp(evt){
Event_UpX = evt.offsetX
Event_UpY = evt.offsetY
if(Event_UpX>=绘制坐标X&&Event_UpX<=图片宽度){
if(Event_UpY>=绘制坐标Y&&Event_UpY<=图片高度){
//do something
}
}
}
本身就能实现的，style="cursor:pointer"这就是实现你的需求。只是需要点击图片弹出ok的话做以下调整：onclick="javascript:alert('ok')"。需要加上javascript:<div class="hexagon_father">
<div class="hexagon_child">
<div class="hexagon_childchild">
<img src="forest.png" style="cursor:pointer" onclick="javascript:alert('ok')">
</div>
</div>
</div>
