SITEMAP [初めてのホームページ講座] [逆引きHTML] [15.イメージマップ] [5.リンク先の指定]

逆引きHTMLリファレンス

15. イメージマップ

15-5. リンク先の指定

●タグ

<AREA>

●構文

xxx	：リンク先のURLを指定

●説明

A要素と同じく、イメージマップがクリックされたときのリンク先を指定します。当然、相対パスでも構いません。

これを利用して、HREF属性にJavaScriptの関数を指定して、何か演出してみるのも面白いかもしれません。

●HTML4.0

AREA要素

●サンプル

ダイナミックHTMLを使って、多少凝ってみたサンプル(IE4,NN4以上)（実際に表示）

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
	<META HTTP-EQUIV="Content-Type" CONTENT="text/html;charset=Shift_JIS">
	<META HTTP-EQUIV="Content-Style-Type" CONTENT="text/css">
	<META HTTP-EQUIV="Content-Script-Type" CONTENT="text/javascript">
	<TITLE>イメージマップ with DynamicHTML</TITLE>
	<STYLE TYPE="text/css">
	<!--
		.Style1{
			font-size:        24pt;
			border-style:   solid;
			border-width:  1pt;
			border-color:  #000000;
			position:         absolute;
			top:               300px;
			left:               20px;
			width:            400px;
		}
	-->
	</STYLE>

	<SCRIPT LANGUAGE="javascript" TYPE="text/javascript">
	<!--
	//ブラウザのバージョンチェック
		var brw_v = navigator.appVersion.charAt(0);
		var brw_n = navigator.appName.charAt(0);
		var iIE4 = false;
		var iNN4 = false;
		if((brw_v >= 4)&&(brw_n == "M"))iIE4 = true;
		if((brw_v >= 4)&&(brw_n == "N"))iNN4 = true;

		var Col = new Array();
		Col[1] = "#cccccc";	
		Col[2] = "#ccccff";	
		Col[3] = "#ffcccc";	

		function ChgBGC(n){
			if(iIE4){
				document.all("iL1").style.backgroundColor = Col[n];
			}
			if(iNN4){
				document.layers["iL1"].bgColor = Col[n];
			}
		}
	// -->
	</SCRIPT>
</HEAD>
<BODY>
	<IMG SRC="imagemap.gif" ALT="メニュー" BORDER="0" WIDTH="150" HEIGHT="270" USEMAP="#menu">
	<MAP NAME="menu">
		<AREA SHAPE="rect" COORDS="7,7,143,60" HREF="JavaScript:ChgBGC(1)">
		<AREA SHAPE="circle" COORDS="75,105,35" HREF="JavaScript:ChgBGC(2)">
		<AREA SHAPE="polygon" COORDS="7,170,143,170,143,210,70,260,7,210" HREF="JavaScript:ChgBGC(3)">
	</MAP>
	<DIV CLASS="Style1" ID="iL1">ここの背景色が変わります</DIV>
</BODY>
</HTML>

[Go To Top]