![](http://oshiete.xgoo.jp/images/v2/pc/qa/question_title.png?e8efa67)
他の質問サイトでも質問したのですが、答えて頂ける様子が伺えないので、こちらで再度質問させて下さい。
二重になってしまい申し訳ありませんが、少々急いでいますのですみません。。
Dreamweaverを使用しています。
日本地図の一枚の画像にイメージマップでリンクを設定して
マウスオーバーした時に別の画像の吹き出しが出て、「○○県」と出るようにする事は可能でしょうか?(ツールチップのような)
できればCSSでできればいいのですが
例えば、
<div class="image">
<a href="#">
<span></span>
<img src=japan_map.gif>
</a>
</div>
.image{
margin:30px;
position:relative;
width:750px;
height:600px;
}
.image span{
width:100px;
height:40px
display:block;
position:absolute;
top:10px;
left:90px;
background: url(fukidashi.gif) no-repeat;
のような形で…私がやりたいのは自由な位置にリンクをさせ、マウスオーバーで自由な位置に吹き出し画像を表示させる…
これは可能でしょうか?
参考(狐のイラスト)→http://members2.jcom.home.ne.jp/obb/css/sample.h …
A 回答 (4件)
- 最新から表示
- 回答順に表示
No.4
- 回答日時:
≫英語が読めません故、細かい所がよく分かりません;
そういう時は、翻訳サービスを使う。
http://translate.google.com/translate?langpair=en|ja&u=http://www.frankmanno.com/ideas/css-imagemap/
または、googleの検索オプションで、
「リンクページ次の URL にリンクしているページ 」を使う。
link:http://www.frankmanno.com/ideas/css-imagemap/ - Google 検索 ( http://www.google.co.jp/search?as_lq=http%3A%2F% … )
No.3
- 回答日時:
例.
(1)47都道府県分の画像ファイル名をグローバル配列変数に格納する。
(2)マウスオーバー時に該当する配列番号を引数として
画像の切替表示を行うJavaScript関数 img_change を呼ぶ。
<script type="text/javascript">
<!--
pref_arry = new Array();
pref_arry[0] = "hokkaido.jpg";
pref_arry[1] = "aomori.jpg";
.
.
.
pref_arry[46] = "okinawa.jpg";
function img_change (num){
document.images("PREF").src = pref_arry[num];
}
-->
</script>
この回答への補足
↓の続きで、どういう事が分からないのか詳しく表記させて頂きます。
script部分に書いていただいたjavascriptを入れて、任意の画像名に差し替えるのは分かるのですが
その後、イメージマップの部分へどうやって呼び出すのか、その書き方がわかりません。。
<area shape="poly" coords="555,19,510,115,526,115,533,106,651,105,689,19" href="#" alt="北海道">
この部分の後ろに何か書くのですか?
[0][1][2]がいわゆる関数なのですよね?
手取り足とりで本当に申し訳ありません。
再びありがとうございます。
JavaScript…は全然分かりません。
色々調べましたが、JavaScriptの勉強をしてないのでチンプンカンプンです><;
これができたなら…!と悔しく思います。
もう少し簡単な方法はないものでしょうか?
CSSなら分かるのですが…
No.2
- 回答日時:
イメージマップとCSSの組み合わせでは、
【参考サイト】
CSS Image Maps - Flickr-like Technique?
http://www.frankmanno.com/ideas/css-imagemap/
javascriptを使う手はありますが、ユーザビリティなどから避けるべき。
ご回答ありがとうございます。
とても分かりやすいサイトなのですが、英語が読めません故、細かい所がよく分かりません;
しかし、CSSでもできるという事が分かりました!
No.1
- 回答日時:
HTMLのイメージマップを使用すれば可能です。
後は、マウスポインタ上の都道府県に対する画像を
JavaScript、DHTML、CSS 等で動的チップ表示すればいいでしょう。
で、マウスポインタが日本地図外では非表示にする。
参考URL:http://www.htmq.com/html/map.shtml
この回答への補足
早速のお答えありがとうございます。
イメージマップを使用するまでは分かるのですが…
その後のリンク部分のオンマウスした時、別の画像が表示させる方法が分からないのです…
質問の仕方が悪くて申し訳ないです><
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
関連するカテゴリからQ&Aを探す
おすすめ情報
- ・漫画をレンタルでお得に読める!
- ・街中で見かけて「グッときた人」の思い出
- ・「一気に最後まで読んだ」本、教えて下さい!
- ・幼稚園時代「何組」でしたか?
- ・激凹みから立ち直る方法
- ・1つだけ過去を変えられるとしたら?
- ・【あるあるbot連動企画】あるあるbotに投稿したけど採用されなかったあるある募集
- ・【あるあるbot連動企画】フォロワー20万人のアカウントであなたのあるあるを披露してみませんか?
- ・映画のエンドロール観る派?観ない派?
- ・海外旅行から帰ってきたら、まず何を食べる?
- ・誕生日にもらった意外なもの
- ・天使と悪魔選手権
- ・ちょっと先の未来クイズ第2問
- ・【大喜利】【投稿~9/7】 ロボットの住む世界で流行ってる罰ゲームとは?
- ・推しミネラルウォーターはありますか?
- ・都道府県穴埋めゲーム
- ・この人頭いいなと思ったエピソード
- ・準・究極の選択
- ・ゆるやかでぃべーと タイムマシンを破壊すべきか。
- ・歩いた自慢大会
- ・許せない心理テスト
- ・字面がカッコいい英単語
- ・これ何て呼びますか Part2
- ・人生で一番思い出に残ってる靴
- ・ゆるやかでぃべーと すべての高校生はアルバイトをするべきだ。
- ・初めて自分の家と他人の家が違う、と意識した時
- ・単二電池
- ・チョコミントアイス
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
同じ画像 複数回使用
-
<hr>の縦バージョンはありますか?
-
【至急お助け!】チェックボッ...
-
lightbox2で画像を天地左右中央...
-
background-repeat CSS で切れ...
-
リストビューのTextBackground...
-
PNGがうまく表示されない・・・。
-
CSSでの動画のマスク処理
-
WEB上でディレクトリ内の画像を...
-
CSS マウスオーバーでテキスト...
-
【Webサイト】画像が小さく表示...
-
LightBoxの矢印の出し方
-
dreamweaverでテンプレートを作...
-
要素の幅をいろんな写真の幅に...
-
htmlについて教えてください。 ...
-
IMGタグで画像の繰り返し使用は…
-
CSSで背景画像をランダムに表示...
-
PDFの保存ボタンが表示されません
-
ロゴマークだけを抜き取って貼...
-
透過背景画像のビットマップ形...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
<hr>の縦バージョンはありますか?
-
画像の上にテキスト配置で、拡...
-
background-sizeの背景で最小値...
-
【Webサイト】画像が小さく表示...
-
画像とその下にあるテキストの...
-
background-repeat CSS で切れ...
-
【至急お助け!】チェックボッ...
-
iframe内をクリックさせない方...
-
lightbox2で画像を天地左右中央...
-
要素の幅をいろんな写真の幅に...
-
IMGタグで画像の繰り返し使用は…
-
background-sizeでcontainする...
-
同じ画像 複数回使用
-
コーディング中、右側に謎の余...
-
particles.jsの背景の上にテキ...
-
背景画像が半分しか表示されない
-
htmlかcssで背景の白い枠をなく...
-
LightBoxの矢印の出し方
-
画像の上に
-
gif画像でたまに背景がグレーに...
おすすめ情報