html5图片点击,html浏览图片按钮

小程序：扫一扫查出行
【扫一扫了解最新限行尾号】
复制小程序

点击图片就能浏览的超链接HTML5怎么写？

使用HTML map标签，给图片设置热点（指定的要添加链接的地方）

例子：

img src="planets.jpg" border="0" usemap="#planetmap" alt="Planets" border="0" /

map name="planetmap" id="planetmap"

area shape="circle" coords="180,139,14" href ="venus.html" style="cursor: pointer" alt="Venus" /

area shape="circle" coords="129,161,10" href ="mercur.html" alt="Mercury" /

area shape="rect" coords="0,0,110,260" href ="sun.html" alt="Sun" /

/map

关于例子的解释：

area 元素永远嵌套在 map 元素内部。area 元素可定义图像映射中的区域。

img中的 usemap 属性可引用 map 中的 id 或 name 属性（取决于浏览器），所以应同时向 map 添加 id 和 name 属性。

x1,y1,x2,y2

如果 shape 属性设置为 "rect"，则该值规定矩形左上角和右下角的坐标。

x,y,radius

如果 shape 属性设置为 "circ"，则该值规定圆心的坐标和半径。

x1,y1,x2,y2,..,xn,yn

如果 shape 属性设置为 "poly"，则该值规定多边形各边的坐标。如果第一个坐标和最后一个坐标不一致，那么为了关闭多边形，浏览器必须添加最后一对坐标。

HTML5 中创建图片点击热点区域时怎么知道那个区域在哪

图片热点区域中，rect 矩形区域，使用2个做点来确定具体位置和大小。

shape="rect"

coords="x1,y1,x2,y2"

以图片的左上角为坐标原点，矩形的左上角坐标x1,y1和矩形的右下角坐标x2,y2来确定具体位置和大小。

结合具体的代码来解释

coords="0,0,110,260"

0,0就是矩形的左上角坐标

该点距离图片的左上角横向距离为0

该点距离图片的左上角纵向距离为0

110,260就是矩形的右下角坐标

该点距离图片的左上角横向距离为110

该点距离图片的左上角纵向距离为260

图示

html5 中请问如何实现在一张图片上点击不同的位置实现不同的点击事件

div

img src="" width=""/

a class="a1"/a

a class="a2"/a

/div

给div相对定位，给a1，a2绝对定位，要点哪儿就定到哪儿

用html5 +css实现点击之后让图片自己一点点的从点击的地方完全移出显示的效果怎么做急！

这种效果很简单的，得用js或jquery实现，纯html+css不容易实现，即便你用html5实现，一般到实战情况下也是用不到的，没个卵用，以下是jquery实现

style type="text/css"

.dianji{width:300px;height:300px;border:solid 1px green;overflow:hidden;}

.dianji img{display:none;}

/style

div class="dianji"img src="1.jpg" //div

script src="引入jquery" type="text/javascript"/script

script type="text/javascript"

$(".dianji").click(function(){

$(".dianji img").fadeIn(5000);

});

/script

HTML5 Canvas 鼠标点击到图片时进行操作

!doctype html

html

head/head

body

canvas id="canvas" width="500" height="500" style = "border:1px solid red"/canvas

script

var rect={x:100,y:100,w:40,h:20};//定义要画的矩形的位置属性

var canvas=document.getElementById('canvas');

var cxt=canvas.getContext('2d');

cxt.fillRect(rect.x,rect.y,rect.w,rect.h);//绘制矩形

canvas.onclick=function(e){//给canvas添加点击事件

e=e||event;//获取事件对象

//获取事件在canvas中发生的位置

var x=e.clientX-canvas.offsetLeft;

var y=e.clientY-canvas.offsetTop;

//如果事件位置在矩形区域中

if(x=rect.xx=rect.x+rect.wy=rect.yy=rect.y+rect.h){

a href=";tn=44039180_cprfenlei=mv6quAkxTZn0IZRqIHckPjm4nH00T1dBnHm3mWbLP1bkuWmLmHKb0ZwV5Hcvrjm3rH6sPfKWUMw85HfYnjn4nH6sgvPsT6KdThsqpZwYTjCEQLGCpyw9Uz4Bmy-bIi4WUvYETgN-TLwGUv3ErHn3n1c1nj04nW64n1cLnHnz" target="_blank" class="baidu-highlight"window.open/a('链接地址');//打开指定链接

}

/script

/body

/html