精华内容
下载资源
问答
  • 很有意思的一个东西,我们都用过图片热点对多个切片链接,也用过链接的hover高亮效果,但却没有办法实现图片热点的高亮效果(即鼠标悬停在某个热点区域时该区域高亮显示)。 Mapper就是这样的小组件,利用js绘图和...
  • 图片热点区域

    千次阅读 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>



    展开全文
  • js图片上标注热点

    2021-06-13 17:29:20
    @PiLee 嗨 你好,当设置热点的时候,点击的位置是在className为ball的区域时候,是有问题的,如下。本质上是没有正确的获取问题中所需要的鼠标位置坐标问题中所需要的鼠标位置应该是相对于热点图的位置,而e....

    @PiLee 嗨 你好,当设置热点的时候,点击的位置是在className为ball的区域时候,是有问题的,如下图。

    bVvt4N

    本质上是没有正确的获取问题中所需要的鼠标位置坐标

    问题中所需要的鼠标位置应该是相对于热点图的位置,而e.offsetX, e.offsetY则是鼠标相对于当前点击元素的位置关系。

    预览 因为图片链接的是百度下的,可能不能正常显示

    html

    sass

    html,body{

    margin: 0;

    padding: 0;

    width: 100%;

    height: 100%;

    text-align: center;

    }

    .wrap{

    display: inline-block;

    position: relative;

    box-shadow: 0 0 4px #C79F5A;

    span{

    display: inline-block;

    }

    span.red-ball{

    position: absolute;

    background-color: #EF6191;

    opacity: .7;

    border-radius: 100%;

    transition: .4s;

    &:hover{

    opacity: 1;

    }

    }

    }

    js

    $(function () {

    function setRedBall(r) {

    var $wrap = $('.wrap');

    var radius = r;

    var w = radius * 2;

    var h = radius * 2;

    var x, y, offset;

    return function (e) {

    offset = $(this).offset();

    x = e.pageX - offset.left;

    y = e.pageY - offset.top;

    $('').css({

    left: x - radius,

    top: y - radius,

    width: w,

    height: h

    }).appendTo(this);

    }

    }

    $('.wrap').on('click', setRedBall(20))

    })

    效果

    bVvt6E

    展开全文
  • 然后复制图片链接,新建一个html的空白页面,把图片链接复制粘贴在代码区域如果我们要对图片的某一个区域做链接,点击一下右边的图片,然后选择页面下方合适的热点工具点击热点工具中的圆形热点工具,在...

    在平常我们的店铺装修中,经常会遇到在一张图片上做产品链接,或者在一张海报上做产品的链接,在这个时候我们就需要用到DW来给我们做热点链接,方便我们的店铺装修。

    步骤

    把我们在ps软件中做好的图片先上传到到图片空间,然后复制图片链接,新建一个html的空白页面,把图片链接复制粘贴在代码区域

    6641861de529b80ecd0ae787373000fd.png

    如果我们要对图片的某一个区域做链接,点击一下右边的图片,然后选择页面下方合适的热点工具

    63ad30696f0773468161db15568c2ea4.png

    点击热点工具中的圆形热点工具,在我们需要做热点的地方,用热点给覆盖住了

    c25c5813e3bde35530f54939733dd203.png

    热点区域选好了之后,我们需要为该热点设置连接,当在海报点击我们设置热点的区域后,会跳转到我们之前在这里设置到的区域连接。在放连接之前,我们把“#”去掉,然后再放连接

    4e18b5e50d581fc3532c47069101126a.png

    设置好链接之后,需要我们选择链接在浏览器里打开的方式,例如打开新的窗口,或者在原来的窗口跳转等等,一般网店的话,选择blank打开的方式就可以了

    6a7b4f2f7ea8b3adaac287bf735ced05.png

    接下来我们要把页面保存下来,打开预览我们设置的效果,例如点击是否有跳转等等,没有问题之后再负责代码到网店的装修页面去

    dac72302e23172187405f3519aa61bb5.png

    3f14671654b03e84a00980766da4adae.png

    注意事项

    设置的热点区域在发布时是没有看到的,只在我们在dw设置的时候看到我们选择的热点区域

    以上就是dw热点链接制作方法介绍,操作很简单的,大家学会了吗?希望这篇文章能对大家有所帮助!

    展开全文
  • 一丶效果 二丶需求功能点技术点 1.业务想要的大致模样 呈现地图及省份,高热点地域颜色越红,前五以不同色值标注 2.程序员表示 移动端没有控件及框架,开发的话需要大量时间。前段有相关框架,不如前段...

    本文出自:http://blog.csdn.net/dt235201314/article/details/78133932

    一丶效果图

    二丶需求功能点技术点

    1.业务想要的大致模样

     

    呈现地图及省份,高热点地域颜色越红,前五以不同色值标注

    2.程序员表示

    移动端没有控件及框架,开发的话需要大量时间。前段有相关框架,不如前段做吧...

    3.项目经理表示

    手机屏幕就那么大,不适合展示整张中国地图,展示的话文字小,体验感也不高,设计师切个半屏图,程序员加点动画展现数据...

    最终讨论效果如图

    4.技术点

    1.根据设计师给的背景图,测量文字显示位置

    2.平移呈现动画 ObjectAnimator平移动画即可

    三丶看代码

    1.造数据

    实体类MapViewEntity.Java

     

    public class MapViewEntity implements Serializable {
        public String overviewName;//区块名称
        public String overviewSubName;//区块子名称
        public List<Area> areaList;//区域列表数据
    
        public static class Area implements Serializable {
            public int ranking;//排名
            public String areaName;//区域名称
            public int areaCount;//数量
        }
    }

    写成public,可省去get set方法

     

     

    public void getData(){
        areaList = new ArrayList<>();
        MapViewEntity.Area area1= new MapViewEntity.Area();
        area1.areaName = "武汉";
        area1.areaCount = 5;
        area1.ranking = 1;
        MapViewEntity.Area area2= new MapViewEntity.Area();
        area2.areaName = "深圳";
        area2.areaCount = 4;
        area2.ranking = 2;
        MapViewEntity.Area area3= new MapViewEntity.Area();
        area3.areaName = "北京";
        area3.areaCount = 3;
        area3.ranking = 3;
        MapViewEntity.Area area4= new MapViewEntity.Area();
        area4.areaName = "上海";
        area4.areaCount = 2;
        area4.ranking = 4;
        MapViewEntity.Area area5= new MapViewEntity.Area();
        area5.areaName = "惠州";
        area5.areaCount = 1;
        area5.ranking = 5;
        areaList.add(area1);
        areaList.add(area2);
        areaList.add(area3);
        areaList.add(area4);
        areaList.add(area5);
    }

    这里只造用到的数据

     

    2.MyViewActivity

     

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.map_view_activity);
        MapView mapView = (MapView) findViewById(R.id.mapview);
        getData();
        mapView.init(areaList);
    }

    xml布局里面就一个TextView和自定义MapView(略)

     

    MapView.Java

     

    public class MapView extends LinearLayout {
        private DecimalFormat format=new DecimalFormat("###,###,###");
        public MapView(Context context) {
            super(context);
            setOrientation(HORIZONTAL);
        }
    
        public MapView(Context context, @Nullable AttributeSet attrs) {
            super(context, attrs);
            setOrientation(HORIZONTAL);
        }
    
        public MapView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
            super(context, attrs, defStyleAttr);
            setOrientation(HORIZONTAL);
        }
    
        int bgHeight = 0, bgWidth = 0;
    
        public void init(List<MapViewEntity.Area> datas) {
            removeAllViews();
            if (datas == null) {
                return;
            }
            //左侧背景图
            ImageView imageView = new ImageView(getContext());
            Bitmap bg = BitmapFactory.decodeResource(getResources(), R.mipmap.map_bg);
    
            if (bg != null) {
                imageView.setImageBitmap(bg);
                bgHeight = bg.getHeight();
                bgWidth = bg.getWidth();
            }
            addView(imageView);
            final LinearLayout itemContainer = new LinearLayout(getContext());
            itemContainer.setOrientation(VERTICAL);
            for (int i = 0; i < datas.size(); i++) {
                View item = LayoutInflater.from(getContext()).inflate(R.layout.map_view_item, itemContainer, false);
                TextView indexView = (TextView) item.findViewById(R.id.index);
                TextView textView = (TextView) item.findViewById(R.id.text);
                GradientDrawable indexDrawable = (GradientDrawable) indexView.getBackground();
                int color = Color.parseColor("#FA7401");
                switch (i) {
                    case 0:
                        color = Color.parseColor("#FA7401");
                        break;
                    case 1:
                        color = Color.parseColor("#D2007F");
                        break;
                    case 2:
                        color = Color.parseColor("#006FBF");
                        break;
                    case 3:
                        color = Color.parseColor("#009C85");
                        break;
                    case 4:
                        color = Color.parseColor("#8FC41E");
                        break;
                }
                indexDrawable.setColor(color);
                indexView.setBackground(indexDrawable);
                MapViewEntity.Area area=datas.get(i);
                indexView.setText(area.ranking + "");
                textView.setTextColor(color);
                textView.setText(area.areaName+"  "+format.format(area.areaCount));
                itemContainer.addView(item);
            }
            LayoutParams lp = new LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.WRAP_CONTENT);
            lp.leftMargin = -bgWidth;
            addView(itemContainer, lp);
            //修正位置(瞎计算)
            getViewTreeObserver().addOnPreDrawListener(new ViewTreeObserver.OnPreDrawListener() {
                @Override
                public boolean onPreDraw() {
                    float degree0 = (float) Math.sin(Math.PI * 30.0 / 180.0);
                    float degree1 = (float) Math.sin(Math.PI * 60.0 / 180.0);
                    float degree2 = (float) Math.sin(Math.PI * 90.0 / 180.0);
                    int shift = (int) (getResources().getDisplayMetrics().density * 7);
                    for (int i = 0; i < itemContainer.getChildCount(); i++) {
                        final View item = itemContainer.getChildAt(i);
                        LayoutParams lp = (LayoutParams) item.getLayoutParams();
                        switch (i) {
                            case 0:
                                lp.leftMargin = (int) (bgWidth * degree0) + shift * 4;
                                lp.topMargin = (int) (bgHeight * degree0) / 22;
                                break;
                            case 1:
                                lp.leftMargin = (int) (bgWidth * degree1) + shift * 2;
                                lp.topMargin = (int) (bgHeight * degree1) / 16;
                                break;
                            case 2:
                                lp.leftMargin = (int) (bgWidth * degree2) + shift;
                                lp.topMargin = (int) (bgHeight * degree2) / 8;
                                break;
                            case 3:
                                lp.leftMargin = (int) (bgWidth * degree1) + shift * 2;
                                lp.topMargin = (int) (bgHeight * degree2) / 8;
                                break;
                            case 4:
                                lp.leftMargin = (int) (bgWidth * degree0) + shift * 4;
                                lp.topMargin = (int) (bgHeight * degree1) / 16;
                                break;
                        }
                        item.setLayoutParams(lp);
                        item.setVisibility(View.GONE);
                        item.postDelayed(new Runnable() {
                            @Override
                            public void run() {
                                ObjectAnimator anim = ObjectAnimator.ofFloat(item, "translationX", -bgWidth, 0);
                                anim.setDuration(1000);
                                anim.addListener(new AnimatorListenerAdapter() {
                                    @Override
                                    public void onAnimationStart(Animator animation) {
                                        super.onAnimationStart(animation);
                                        item.setVisibility(View.VISIBLE);
                                    }
                                });
                                anim.start();
                            }
                        }, (i + 1) * 300);
                    }
                    getViewTreeObserver().removeOnPreDrawListener(this);
                    return false;
                }
            });
        }
    }
    

    直接看init()方法,传入要展示的值

     

    1.首先添加背景图,并获取宽高

    2.添加LinearLayout设置垂直布局

    3.将文字显示需要动画的部分,添加到LinearLayout

    map_view_item

     

    <?xml version="1.0" encoding="utf-8"?>
    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center_vertical"
        android:orientation="horizontal"
        android:padding="0dp">
    
        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@mipmap/map_view_line_item" />
    
        <TextView
            android:id="@+id/index"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginLeft="5dp"
            android:background="@drawable/round"
            android:gravity="center"
            android:text="1"
            android:textColor="@android:color/white"
            android:textSize="15sp"
            android:textStyle="bold" />
    
        <TextView
            android:id="@+id/text"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginLeft="5dp"
            android:text="呵呵"
            android:textColor="@android:color/black"
            android:textSize="16sp"
            android:textStyle="bold" />
    
    </LinearLayout>

    图解:

     

    for循环

    根据个数动态添加移动布局,遍历添加对应数值

    switch (i)添加不同颜色

    最后测量item的显示位置,瞎测量

    为什么说瞎测量呢?

    背景图的高度,近似等于直径长度,所以top值是可以通过控制被除数调整的

    背景图的宽度等于半径+X(当然x你可以通过工具测量),所得有一个参数+-来调整

    各tiem的值同样通过switch (i)分配

    动画平移,参考前面文章,不再赘述

    四丶跪求关注下载源码,200粉小目标
    欢迎关注我的博客及微信公众号
    源码下载记得顺便Star哦~
    下载链接:https://github.com/JinBoy23520/CoderToDeveloperByTCLer

    展开全文
  • 标记主要用于图像地图,通过该标记可以在图像地图中设定作用区域(又称为热点),这样当用户的鼠标移到指定的作用区域点击时,会自动链接到预先设定好的页面。其基本语法结构如下:class和id:是分别指定热点的类型和...
  • 图片热点map area

    千次阅读 2018-01-03 10:48:59
    标记主要用于图像地图,通过该标记可以在图像地图中设定作用区域(又称为热点),这样当用户的鼠标移到指定的作用区域点击时,会自动链接到预先设定好的页面。其基本语法结构如下:...
  • html 图片 热点

    2021-06-09 04:30:04
    shape和coords:是两个主要的参数,用于设定热点的形状和大小。其基本用法如下:表示设定热点的形状为矩形,左上角顶点坐标为(X1,y1),右下角顶点坐标...标记是在图像地图中划分作用区域的,因此其划分的作用区域必...
  • 其实就是用css一个导航栏,我在div中建了9个超链接,最后整个图片变成了第一个超链接,新手也不知道怎么弄,如果可以用标记的话我还会写
  • 最近有一项目,需要用到MAP功能,正常浏览器在图片上使用MAP标签,鼠标移到上面的时候可以点击,但是不会高亮显示,这样客户体验不是很好,发现E都市现在的版本可以实现鼠标移动到一幢房子的时候,就可以显示这个...
  • 图片之中我们加入超链接,也就是图像热点链接 这个非常的方便打开FrontPage 打开网页---定位到图片---右击打开了图片工具栏----这里有热点链接的图标--我们常用的是长方形的点击后鼠标会出现铅笔的形状 ...
  • 第12节 html创建热点区域 链接

    千次阅读 2017-02-10 16:28:33
    热点区域链接例如: 使用文本建立超链接 <!--内部特定目标跳转 将需要跳转的文字包起来--> 实现特定目标跳转 <!--实现图像超链接--
  • 图片热点超链接

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

    2021-06-09 04:29:25
    一、HTML示例代码:1 2 3 4 图片热点的设置5 6 7 8 13 14 15 1617 21 22 23 24 2526 27 二、使用ismap获取热点坐标如所示:...
  • 例如:把一幅中国地图的图象按照省份划成若干区域,这些区域被称为热点区域,点击热点区域就可以链接到相关的地方,这就是图象地图. 知道了概念,那怎么样产生图象地图呢?1&gt; 必须定义出图象上个热点区域的形状,...
  • 示例图片: 一、HTML的usemap属性 img标签的usemap属性:它可以指定一个map标签 map标签:地图集合。必须包含name属性 area标签:区域坐标集合。shape指区域的形状,包括矩形rect、圆形circle、多边形polygon;co.
  • 我们在利用WPS表格和Excel表格进行日常办公时,经常需要给我们的文档添加密码用来保护文档,整体保护文档的方法我们已经在之前...如何设置自定义改动区域如下,我们想要将下的部分区域,设置为改动区域,首先选...
  • 精确定位热点区域

    2019-09-30 07:56:24
    所谓图片图片热点区域就是一个图片划分成若干个链接区域。访问者单击不同的区域就会链接到不同的目标网页。 实现原理 在HTML中,可以为图片创建3中类型的热点区域:矩形(Rectangle),圆形(Circle),多边形...
  • html页面中给图片添加热点链接

    千次阅读 2020-04-22 13:46:37
    在页面制作当中,也许会碰到一张图片只能点击固定区域,不同位置进行页面跳转,那么可以考虑使用热点,介绍一个比较简单的方法之一。 1.打开Dreamweaver,添加一张图片; <body> <img src="images/body_bg....
  •  标记主要用于图像地图,通过该标记可以在图像地图中设定作用区域(又称为热点),这样当用户的鼠标移到指定的作用区域点击时,会自动链接到预先设定好的页面。其基本语法结构如下: class=type id=...
  • 业余结了一个小单子,html的作业,但是需要用DW做热点图,电脑也没有那玩意,就用淘宝热点图做了。后来发现图片比我屏幕还宽,body出现了滚动轴,如果改成百分比,热点图就错位了。于是就用js控制了。 图片加载前...
  • 用html中的map属性实现 带有可点击区域的图像映射。 <img src="planets.jpg" border="0" usemap="#planetmap" alt="Planets" /> <map name="planetmap" id="planetmap"> <area shape="circle" ...
  • 1.modal点击其他区域消失 onPress={()=>this.setState({showTopMenu:false})}> style={{position: 'absolute',left: 0,right: 0,top: 0,bottom: 0,width: null,}}/> 2.图片做背景
  • 我想要一个区域内星级酒店的冷热点分析,目前手上有星级酒店的经纬度数据,怎么实现热点分析,跪求具体步骤。
  • 要求图片可以任意放大缩小移动,点击放缩后图片热点时弹出popwindow,并且给热点区域添加阴影,显示出热点区。 实现思路: 1.先要实现图片的任意放缩 2.获得热点区域的坐标 3.点击热点区域响应事件 4.点击热点区域...
  • 先找来一张图片(这里我找了我们学校的地图) 然后自行下载Macromedia Dreamweaver 在html文件末尾添加 这两个是必备的文件,关于area区域的选区 然后把每个area遍历,检测鼠标就显示出该区域的...
  • JS生成图片热点

    2020-04-21 21:02:46
    实现思路: 1、图片容器采用relative的定位方式...生成图片热点区域。 效果如下: 输入节点名称后可以生产JSON对象 代码如下: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <hea...
  • http://www.netzgesta.de/mapper/#
  • 文章讲的是八款热点地图 轻松实现大数据可视化,无论是大还是小,数据这种东西一直很难实现可视化。在这篇文章中,我们将一同了解如何通过热点地图将大型数据集转化为易于理解的背景信息。  热点地图可以说是可视...
  • 微信小程序能不能为图片划分出一块区域让它能够点击跳转页面。想一个中国旅游信息地图,点击不同的省份可以跳转到对应省份的旅游信息介绍页面,就是不知道该怎么实现现在请教各位大佬有什么方法吗?

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 27,862
精华内容 11,144
关键字:

区域热点图怎么做