HTML单击图片响应事件

<script>

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,添加事件监听,比如说,鼠标按下 做什么,滑动 做什么,d起做什么.一般鼠标事件都是判断d起的位置

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"这就是实现你的需求。只是需要点击图片d出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>

---