Javascript

Ab o u t Si t e
Pr o f il e
Cont a c t
Input search word...
Webクリエイターネットは、デザインやWeb関連の情報、制作メモを書き留めて公開しているプライベートサイトです
Javascript
Ti p s & M em o
D esi gn
Home › Tips & Memo › Javascript › クリッカブルマップを使ったロールオーバー
クリッカブルマップを使ったロールオーバー
2012/02/09
HT ML
いいね！ 14人がいいね！しています。Facebookに登録するして、友達の「いいね！」を見てみましょう。
CS S
PH P
Category
Javascript
1枚 の画像 に 複 数の リ ンク を設 定 す る 際" クリ ッカ ブル マップ ( イメ ージ マッ プ ) "を 使 用す る こ
とで 、複雑 な 形 で もリ ン ク領 域を 指定 で き ます の で結 構便 利で す 。
J avasc ri p t
｢こ のク リ ッカ ブル マ ップ ( イ メー ジマ ッ プ) で、 指定 領域 にカ ーソ ルを 合わ せた時 に 画像 を ロ
ール オーバ ー 出 来 れば 便 利か も｣ と思 った ことは な い でしょ うか ？
S erve r
ちょ っとし た J avas cr ip t で 簡単 に 実 装で き ま すので 、今 回はそ の 方法 をデ モペ ージ も 交え て
紹介 しよう と 思 い ます 。
Wo rd Pr ess
Keyword：クリッカブルマップ,ロールオーバー,Javascrpt
M ob i l e D e vi ce
O t her
Po pu l a r P os t s
CS Sで テーブルタ グ
( t ab le ･t h･t r･t d ) を扱 い や
すくす る
i Tu nesで管理 して いる 曲
をXp er ia で聴く
クリッ カブルマップを 使 っ
たロー ルオーバー
Cen t O Sに PH P5 .3 をイ ン
ストー ル
AP Cで P HPの処理を高速化
F a ce bo o k
We bクリ エイタ ーネ ット
Ga l l ery
ロ ー ルオ ー バ ー 用の スク リ プト を 用意 する
ro ll o ver .j s
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
補足
/* R ol lo v er S c ri p t */
if ( n av ig a to r. a pp V er si o n. c ha rA t (0 ) >= 3) {
va r ro li m g = n ew Ar r ay () ;
fo r ( i = 0 ; i < 1 0 ; i+ + ) {
ro l i mg [i ] = n e w Im ag e () ;
}
// ロ ール オ ーバ ー前 の イメ ージ のパ ス
ro l i mg [0 ] .s rc = " i ma ge / ○○ ○ .○ ○○ "
// ク リッ カ ブル マッ プ でロ ール オー バ ーさ せる イメ ージ 1の パス
ro l i mg [1 ] .s rc = " i ma ge / ○○ ○ .○ ○○ "
// ク リッ カ ブル マッ プ でロ ール オー バ ーさ せる イメ ージ 2の パス ro l i mg [2 ] .s rc = " i ma ge / ○○ ○ .○ ○○ "
// ク リッ カ ブル マッ プ でロ ール オー バ ーさ せる イメ ージ 3の パス ro l i mg [3 ] .s rc = " i ma ge / ○○ ○ .○ ○○ "
}
fu n c ti on pa in t Ro l( d im , cn t) {
if ( n av ig a to r. a pp V er si o n. c ha rA t (0 ) >= 3 ) {
do c u me nt . im ag e s[ d im ]. s rc = ro li m g[ cn t] .s rc ;
}
}
“r ol i mg [0 ] ”の箇 所に は 、 ロー ル オー バ ー前 のイ メ ージ のパ ス を記 述し ます。
そ して” rol i mg [ 1] ”に は 、 ロー ル オー バ ー させる イ メー ジの パスを 記述 し ます 。
複 数枚ロ ール オー バ ーさ せ るイ メー ジ があ る 場合 、”[ 1] ”の箇 所を” [ 2]” や ”[ 3] ”… とい
っ たよう に連 番で 続 け、 同 じよ うに ロ ール オ ーバ ーさ せる イ メー ジの パ スを 記述 し てや
り ます。
ジャンルは問わず、個人的に好
きなデザイン・風景・物、そし
て｢何かいいなー！｣と思ったも
のを写真に撮ってFlickrにアッ
プロードしていくつもりです。
ro l l o ve r. js を 外部 フ ァイ ルで 読 み込 み、 ク リッカ ブル マッ プを 設 定
HT ML ( rol l ov er. j sの読 み込 み )
1 <h e ad >
2 <s c ri p t la n gu ag e =" J av aS c ri p t" s rc =" js / ro ll o ve r .j s"
ty p e =" te x t/ ja v as cr i pt " >< /s cr i pt >
3 </ h e ad >
HT ML ( クリ ッカ ブ ルマ ッ プの 設定 )
1 <! ‐ ‐ ロー ル オー バー前 の イ メー ジ のパ ス‐ ‐>
2 <i m g s rc = "i ma g e/ ○○ ○ .○ ○ ○" a lt = "○ ○ ○" w id t h= "○ ○ ○" h ei g ht =" ○○ ○ "
bo r d er =" 0 " us em a p= " #m a p" n am e =" ro l lo ve r " />
3 <! ‐ ‐ クリ ッ カブ ルマッ プ の 設定 ‐‐ >
4 <m a p n am e =" ma p " id = "m a p" >
5 <a r ea sh ap e =" p ol y"
co o r ds =" ○ ○○ ,○ ○ ○, ○○ ○ ,○ ○ ○, ○○ ○ ,○ ○ ○, ○○ ○ ,○ ○○ ,○ ○○ ,○ ○○ ,○ ○○ ,○ ○○ " h re f= "# "
on M o us eO v er =" p ai nt R ol ( 'r ol l ov er ' ,1 ) "
on M o us eO u t= "p a in tR o l( ' ro l lo ve r ', 0) " / >
6 <a r ea sh ap e =" p ol y"
co o r ds =" ○ ○○ ,○ ○ ○, ○○ ○ ,○ ○ ○, ○○ ○ ,○ ○ ○, ○○ ○ ,○ ○○ ,○ ○○ ,○ ○○ ,○ ○○ ,○ ○○ " h re f= "# "
on M o us eO v er =" p ai nt R ol ( 'r ol l ov er ' ,2 ) "
on M o us eO u t= "p a in tR o l( ' ro l lo ve r ', 0) " / >
7 <a r ea sh ap e =" p ol y"
co o r ds =" ○ ○○ ,○ ○ ○, ○○ ○ ,○ ○ ○, ○○ ○ ,○ ○ ○, ○○ ○ ,○ ○○ ,○ ○○ ,○ ○○ ,○ ○○ ,○ ○○ " h re f= "# "
on M o us eO v er =" p ai nt R ol ( 'r ol l ov er ' ,3 ) "
on M o us eO u t= "p a in tR o l( ' ro l lo ve r ', 0) " / >
補足
● ロール オー バー 前 のイ メ ージ のパ ス
ロ ールオ ーバ ー前 の イメ ー ジの パス を 記述 し ます 。
続 けてuse ma p= ”# map ” na me =”r ol l ov er ”を追 記 しま す。
( ※ [ 1] ･ ･ ･use map =” # map ” 、 [2 ] ･･ ･n am e=”ro ll o ver”)
al t 属性 に は 画像が 表 示 出来 ない環境 向 け の代 替 テキ スト を、 wi dt h属 性とhei gh t属 性 に
は 画像の 幅と 高さ を ピク セ ルで 、b o rd er属性 には 枠線 の 太さ を ピク セル で記 述 して く だ
さ い( ※HT ML 5で は 、wi d t h属性と he ig ht 属 性に パー セン ト 単位での 指 定は 認め られな
く なりま した 。ま た 、画 像 のb or d er属 性は 値 が”0″ の場 合に限 り 認 められ てい ま す) 。
[ 1] の use map 属 性に は 、対 象と な るm ap 要素 のn ame属 性 値を #に 続け て記述 し ま す
( ※ この場 合 、対 象と な るm ap要 素 は <m ap nam e=”m ap” i d =”m ap” >で、 nam e属
性 値は” map ” とな りま す 。ま た、 ma p要素 に ”i d 属性値 ” があ る場 合、 name 属性 値は i d
属 性値と 同じ でな け れば い けま せん ) 。
[ 2] の nam e属 性に は 、a rea要 素 内 のo nM ouseO ve r(マウ ス オ ーバ ー) と
on Mo use O ut ( マ ウス ア ウト ) で 指定 し てい るpai nt Rol 内 の ”ro ll ove r”と同 じも のを記
述 します 。
● クリッ カブ ルマ ッ プの 設 定
sha pe 属 性に は 、リ ン クを 設定 す る領 域 の 形状 を記 述し ます 。
・ 長方形 ：re ct
・ 円形： c ir c le
・ 画像全 体： d ef aul t
・ 多角形 ：p ol y
c oo rd s属 性には 、座 標 を記 述し ま す 。
[ sha pe属 性が po l y( 多角 形) の 場合 の記 述 例]
c oo rd s=” 頂 点 1の X座 標 , 同Y 座 標, 頂 点 2の X座標,同 Y座 標, …”
※ 頂点の 数だ け続 け て記 述 しま す。
on Mo use O ver =” pai n tR ol ( ‘r ol l ov er’ ,1 )” は、 ro ll ov er .j sに 記述 した ”rol im g[ 1]” の
画 像をマ ウス オー バ ー時 に 呼び 出し ま す( ※ 数 字の 箇所 を ro l lo ve r.j sで設 定 し
た ”r ol i mg[ 数字 ]” と対 応さ せ てく ださ い) 。
on Mo use O ut =” p ain t Rol ( ‘ ro l lo ve r’, 0) ”は 、rol l o ve r. jsに記 述し た” ro li mg [ 0] ”の
画 像をマ ウス アウ ト 時に 呼 び出 しま す 。
以 下の” Dem o Pa ge” ボタ ン を クリ ック す ると デ モペ ージ をご覧 いただ けま す。
Prev
List
Next
Facebookもチェック
Webクリエイターネット
いいね！
430人がWebクリエイターネットについて「いいね！」と言っています。
Facebookソーシャルプラグイン
関連記事(※当記事と関連性が高いと思われる記事)
HTML5導入前に覚えておきたいこと
2011/12/22
スコア：3　※スコアの数値が大きいほど、関連性の高い記事です。
Sa fari やF i ref oxと い った モダ ン ブラ ウザは 以前 から HT ML 5の 新
要 素 に対 応し て いま し たが 、I nt ern et Ex pl or erが 対応し てい な
か っ たた め、 以 前と 同 . . .
続きを読む...
HTML5のバリデータチェック時に覚えておきたいこと
2012/03/25
スコア：3　※スコアの数値が大きいほど、関連性の高い記事です。
HT ML 5の 参 考 リ ンク [ バリ デ ー タチェ ッ ク ツー
ル ] ● Val i d at or .n u ( X) HT ML 5 Val i d ato r個 人的に は こ ちら の 方
が 見 やす いと 思 いま す 。エ ラー 箇 所. . .
続きを読む...
Internet Explorer9以前でもCSS3を使う
2012/03/04
スコア：3　※スコアの数値が大きいほど、関連性の高い記事です。
CS S3 PI E で何 が でき る の ？ CS S3 P I Eは 、 J av as cr ip tを 使っ て
I nt erne t E xp l o re r6～ 8でも 一部 の CS S3 を使 える よ うにす るス
ク リ プト . ..
続きを読む...
WordPressの検索表示をカスタマイズする
2012/03/11
スコア：3　※スコアの数値が大きいほど、関連性の高い記事です。
以 下 の手 順で 紹 介し て いき ます 。 ※テ キ ス トリン ク を クリ ック す る
と 、 その 箇所 ま でペ ー ジが スク ロ ール し ま す。 検 索 フォ ー ムを 変
更 す る 検 索 結果 に ｢入 力 した 検 索 ワード ｣と ｢該 当. ..
続きを読む...
jQuery UIのタブメニュー
2012/07/25
スコア：3　※スコアの数値が大きいほど、関連性の高い記事です。
以 下 の順 で紹 介 して い きま す。 ※ テキ ス ト リンク を ク リッ クす る
と 、 その 箇所 ま でペ ー ジが スク ロ ール し ま す。 j Q uery UI の サイ
ト か ら必 要な ラ イブ ラ リを ダウ ン ロー ド す る .. .
続きを読む...
おすすめ書籍･商品(※当記事と関連性が高いと思われる書籍･商品)
よくわかるJavaScriptの教
科書
たにぐち まこと
ロープライス ￥1,083 or 新品 ￥2,678
ポイント 81pt
プライバシーについて
Copyright © 2015 Web Creator Net. All Rights Reserved.
Home
Tips & Memo
Information
About Site
Profile
Contact
About Web Topics