html:画像リンクと画像マッピング


画像


次のように分類されます.
(1)ビットマップ:
 GIF
ルックアップテーブルを使用して色を格納し、最大256色を格納します.1つの画像に単調な色が大量にある場合は、1つだけ格納します.色の単調な画像に適しています.
JPEG
無限の色を記憶できるので、色の多い画像に適しています.
 PNG
すべてのブラウザのサポートではありません
Webページに大きな画像を配置する推奨事項:まず小さなバージョンを提供し、それから大きな画像のリンクを提供します.
(2)ベクトル図:
flash、silverlight
 

<img>要素


Webページに画像を追加するには要素を使用します.
img要素のプロパティ:
(1)src:画像ソースURL.
(2)alt:アシスト効果.
(3)align:right,left,top,bottomなどがある.
(4)heightとwidth:単位はピクセルで、指定しない場合はデフォルトです.heightまたはwidthのみを指定すると、自動的にサイズが変更されます.
(5)hspaceとvspace:画像と周囲文字の空白ギャップサイズ.
たとえば、redhat os
推奨:画像を小さく設定する場合は、小さな画像を新規作成することを推奨します.
 

<object>要素


マルチメディアファイルの追加:
共通のプロパティ:
(1)classid:指定したファイルを実行するアプリケーション.
(2)codebase:ベースURL.
 

画像にリンクを挿入:画像をクリックし、ページをジャンプします。


の間に元素を挿入する.

 
<html>
	<head><title>Home</title></head>
	<body>
		<img src = "images/wrox_logo.gif"/>
		<p>
		 130*130 
		<img src = "images/apple.jpg" alt = "apple"/>
		</p>
		<p>
		 width = 130 
		<img src = "images/apple.jpg" alt = "apple" width = "130"/>
		</p>
		<p>
		 80*150 
		<img src = "images/apple.jpg" alt = "apple" width = "150" height = "80"/>
		</p>
	
		<p>
			hellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohello
			<img src = "images/redhat.gif" alt = "redhat os" align = "left" width = "150" height = "150" hspace = "4" vspace = "4">
			 Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Ut risus tellus, hendrerit id, sagittis sed, lobortis eget, augue. 
			Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Ut risus tellus, hendrerit id, sagittis sed, lobortis eget, augue. 
		</p>
	</body>
</html>

画像マッピング:1つのピクチャの異なる領域が異なるリンクに対応します.
画像マッピングは次のように分けられます.
(1)サーバ側画像マッピング:クリックした座標をサーバに送信し,サーバのスクリプトによって決定する.
(2)クライアント画像マッピング:クリック位置によってリンク先を決定する.
 
を使用して設定を追加します.
要素はマッピングの開始を示します
要素は、各領域を示し、1つのピクチャを4つの領域に分割する場合は、4つのareaを使用します.
要素にはname属性が1つしかありません.
area要素のプロパティについて説明します.
(1)shape:領域の形状を記述するために必要な属性、rectanglepolycircledefaultオプション、defaultはまだ定義されていない領域を指す.
(2)coords:領域の座標を指定します.例えば矩形には4つの座標があり、前の2つは左上角のx,y座標、後の2つは右下角のx,y座標である.
(3)hrefとnohref:hrefは目的のリンクを指定し、href属性を指定しない場合はnohref、nohref="nohref"を指定する必要がある
(4)target:与同样注意点:(1)设定usemap propartie.(2)でname属性を設定します。<html> <head><title>Home</title></head> <body> <object data = "flash_sample.swf"></object> <a href = "http://blog.csdn.net/xiazdong" target = "_blank"><img src = "images/apple.jpg"/></a> <img src = "images/apple.jpg" alt = "apple" usemap = "#map1" height = "100" width = "100"/> <map name = "map1"> <area shape = "rect" coords = "0,0,50,50" href = "ImageDemo.html"> <area shape = "rect" coords = "50,50,100,100" href = "http://www.google.com/"> <area shape = "rect" coords = "0,50,50,100" href = "http://www.baidu.com/"> <area shape = "rect" coords = "50,0,100,50" href = "http://www.renren.com/"> </map> </body> </html>