下にある様なサイトの地図の部分の作り方を教えて下さい。

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

回答の条件
  • 1人5回まで
  • 13歳以上
  • 登録:2011/06/12 23:59:45
  • 終了:2011/06/20 00:00:03

回答(1件)

id:windofjuly No.1

うぃんど回答回数2625ベストアンサー獲得回数11492011/06/13 01:26:20

【1】仕組み

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

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

(1)ベース

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

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


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

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

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

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

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

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

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

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

(4)HTMLを記述します

 

【3】もう少し詳しく

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

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

 

【4】お願い

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

 

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

id:mi-kun6520

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

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

ありがとうございます。

2011/06/13 13:21:15
  • id:windofjuly
    うぃんど 2011/06/16 01:59:30
    CS5なら下記参照
     
    イメージマップ
    http://help.adobe.com/ja_JP/dreamweaver/cs/using/WScbb6b82af5544594822510a94ae8d65-7c15a.html
    イメージマップについて
    http://help.adobe.com/ja_JP/dreamweaver/cs/using/WScbb6b82af5544594822510a94ae8d65-7c14a.html
    クライアントサイドのイメージマップの挿入
    http://help.adobe.com/ja_JP/dreamweaver/cs/using/WScbb6b82af5544594822510a94ae8d65-7c13a.html
    イメージマップのホットスポットの修正
    http://help.adobe.com/ja_JP/dreamweaver/cs/using/WScbb6b82af5544594822510a94ae8d65-7c12a.html

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません