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

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


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

●質問者: ippoppo
●カテゴリ:インターネット ウェブ制作
✍キーワード:IE アイコン アクセス アップロード イメージ
○ 状態 :終了
└ 回答数 : 3/3件

▽最新の回答へ

1 ● HALSPECIAL
●10ポイント

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


マップ <MAP> <AREA>

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

※サンプルあり


2 ● drowsy
●40ポイント ベストアンサー

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


3 ● kent0608
●30ポイント

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

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

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

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

関連質問


●質問をもっと探す●



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