HTML_图片、地图

插入图片的基本格式为:<img src="url" />
可插入的属性有---替换文本:alt="替换文字"         对齐方式:align="bottom"(与底部对齐,默认是此方式)、"middle"(中间)、"top"(顶部)         浮动方式:align ="left"(浮动在文本左边)、"right"         图片大小:width="50" height="50"(通过width、height属性可以对图片进行缩放)         将图片用作链接:<a href="//lastpage.html">                   <img border="0" src="/eg_buttonnext.gif" />        //border是外边框大小属性                </a>

<map> 标签

<img src="planets.jpg" border="0" usemap="#planetmap" alt="Planets" />

<map name="planetmap" id="planetmap">
  <area shape="circle" coords="180,139,14" href ="venus.html" alt="Venus" />
  <area shape="circle" coords="129,161,10" href ="mercur.html" alt="Mercury" />
  <area shape="rect" coords="0,0,110,260" href ="sun.html" alt="Sun" />
</map>
usemap 属性与 <map> 元素的 name 或 id 属性相关联,以建立 <img> 与 <map> 之间的关系。# + 要使用的 <map> 元素的 name 或 id 属性。shape后是图片的形状(circle圆;rect矩形)coords指位置,大小:圆(横坐标,纵坐标,半径)矩形(左上角横坐标,左上角纵坐标,右下角横坐标,右下角纵坐标)
             


若是背景图片,则格式为:<body background="/i/eg_background.jpg">

 
时间: 2024-12-17 22:34:26

HTML_图片、地图的相关文章

ArcGIS API for Silverlight之配准JPG图片地图文字倾斜解决方案

原文:ArcGIS API for Silverlight之配准JPG图片地图文字倾斜解决方案 根据实际JPG图片进行配准后,发布的地图,利用ArcGIS API for Silverlight在网页上显示的时候,原先的文字总有倾斜的现象,如何解决? 图一.配准后有文字倾斜现象的地图 解决方案如下: <esri:Map x:Name="myMap" IsLogoVisible="False" ZoomDuration="0:00:01" E

使用图片地图减少HTTP请求数量

前言 最近在看<高性能网站建设>,记录一下所学. 现在很多网站都是图片形式的导航,点击图片跳转到对应的链接.如果导航项目很多的话,图片的数量就会很多,每需要加载一张图片就会多一个HTTP请求.优化的方式之一就是使用图片地图 标签 图片地图要用到map和area标签 map标签用于客户端的图片映射:area标签指定映射区域.兼容性良好,可放心使用 栗子 <aside class="container"> <img src="src/img_map.

Android开发--仿景点通景区地图SurfaceView实现

最近在帮老师做一个项目,类似于景点通的App手机应用,我们是要精细化一些室内的地图,室内的地图采用的是自己的一套定位机制,所有室内地图也要自己来实现,参考了网上一些例子,考虑到效率的问题,最后决定使用SurfaceView来进行地图绘制,实现的功能有: 双击放大 多点触摸放大 地图拖拽 添加地图标记 效果图一张: 代码思路 1.处理缩放和拖拽事件 在这里我利用了Matrix类提供的图片操作方法去进行图片的缩放和平移处理,关于该方面的知识可以参考 Android开发–利用Matrix进行图片操作

瓦片地图技术总结

两个月以来,开始涉入WebGIS这块领域,发现GIS的东西确实挺多,每个方向需要研究的东西也很多,现把瓦片地图这一块的内容进行下总结.本文主要是对这个技术进行一个总体的介绍,目前,从事的是瓦片地图客户端方面的开发,后续会对其技术的具体实现做一个详细的介绍. 瓦片地图的定义 瓦片地图现状 瓦片地图设计涉及方向 瓦片地图定义: 瓦片地图:其实就是WebGIS中的一部分吧,我暂时这么理解,而且,应该是属于WebGIS中比较重要的一块.顾名思义,瓦片地图就是由一块块固定大小的“小图片”地图拼接而成的网络

[转] HTML5终极备忘大全(图片版+文字版)----张鑫旭

by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.com/wordpress/?p=1544 一.前言兼图片备忘 下图是我从testking网站上的Ultimate HTML5 Cheatsheat这篇文章中备忘图片(已大小优化,因为图片较高,故滚动显示). 但是,上面毕竟是图片格式(原图上兆),而且还是英文的,所以自己觉得有必要将上面的内容文字化,同时做下简单的中文翻译.整理一番,于是就有下面的些内容.

OpenLayers 之 地图图层数据来源(ol.source)详解

source 是 Layer 的重要组成部分,表示图层的来源,也就是服务地址.除了在构造函数中制定外,可以使用 layer.setSource(source) 稍后指定. 一.包含的类型 ol.source.BingMaps ,必应地图的切片数据,继承自ol.source.TileImage: ol.source.Cluster,聚簇矢量数据,继承自ol.source.Vector: ol.source.ImageCanvas,数据来源是一个 canvas 元素,其中的数据是图片,继承自 ol.

图片热区比切图效果好

切片和图像热区是啥?图像切片是将很大的页面图像,切成相似拼图的那种方式,以后运用 HTML 代码,再完满的拼接起来的一种加快页面图像显现的方法,图像切片以后你还能够在不一样的切片上参加连接等等,然后到达点击不一样图像区域跳转到不一样页面的作用.图像热区是在一章图像上,制作任意多边形或许圆形的区域,并参加连接的一种方式,图像热区的优点在于,图像不必被切割,就算被点击的区域是不规则的形状,图像热区也能够很轻松的敷衍,而切片要敷衍多边形的区域,能够就需求屡次切片了,那么切片和图像热区到底有啥详细差异和

图片的压缩优化

1.alt结构优化:如品牌名+产品系列+型号+正/背/侧面 2.不用大图,不用css去改大图尺寸.用小图,再提供大图查看功能.若图片体积实在大,为图片专门配置新服务器(配置服务器这个我也没明白) 3.图片大小应保持在70kb以下(没这么严格,可以用其它方法解决大小问题,仅了解),否则导致加载速度过慢,用户流失: 4.用对图片格式: jpg:用在对图片显示的清晰度要求高的地方 PNG:小图用png(但png24比png8大,用png8:现在一般除了超清图,都用png8) 5.对于缩略图:尽可能压缩

MapServer 之 发布网络地图服务(WMS-Web Map Service)

一.环境搭建 操作系统:Windows 7 x64: 地图服务器:MapServer 6.40: Web服务器:Apache httpd 2.2: 空间数据库:PostgreSQL/PostGIS 9.2. 1. Apache HTTP Server Apache HTTP Server(httpd)是一个开源的Web服务器,可以运行在多个操作系统中,包含UNIX.Linux和Windows,能够提供安全.高效和可扩展的web服务,提供与当前的HTTP标准同步的HTTP服务. Httpd项目在1