css:map热点的应用

映射图像(Image Map)可以实现的效果是:一张图片上点不同位置可以跳转到不同的地方,

实例:

1、插入一张图片

2、在底部“属性”栏中选择合适的热点工具,在图片上绘制热点区域,如

3、然后返回代码模式,修改链接就可以了

<img src="demo1.jpg" border="0" usemap="#Map" />
<map name="Map" id="Map">
<area shape="circle" coords="108,165,46" href="#" />
<area shape="poly" coords="376,241,329,70,203,194" href="#" />
</map>
时间: 2024-11-12 19:36:29

css:map热点的应用的相关文章

bootstrap.css.map这个文件有何用处?该怎能使用它?

. ├── bootstrap.css ├── bootstrap.css.map ├── bootstrap.min.css ├── bootstrap-theme.css ├── bootstrap-theme.css.map └── bootstrap-theme.min.css 0 directories, 6 files 我先说一下什么是source map文件. source map文件是js文件压缩后,文件的变量名替换对应.变量所在位置等元信息数据文件,一般这种文件和min.js主

css图片热点链接的设置

一.热点的原理 图片通过usemap="#Map"属性将名称为"Map"的热点区域及连接映射到图片上. 一般来说,图片的usermap属性对应的是map热点的name的属性值.所以如果页面中如果有多个图片添加热点,那么每一个图片的usemap值跟对应的热点地图的name值一定要一样,且不同的热点区域name值不可以相同,如果相同,那么图片上的热点区域将会以相同名称的第一个热点区域为准. 二.要设置图片的热点链接要用到三种标签:<img><map&g

WebStorm FileWatcher (less 编译生成 css css.map min.css)(js 编译 min.js)

环境 win7 64 node jdk 8 工具 Webstorm node-less yuicompressor-2.4.8.jar 步骤 npm install -g less 安装less 自动编译 webstorm (setting->Tool->File Watchers) 下载 yuicompressor 百度下载 yuicompressor-2.4.8.jar 安装css 自动编译 webstorm (setting->Tool->File Watchers) css

bootstrap.min.css.map作用

我先说一下什么是source map文件. source map文件是js文件压缩后,文件的变量名替换对应.变量所在位置等元信息数据文件,一般这种文件和min.js主文件放在同一个目录下. 比如压缩后原变量是map,压缩后通过变量替换规则可能会被替换成a,这时source map文件会记录下这个mapping的信息,这样的好处就是说,在调试的时候,如果有一些JS报错,那么浏览器会通过解析这个map文件来重新merge压缩后的js,使开发者可以用未压缩前的代码来调试,这样会给我们带来很大的方便!

jQuery地图热点效应-后在弹出的提示鼠标层信息

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>地图热点效果-鼠标经过弹出提示信息</title> <meta http-equiv="Content-Type" content=&q

jQuery地图热点效果-鼠标经过弹出提示层信息

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><title>地图热点效果-鼠标经过弹出提示信息</title><meta http-equiv="Content-Type" content="

WebStorm自动编译LESS产出CSS和source maps

1.双击桌面Chrome图标,打开Chrome,按键盘“F12”键,打开开发工具界面,点击其右上角的“设置”按钮,勾选Enable JavaScript source maps   Enable CSS source maps. 2.打开WebStorm,点File-->Settings,找到File Watchers,点右侧的“+”,选择LESS,更改两项设置如下: Program: C:\Users\wind\AppData\Roaming\npm\lessc.cmd   (less的安装路

Javascript 如何生成Less和Js的Source map

为什么有Source map CSS和JS脚本正变得越来越复杂,为了解决网络瓶颈,大部分源代码都需要经过编译.合并.压缩才能运用到实际环境中.为了减少网络资源占用,源码一般都会经过以下方式处理: 使用css框架合并压缩css文件:    使用js合并插件,减少网络请求次数:    压缩js文件,降低网络占用: 这三种方式都可以有效的解决实际问题,但同时在运行调试过程中也带来麻烦,由于css和js都是经过了压缩转换,当报错时我们很难定位到源代码具体位置.为了解决这个问题,Source map由此诞

支持新版chrome,用webstorm编译形成css和sourcemap,调试sass和less源文件(转)

旧版的chrome有个support for sass,但是新版chrome没有这个功能了.看到网上提供的方法比较多,也很乱,旧版新版的都有.而且不能指定自己所需要的路径. 所以就做了下改版. sass和less都有提供一个map文件,这个文件是用来干嘛的呢? .map文件是一个json格式的文件,可以直接调试less/sass源文件. ======================================================== 先是less配置(sass配置基本与less一