人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

下にある様なサイトの地図の部分の作り方を教えて下さい。
例えば、地図の北海道をマウスオーバーすると、北海道の文字の部分もマウスオーバーしている表示になっている所が特に解りません。
よろしくお願いします。
http://www.homemate.co.jp/
http://www.livnet.jp/


●質問者: M
●カテゴリ:インターネット ウェブ制作
✍キーワード:サイト マウスオーバー 北海道 地図 特に
○ 状態 :終了
└ 回答数 : 1/1件

▽最新の回答へ

1 ● うぃんど

【1】仕組み

どちらもHTMLのイメージマップ(クリッカブルマップ)というものを使っていますね

仕組みは同じなので上のほうを例にしますと下記のような画像を重ね合わせています

(1)ベース

(2)北海道の位置にマウスが来ている時に重ねる画像

(3)岩手の位置にマウスが来ている時に重ねる画像


【2】大雑把な作り方の説明

(1)ベースとなる画像を作る

日本地図のようなものですね

(2)それぞれのパーツを作る

県の地図や地方の地図などですね

(3)県の周囲を示す地図上の位置を計測する

地図上のどこからどこまでが北海道なのかといった位置を測る

これは面倒な作業なので作成支援ソフトを使います

(4)HTMLを記述します

【3】もう少し詳しく

クリッカブルマップを説明している判りやすそうなページを見つけたので参照してみてください

http://park16.wakwak.com/~html-css/map/map1.html

【4】お願い

ホームページ作成ソフトによっては作成支援機能を持っているものもありますので、次回からで結構ですから、どのようなソフトを使ってホームページを作っているのかも書いておくといいでしょう

何度もやりとりしなくてすんだり、そのソフトの使い方だけを説明したりすればすんだりしますので、お互いに楽なのです

◎質問者からの返答

すいません。わたしは、CS5のマスターを買ったので、DREAMWEAVER CS5です。

ので、areaのcoordsもマウスポインタでできます。

ありがとうございます。

関連質問


●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ