精华内容
下载资源
问答
  • 图片的热点区域

    千次阅读 2017-06-12 17:17:09
    前端页面的过程中,图片的热点区域链接是我们经常遇到的,最方便的是通过DreameWeaver编辑器进行拖拽绘制热点区域热点区域部分的代码也会自动生成,但是这样操作虽然方便,另个一方面也削弱了我们的前端技能...

    在做前端页面的过程中,图片的热点区域链接是我们经常遇到的,最方便的是通过DreameWeaver编辑器进行拖拽绘制热点区域,

    热点区域部分的代码也会自动生成,但是这样操作虽然方便,另个一方面也削弱了我们的前端技能,以至于离开了DW工具就不知道

    具体代码怎么编写了。下面我来具体说一下热点区域的坐标问题,个人理解,仅供参考:

    图片的热点区域的坐标点:是以图片的左上角为坐标点,矩形的左上角坐标x1,y1和矩形的右下角坐标x2,y2来具体确定位置和大小。x1代表距离图片左上角x轴距离为x1,y1代表

    距离图片左上角y轴的距离为y1;x2,y2同理。

    如果是圆形的话的,则坐标分别为圆心和半径

    <img src="img/spir.png" usemap="myMap"/>
    			<map id="myMap" name="myMap">
    				<area href="maxHeight.html" shape="rect" alt="first" coords="x1,y1,x2,y2"/>
    			</map>

    举例如下:

    <div class="test">
    			<img src="img/spir.png" usemap="myMap"/>
    			<map id="myMap" name="myMap">
    				<area href="maxHeight.html" shape="rect" alt="first" coords="0,0,28,28"/>
    				<area href="maxHeight.html" shape="rect" alt="second" coords="0,28,28,56"/>
    				<area href="maxHeight.html" shape="rect" alt="third" coords="0,56,28,84"/>
    				<area href="maxHeight.html" shape="rect" alt="forth" coords="0,84,28,112"/>
    			</map>
    		</div>
    		<script type="text/javascript">
    			$(function(){
    				$('#myMap area').hover(function(){
    					var idx=$(this).index();
    					console.log($(this).attr('alt'))
    				});
    			});
    		</script>



    展开全文
  • 图片热点链接

    2015-03-30 10:30:52
    怎么在一个图片中多个链接呢? 热点链接可以帮你解决。这种效果的实质是把一幅图片划分为不同的热点区域,再让不同的区域进行超链接。要完成地图区域超链接要用到三种标签:。 【1】shape -- 定义...

    怎么在一个图片中做多个链接呢?

    热点链接可以帮你解决。这种效果的实质是把一幅图片划分为不同的热点区域,再让不同的区域进行超链接。要完成地图区域超链接要用到三种标签:<img><map><area>。

    <img src="图形文件名" usemap="#图的名称">

    <map name="图的名称">

    <area shape=形状 coords=区域座标列表 href="URL资源地址">
    <!--可根据需要定义多少个热点区域-->
    <area shape=形状 coords=区域座标列表 href="URL资源地址">

    </map>

    【1】shape -- 定义热点形状
    shape=rect: 矩形
    shape=circle:圆形
    shape=poly: 多边形

    【2】coords -- 定义区域点的坐标

    a.矩形:必须使用四个数字,前两个数字为左上角座标,后两个数字为右下角座标
    例:<area shape=rect coords=100,50,200,75 href="URL">

    b.圆形:必须使用三个数字,前两个数字为圆心的座标,最后一个数字为半径长度
    例:<area shape=circle coords=85,155,30 href="URL">

    c.任意图形(多边形):将图形之每一转折点座标依序填入
    例:<area shape=poly coords=232,70,285,70,300,90,250,90,200,78 href="URL">

    demo :
    <img src="../menu.gif" width="204" height="510" border="0" usemap="#Map" />
    <map name="Map" id="Map">
    <area shape="rect" coords="12,37,181,88" href="http://www.qq.com" onFocus="this.blur()"/>
    <area shape="rect" coords="12,97,182,143" href="http://www.yahoo.com" />
    <area shape="rect" coords="18,155,179,200" href="http://www.sina.com" />
    <area shape="rect" coords="18,211,182,260" href="http://www.baidu.com" />
    <!--<area shape="rect" coords="12,444,182,490" href="sm-textfile.html" target="pcs"/> -->
    <!-- onFocus="this.blur()" 去掉虚线框 -->
    </map>

    展开全文
  • 图片热点超链接

    2019-10-11 21:56:49
    对图片的局部区域加超链接,该怎么做呢?这里的难点在于坐标的确定,此时需要用到Dreamweaver。 上中,切换到“设计”标签,然后: 上中,点击菜单栏插入-图像,导入图片: ,在图片上点击右键,选择...

    对图片的局部区域加超链接,该怎么做呢?这里的难点在于坐标的确定,此时需要用到Dreamweaver。

    Paste_Image.png

    上图中,切换到“设计”标签,然后:

    Paste_Image.png

    上图中,点击菜单栏插入-图像,导入图片:

    Paste_Image.png

    ,在图片上点击右键,选择属性,弹出属性面板:

    Paste_Image.png

    上图中,我们可以利用红框部分的地图绘制需要添加超链接的区域。箭头处表示的是要链接到的文件。蓝框部分表示打开新页面的方式,蓝狂部分的new是没有下划线的,它和_blank的含义是一样的。

    Paste_Image.png 局部区域的热点设置完毕后,上图显示,红框部分就是多出的代码,也正是我们需要的代码。多出的代码如下:

    <img src="file:///C|/Users/smyhvae/Desktop/html/1.jpg" alt="" width="488" height="730" usemap="#Map"/>
    <map name="Map">
      <area shape="circle" coords="227,374,63" href="file:///C|/Users/smyhvae/Desktop/html/网页2.html" target="_blank">
    </map>

    上方代码中,第一行的usemap="#Map"表示我要引用名为Map的地图。 然后第02至第04行就给出了地图的定义。

    展开全文
  • HTML5 canvas热点图应用

    千次阅读 2015-03-26 16:11:35
    使用canvas API可以创建多种应用,下面我一个我特别感兴趣的例子,叫做热点图怎么理解热点图呢,其实很简单,就是度量温度的意思,可以用于任何可测量的活动。界面上活跃高的部分以用亮色标记,活跃低的用暗色...

    使用canvas API可以创建多种应用,下面我做一个我特别感兴趣的例子,叫做热点图

    怎么理解热点图呢,其实很简单,就是度量温度的意思,可以用于任何可测量的活动。界面上活跃高的部分以用亮色标记,活跃低的用暗色标记。举个例子,热点图可以用在城市地图标记交通路况,或者在世界各地地图上上显示风暴的活动情况。

    接下来这个例子是,鼠标移动到某个区域,会使某个区域的热度增加。如下:

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8">
            <title>heatmap</title>
            <style type="text/css">
                #heatmap{
                    background-image:url(img/bac.jpg);
                }
            </style>
        </head>
        <body>
            <h1>heatMap</h1>
            <canvas id="heatmap" width="300" height="400"></canvas>
            <button id='button'>清空画面</button>
        </body>
        <script type="text/javascript">
                
                function log() {
                        console.log(arguments);
                    }
                
                    var points = {};
                    var SCALE = 3;
                
                    var x = -1;
                    var y = -1;
                
                    function loadDemo() {
                        document.getElementById("button").onclick = reset;
                
                        canvas = document.getElementById("heatmap");
                        context = canvas.getContext('2d');
                        context.globalAlpha = 0.2;
                        context.globalCompositeOperation = "lighter";
                
                        function sample() {
                            if (x != -1) {
                                addToPoint(x,y)
                            }
                            setTimeout(sample, 100);
                        }
                
                        canvas.onmousemove = function(e) {
                            x = e.clientX - e.target.offsetLeft;
                            y = e.clientY - e.target.offsetTop;
                            addToPoint(x,y)
                        }
                
                        sample();
                    }
                
                    function reset() {
                        points = {};
                        context.clearRect(0,0,300,400);
                        x = -1;
                        y = -1;
                    }
                
                
                    function getColor(intensity) {
                        var colors = ['#2F4F4F','#008000','#228B22','#32CD32','#00FF00','#7CFC00','#ADFF2F','#90EE90','yellow'];
                        return colors[Math.floor(intensity/2)];
                    }
                
                    function drawPoint(x, y, radius) {
                            context.fillStyle= getColor(radius);
                            radius = Math.sqrt(radius)*6;
                
                            context.beginPath();
                            context.arc(x, y, radius, 0, Math.PI*2, true)
                
                            context.closePath();
                            context.fill();
                    }
                
                    function addToPoint(x, y) {
                        x = Math.floor(x/SCALE);
                        y= Math.floor(y/SCALE);
                
                        if (!points[[x,y]]) {
                            points[[x,y]] = 1;
                        } else if (points[[x,y]]==10) {
                return
                        } else {
                            points[[x,y]]++;
                        }
                        drawPoint(x*SCALE,y*SCALE, points[[x,y]]);
                    }
                
                
                    window.addEventListener("load", loadDemo, true);
                        
            
            
        </script>
    </html>


    展开全文
  • 制作图片热点

    2010-05-28 20:55:00
    制作图片热点以前经常用图片一些链接,而那是用dw的很简单,今天看到一本书,也学着了一个。 书上那个绝对定位到图片上的区域,我不知道是怎么实现:hover显示边框的,按它的弄,ff正常,在ie下根本没效果。 ...
  • 图片的热点链接(img map area)

    千次阅读 2011-03-08 15:11:00
    怎么在一个图片中多个链接呢?热点链接可以帮你解决。这种效果的实质是把一幅图片划分为不同的热点区域,再让不同的区域进行超链接。要完成地图区域超链接要用到三种标签:。【1】shape -- 定义热点形状  shape=...
  • 网站页面热点点击网站监管后台的一个功能 监管页面区域点击可视化如果点击少的,可能那块区域会升级,要不就换别的  我不知道 这种功能的具体效果怎么样 不过我没有过 更没有想过 很新奇 感觉应该很有用的 尤其...
  • 多个热点

    2012-10-29 13:59:00
    怎么在一个图片中多个链接呢?热点链接可以帮你解决。这种效果的实质是把一幅图片划分为不同的热点区域,再让不同的区域进行超链接。要完成地图区域超链接要用到三种标签:<img><map><area>。&...
  • 热点链接(img map area)

    2019-07-19 17:30:21
    怎么在一个图片中多个链接呢? 热点链接可以帮你解决。这种效果的实质是把一幅图片划分为不同的热点区域,再让不同的区域进行超链接。要完成地图区域超链接要用到三种标签:<img><map><area>。...
  • js 图像地图详解!!!

    千次阅读 2012-03-20 14:57:42
    怎么在一个图片中多个链接呢? 热点链接可以帮你解决。这种效果的实质是把一幅图片划分为不同的热点区域,再让不同的区域进行超链接。要完成地图区域超链接要用到三种标签:。             【1】...
  • 我们首先要的是怎么获取夜间灯光指数,这里以广东省为例。我们为了保证研究要素可以达到30个以上,这里用的行政区域为县一级别的,那么我们首先提取到夜间灯光各种指数(总灯光强度、平均灯光强度等等),直接工具...
  • 安装后让开发者更加有效率的在 Github 页面代码区域跳转(vim ctags) 大部分项目包含很多文件模块和第三方依赖,它们通过特定的语法被引用和导入(如 include, require, import 等)...
  • html map area 标签

    2013-12-30 17:58:17
    怎么在一个图片中多个链接呢? 热点链接可以帮你解决。这种效果的实质是把一幅图片划分为不同的热点区域,再让不同的区域进行超链接。要完成地图区域超链接要用到三种标签:。             【1】...
  • MFC类对于界面美化也了部分的努力,以下是一些可以使用的,参数说明略去。 CWinApp::SetDialogBkColor void SetDialogBkColor( COLORREF clrCtlBk = RGB(192, 192, 192), COLORREF clrCtlText = RGB(0, 0, 0) ); ...

空空如也

空空如也

1 2
收藏数 21
精华内容 8
关键字:

区域热点图怎么做