zoukankan      html  css  js  c++  java
  • 如何给图片增加热点

    其实这个问题是个基础性的问题 只是自己一直不是很熟悉 刚才做了个例子

    现在将过程记录下 以备忘记

    1. 增加一个图片Html标记

       <img src="photo/c.jpg" alt="" border="0 " usemap="#Map1" style="height: 172px; 319px" />

    2. 增加热点设置

        <map id="Map1" name="Map1">
                <area shape="rect " onclick="alert('111');return false;" coords="10,10,30,30 " href="#"
                    alt="说明1" />
                <area shape="rect" onclick="alert('222');return false;" coords="40,40,60,60 " href="#"
                    alt="说明2" />
                <area shape="rect" onclick="alert('333');return false;" coords="70,70,80,80 " href="#"
                    alt="说明3" />
            </map>

         说明:热点有多种类型 有矩形 圆形等 我只是做了个矩形的例子(这个会经常用到)

    问: 图片是如何和热点联系到一起的?

    答: 通过图片的usemap属性

    问: coords的数字是相等什么地方的?

    答: 是相等于图片的左上角的

    自问自答 呵呵

  • 相关阅读:
    [ USACO 2007 FEB ] Lilypad Pond (Silver)
    [ USACO 2007 FEB ] Lilypad Pond (Gold)
    [ USACO 2007 OPEN ] Dining
    [ BZOJ 2134 ] 单选错位
    「APIO2018新家」
    「WC2018即时战略」
    「学习笔记」杜教筛
    「APIO2018选圆圈」
    「学习笔记」集合幂级数
    「NOIP2018」保卫王国
  • 原文地址:https://www.cnblogs.com/zhwl/p/2000300.html
Copyright © 2011-2022 走看看