• HTML-图片热点、网页内嵌、网页拼接、快速切图


    图片热点

        规划出图片上的一个区域,可以做出超链接,直接点击图片区域就可以完成跳转的效果。与图片链接不同,热点是图片上的某一个区域或多个区域。

    我们用魔兽世界图片来做一个图片热点,点击logo、区域和不同人物会连接到对应种族介绍:

     

    在网页中打开图片,指向特定的区域将显示连接提示,点击后连接到指定网址

    <body>
    <table align="center">
    <tr>
    <td>
    <img src="魔兽世界1.jpg" width="900" usemap="wow" />
    <map name="wow" >
    <area shape="rect" coords="277,18,608,108" href="https://www.wowchina.com/zh-cn/" />
    <area shape="poly" coords="816,422,790,441,781,469,767,504,877,508,861,483,844,463,839,438,831,427" href="https://www.wowchina.com/zh-cn/game/races/gnome" target="_blank" title="魔兽世界-侏儒" />
    <area shape="poly" coords="786,350,824,300,835,247,864,248,895,256,889,299,894,342,885,369,896,433,891,492,844,436,861,393,863,366,817,354" href="https://www.wowchina.com/zh-cn/game/races/night-elf" target="_blank" title="魔兽世界-暗夜精灵" />
    <area shape="poly" coords="864,368,773,343,790,320,730,304,727,338,687,336,664,353,662,368,672,388,665,412,653,449,662,503,763,505,790,429,847,417" href="https://www.wowchina.com/zh-cn/game/races/dwarf" target="_blank" title="魔兽世界-矮人" />
    <area shape="poly" coords="639,142,691,165,690,218,718,263,716,337,661,334,595,272,595,250,588,205,608,160" href="#https://www.wowchina.com/zh-cn/game/races/draenei" target="_blank" title="魔兽世界-德莱尼" />
    <area shape="poly" coords="491,294,528,285,548,245,592,244,593,274,664,340,662,370,671,387,655,447,662,504,504,506,524,403,498,389,477,353" href="#https://www.wowchina.com/zh-cn/game/races/human" target="_blank" title="魔兽世界-人类" />
    <area shape="circle" coords="240,345,235" href="https://www.wowchina.com/zh-cn/game/races" target="_blank" title="魔兽世界种族" />
    </map>
    </td></tr>
    </table>
    </body>

     一、先引用图片并设置宽度<img src="" width="" />

     二、设置<map>,并name命名

     三、在<img>中引用name名 将<img>与<map>联系起来

     四、设置连接区域<area>

         1、shape 连接区域形状 rect矩形 circle圆形 poly多边形

         2、coords 设置连接区域的坐标 矩形为左上角坐标及右下角坐标 圆形为圆点坐标及半径长度  坐标是图片的左上角计算

         3、href 设置连接网址  _blank 新网页中打开

    网页内嵌

        在一个网页里,规划处一个区域来展示另一个网页的内容

    我们在上面的网页基础上嵌入百度主页

    <tr><td>
    <iframe src="http://www.baidu.com" width="900" height="400"></iframe>
    </td></tr>

    <iframe></iframe> 为网页内嵌标签  设置区域宽与高来指定区域

    网页拼接

    在一个网络页面内,规划出多个页面窗口,以表格拼接的形式展现出来

    快速切图

    用于做一个简单的网页效果图

    步骤一:PS打开一个图片,选取“切刀”工具,对想要进行超链接的区域进行切割处理,可以同时切多处区域

    步骤二:“文件”中选择“存储为Web所用格式...”,存储时格式选择“HTML 和图像”

    步骤三:在DW中打开保存的网页,并设置每个区域连接的网址,即可完成一个简单的网页效果图

  • 相关阅读:
    团队-科学计算器-成员简介及分工
    团队-团队编程项目作业名称-需求分析
    《对软件工程课程的期望》
    《自我介绍》
    个人编程项目
    对软件工程课程的期望
    《自我介绍》
    结队-爬取大麦网近期演唱会信息-项目进度
    团队-排课系统-设计文档
    团队-排课系统-开发环境搭建过程
  • 原文地址:https://www.cnblogs.com/qq450867541/p/6001942.html
Copyright © 2020-2023  润新知