kscc

スポンサーサイト

一定期間更新がないため広告を表示しています

1枚の画像に多数のリンクが貼れるクリッカブルマップのまとめ


あるコンテンツを作成した後“CSS、Javascriptはご利用頂けません”という項目を発見しまして
本気で『マジか…』と言ったことがありました。まぁつい最近なんですけどね。

そこで使ったのがHTMLのみで画像に多数のリンクが貼れるクリッカブルマップです。

今までクリッカブルマップを使ったことなんて数えるくらいしかありませんでしたが
久々に使ってみると意外にいいですよ。

今さらですが場面に応じて使ってみるのもアリじゃないですかね。
というワケで
こんな画像をコソコソ作ってみました。



これは1枚の画像なのでa要素だけでは1つのリンクしか貼れませんが
こういった画像にたくさんリンクを貼りたいぞ!ってときに使うのがmap要素です。

では実際に

  • TOPへのリンク
  • BLOGへのリンク
  • PHOTOへのリンク
  • Facebookへのリンク
  • 雑誌へのリンク
  • YouTubeへのリンクを2つ


計7つのリンクを貼ってみます。

まず画像を表示させるのですが
img要素の中にusemapという属性を入れます。

usemapの属性値は任意の言葉でいいので
ここでは“sample_page”としておきます。

<img src="/img/sample.jpg" usemap="#sample_page" />

属性値の前に"#"を付けるのも忘れずに。

次にmap要素を使ってリンクを貼りますが
map要素はarea要素と併用して使うのでこのように記述します。

<map name="sample_page">
	<area shape="シェイプの種類" coords="座標" href="URL" />
</map>

shape属性は以下が使えます。

  • rect=四角形のリンク
  • circle=円形のリンク
  • poly=多角形のリンク


今回はリンクに角度を付けたいので多角形のリンクが貼れるpolyを使います。

coords属性にはリンク部分になる座標を入れます。
座標の記述方法はX軸とY軸をカンマで区切りながら入れていきますので
X1,Y1,X2,Y2,X3,Y3,X4,Y4となります。



雑誌部分の座標は

  • X軸1=105
  • Y軸1=207
  • X軸2=158
  • Y軸2=216
  • X軸3=146
  • Y軸3=281
  • X軸4=94
  • Y軸4=272


だったので
当てはめるとこうなります。

coords="105,207,158,216,146,281,94,272"

というワケで
HTMLはこんな感じでごじゃいます。

<img src="/img/sample.jpg" usemap="#sample_page" />
	<map name="sample_page">
		<!-- TOP -->
		<area shape="poly" coords="55,95,111,85,116,112,60,122" href="***" />
		<!-- BLOG -->
		<area shape="poly" coords="106,106,171,112,169,137,104,132" href="***" />
		<!-- PHOTO -->
		<area shape="poly" coords="161,95,242,89,244,114,163,120" href="***" />
		<!-- FACEBOOK -->
		<area shape="poly" coords="239,107,347,107,347,132,239,132" href="***" />
		<!-- YouTube Macdnalds CF -->
		<area shape="poly" coords="291,194,379,202,374,261,284,259" href="***" />
		<!-- YouTube Cesar CF -->
		<area shape="poly" coords="220,236,308,228,313,287,224,295" href="***" />
		<!-- Magazine -->
		<area shape="poly" coords="106,207,157,216,147,282,95,273" href="***" />
	</map>

そして
完成したのがこちらです。



んーっ
まぁこれだけなんですけどね。

いざ使おうとしたら『どーだっけ?』ってなることもあるかもしれない気がするかもしれない気がしたら大変かもしれないですからね!

あ、あと地図とかに使うと便利かも!

あ、あと隠しリンクとかにも使えたりするかも!
スポンサーサイト