<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div onclick="ctrl()" style="height:40pxwidth:40pxbackground-color:blue"></div>
<audio id="audio" src="游戏原声-She.mp3" style="display:none">
您的浏览器不支持 audio 标签。
</audio>
<script>
var audio=document.getElementById('audio')
var s=0
function ctrl () {
if(s==0){
audio.play()
s=1
}else{
audio.pause()
s=0
}
}
</script>
</body>
</html>这是html5的例子 如果其他播放器 类似去调用api就行
1、下载名叫 Dreamweave 的软件（网上很多 自行百度）2、创建 HTML 文档
3、将图片插入 html 代码中
4、点击 左上角的“设计”按钮
5、这时候会看到图片预览图 ， 然后鼠标点击图片（选中状态会出现黑色边框） 然后 按 “ctrl+F3” 调出属性面板（注：此时属性栏链接地址为整张图片链接地址，图片上面加链接看第六步骤）
6、制作热点链接 左下角选择对应热点形状，绘制热点，用最左边的箭头可以选中热点拖拽位置，属性面板会出现当前选中热点的属性，链接地址，打开方式等
7、点击菜单栏 文件---保存，然后点击“设计”按钮左边的“代码”按钮 看到的body标签内部的就是热点的代码，整个复制到你的自定义模块中就可，
8、注意：一个页面中出现多个画有热点的图片时，那么上面图片中标红位置所示，每张图片会对应生成一个usemap="#map" 对应热点的代码块中也会生成 name="map" id="map" map就是这个图片识别这个代码块的名字，像你回家找门牌号一样 map 对应起来了 就走对了；
这个时候有一种情况 需要注意 1、map（门牌号，名字）出现多次 像你第一次去别人家 别人跟你说他家门牌号 是402 结果到了之后你发现这楼上好几个 402 ,你肯定找不到正确的位置，代码也是一样 会出现点击不了的情况， 所以这地方要注意 一个页面里面 相同的 usemap="#map" 及对应的 name="map" id="map" 不能出现多次，每个 id 只能出现一次 出现一样的时候只需要把名字改掉即可 如： usemap="#map1" name="map1" id="map1" 也可以叫 usemap="#aaa" name="aaa" id="aaa" 主要是图片要和代码块对应起来
需要在一张图片上设置多个能点击跳转的链接区域时，推荐使用网页的热点链接。
参考代码如下：
<map name="Map" id="Map"><area shape="rect" coords="89,41,379,136" href="#" target="baidu.com" />
<area shape="rect" coords="89,175,394,264" href="#" />
<area shape="rect" coords="95,293,386,355" href="#" />
</map>
网页热点使用方法：
个人推荐Dreamwever可视化 *** 作来创建网页热点。
1、打开Dreamwever，新建一个页面，插入一张图片，
2、使用左下角的热点工具。
3、点击“矩形”或其他热点工具，再在图片上拖动位置
4、选中其中一个热点，在下方的属性窗口中的链接栏填上你的链接，热点链接就创建完成了。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）