−イメージマップ−

indexに戻る XHTMLについて HTML5について スタイルシート CSS3 PIE Box Shadowエフェクト 角丸いろいろ ダウンロード

テーブル リスト フォーム1 フォーム2デザイン リンク イメージマップ ボーダー Flashタグ FaceBook設定

アイコンフォント アニメーション ボタンアニメ スクロールして固定 フキダシ onクリック タブ

display 画面固定・sticky［CSS］ パララックス［CSS］ フレキシブルボックス［CSS］ CSSハック一覧 CSS小技一覧 CSSサンプル雛形 CSSサンプル [table] CSSサンプル [form] CSSサンプル [flow]

イメージマップのロールオーバー

スマホも対応させる場合

＜JavaScript＞はイメージマップの指定の下に置く。じゃないと反映されない！

HTML Imagemap Generatorジャネレーター

＜headerにJQuryを読み込み＞
<script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jQuery-rwdImageMaps/1.6/jquery.rwdImageMaps.min.js"></script>

また、CSSでimg要素の幅を100％にしておきましょう。
<style>
	html,
	body {
		margin: 0;
		padding: 0;
	}
	img {
	width: 100%;
	height: auto;
	}
</style>

＜JavaScript＞
<script>
    $('img[usemap]').rwdImageMaps();
</script>

設置コード

<img src="i16.jpg" usemap="#ImageMap" alt="" />
<map name="ImageMap">
	<area shape="circle" coords="158,172,83" href="https://mio-code.com/" alt="" />
	<area shape="circle" coords="402,172,83" href="https://mio-code.com/price/" alt="" />
	<area shape="circle" coords="645,172,83" href="https://mio-code.com/contact/" alt="" />
</map>

<script>
	$('img[usemap]').rwdImageMaps();
</script>



◎電話を掛ける
<a href="tel:000-1234-5678">000-1234-5678</a>

イメージマップのロールオーバー

ＨＴＭＬ
＜通常＞
<img src="img/contact-btm.jpg" alt="お問い合わせはこちらから気軽にお申込み下さい。" usemap="#Map" />
<map name="Map">
	<area shape="rect" coords="357,271,671,358" href="#form">
</map>


＜変更後＞
<img src="img/contact-btm.jpg" alt="お問い合わせはこちらから気軽にお申込み下さい。" usemap="#Map" name="rollover" />
<map name="Map">
	<area shape="rect" coords="357,271,671,358" href="#form" onMouseOver="paintRol('rollover',1)" onMouseOut="paintRol('rollover',0)" />
</map>

name="rollover" ロールローバーの名前を付ける。

onMouseOver="paintRol('rollover',1)" onMouseOut="paintRol('rollover',0)" これで通常の画像と変更後の画像とを指定する。

複数ある場合はonMouseOver="paintRol('rollover',2)"　数字を増やしていく。