ホームページ作成で質問です。

イメージマップ内の複数あるリンクですが、このリンクの上にマウスが来た場合に
「ウィンドウ」で内容を表示したいです。
「ウィンドウ」とは、新規IE画面ではなく、ダイアログでもなく・・・うまく伝えられませんが、
例えばhttp://www.hatena.ne.jp/にアクセスした時に、ウェブアルバムのアイコンの上に
カーソルを持っていくと、「写真や動画をアップロードできる、総容量が~~~」と表示される物が
私の望んでいるイメージに近い物です。(できればフォントサイズは指定したいです)


●困りごとのイメージ
県の地図をイメージマップで作り、個々の市ごとに別ページにリンクをさせたが、
イメージマップが細かすぎて市の名前が表示できない。という感じです。

回答の条件
  • 1人2回まで
  • 登録:2009/06/26 15:13:54
  • 終了:2009/06/26 18:22:56

ベストアンサー

id:drowsy No.2

drowsy回答回数1163ベストアンサー獲得回数882009/06/26 15:43:03

ポイント40pt

javascriptでできると思います。

文字の大きさの指定もできるし、見た目を好みの感じにすることも可能です。

ライブラリ

http://javascriptist.net/docs/libraries_tooltip.html

サンプル(「Roll over me」という文章のとこにカーソルを持っていて下さい)

http://www.dhtmlgoodies.com/scripts/bubble-tooltip/bubble-toolti...



javascriptを使わないやり方

http://design-develop.net/web-design/easycsstooltip.html



お手元にdreamweaverがあるなら、レイヤー機能とか使ったら

簡単かもしれません。

http://www.non-period.com/be/dw/8/038.html

その他の回答(2件)

id:HALSPECIAL No.1

HALSPECIAL回答回数407ベストアンサー獲得回数862009/06/26 15:38:16

ポイント10pt

areaタグにtitle属性をつければよいと思います。


マップ <MAP> <AREA>

http://html.eweb-design.com/0603_map.html

※サンプルあり

id:drowsy No.2

drowsy回答回数1163ベストアンサー獲得回数882009/06/26 15:43:03ここでベストアンサー

ポイント40pt

javascriptでできると思います。

文字の大きさの指定もできるし、見た目を好みの感じにすることも可能です。

ライブラリ

http://javascriptist.net/docs/libraries_tooltip.html

サンプル(「Roll over me」という文章のとこにカーソルを持っていて下さい)

http://www.dhtmlgoodies.com/scripts/bubble-tooltip/bubble-toolti...



javascriptを使わないやり方

http://design-develop.net/web-design/easycsstooltip.html



お手元にdreamweaverがあるなら、レイヤー機能とか使ったら

簡単かもしれません。

http://www.non-period.com/be/dw/8/038.html

id:kent0608 No.3

kent0608回答回数220ベストアンサー獲得回数232009/06/26 17:06:47

ポイント30pt

予め説明文章が記入されているdiv要素を作り、cssプロパティをdisplay:noneとしておきます。

そしてjavascriptを使って、マウスオーバー時のイベント処理に、そのdiv要素のcssプロパティをdisplay:none → display:block にすればOKです。

詳しい処理ははてなのjsソースを追っていけば分かるのですが、それをここに記載してよいものか判断できませんので、firebugなどを用いてご自身の目で確認してください。

はてなの場合、独自のライブラリを使っているようですので、汎用的に記述したいのであれば、jQueryなどのオープンソースライブラリを活用すると良いと思います。

コメントはまだありません

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

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

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

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