USEMAPでエリア指定した(画像の)一部にマウスオーバーした時に、補足説明画像をポップアップさせる方法はありますでしょうか?
従来はCSSの処理で、一つの画像にマウスオーバーした時に下記【1】の手順で別の説明用画像をポップアップ表示する処理が出来ているのですが、(通常はhidden,マウスオーバーでvisible)
今回【2】のようなUSEMAPで指定した(大きな画像の)一部のEREA指定部にマウスがオーバーした時点でポップアップ出来れば良いなあ…と、質問させていただきました。
教えていただければうれしいです。よろしくお願いします。<(_ _)>
ちなみに、USEMAPを使う理由ですが、当該画像エリア部をクリックすると対応したビデオ映像が別窓で表示されるようにしています。
この動作は必要ですのでご配慮ください。
なお、ALT属性は画像が使えません。
よろしくお願いします。
-------------------------------------------------------
【1】
<HEAD>
.popup01 A {
POSITION: relative
}
.popup01 A IMG.message {
LEFT: -50px; VISIBILITY: hidden; WIDTH: 250px; POSITION: absolute; TOP: -50px; HEIGHT: 42px
}
.popup01 A:hover {
VISIBILITY: visible
}
.popup01 A:hover IMG.message {
VISIBILITY: visible
}
</HEAD>
<BODY>
<A href="001.jpg" ALT="*" BORDER="0"><IMG class=message src="popup001.gif" border=0></A>
</BODY>
-------------------------------------------------------
【2】
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
<!--
function sub_open_movie01(){
window.open("./movie-con01.html",""," width=600,height=550,left=50,top=50,menubar=yes,scrollbars=yes");
}
//-->
</HEAD>
<BODY>
<img src="002.jpg" USEMAP="#UserMapName">
<MAP NAME="UserMapName">
<AREA SHAPE="RECT" COORDS="10,10,50,50" HREF="javascript:sub_open_movie01();">
</MAP>
</BODY>
-------------------------------------------------------
記述はCSS,Javascript等いずれでも結構ですので、マウスオーバーでポップアップ→マウスアウトで消え、クリックで別窓映像表示してくれればうれしいです。
単一の画像に対して(マウスオーバー・アウト)の記述はネットで検索するとたくさん教えてもらえるのですが、USEMAP中での処理に関して(マウスオーバー・アウトとクリックで)各々別の動作(画像表示ON,OFFと別窓表示window.open)をするような解説は見つけられませんでした。
よろしくお願いします!<(_ _)>
No.1ベストアンサー
- 回答日時:
>ネットで検索するとたくさん教えてもらえるのですが、USEMAP中で
>の処理に関して、各々別の動作をするような解説は見つけられま
>せんでした。
単純に、そのまま組み合わせてしまえばよいのでは?
<サンプル>
<html>
<head>
<script type="text/javascript">
<!--
function A() {
alert('クリックされた時の処理');
return false;
}
function B(m_id, f) {
document.getElementById(m_id).style.display = f?'block':'none';
}
//-->
</script>
</head>
<body>
<img src="002.jpg" usemap="#UserMapName">
<div id="mes" style="width:12em; background:#FF0; display:none;">
メッセージとか画像とか
</div>
<map name="UserMapName">
<area shape="rect" coords="10,10,50,50" href="#"
onclick="return A()" onmouseover="B('mes',true)" onmouseout="B('mes')">
</map>
</body>
</html>
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- JavaScript jQueryでのドラッグアンドドロップについて 1 2022/07/30 09:10
- JavaScript html5に変えるとスライドショーが消えてしまった。 3 2022/03/26 19:53
- HTML・CSS スクロールすると追従する画像のコードを書いているのですが、追従する画像の大きさの調節が上手くいきませ 2 2022/04/18 12:52
- JavaScript アップロードファイルの種類によって処理を分岐させたいのですが書き方が分からずアドバイスお願いします 4 2023/06/17 19:12
- HTML・CSS 下にスクロールしても、追従するボタンのコードを書いたのですが、ボタンの中の画像が半分しか表示されない 1 2022/04/16 21:31
- HTML・CSS ボタンをクリックした時に、入力フォームのすぐ下部に、「入力欄が空白です」というテキストメッセージが表 1 2022/04/27 16:25
- HTML・CSS flex の各子要素を横幅 100% にしたい 1 2022/09/22 21:25
- JavaScript 入力フォームの javascript で メールアドレスの正規チェックをを行い、ボタンをクリックして 2 2022/04/27 16:06
- HTML・CSS ヘッダーの画像にメインエリアがかぶってしまいます 1 2022/11/28 14:06
- JavaScript 画像の表示位置 3 2022/12/23 08:25
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
画像の上に画像リンクを貼る方法
-
スライダーを実装した場合、ペ...
-
画面の表示位置を指定させて表...
-
オンマウスで、画像切り替え+...
-
残像を残しながらjpg画像を自動...
-
JAVASCRIPTでアクセス毎に画像...
-
画像クリック→メッセージボック...
-
「画像の上を流れる文字列」を...
-
小窓について教えて下さい。
-
MAX関数を使ってからLEFT JOIN...
-
htmlの記述で link rel=styles...
-
背景色を一定時間ごとにランダ...
-
文字を固定したいのですが…
-
javascriptでURLにマウスオーバー
-
[急ぎ] videoタグで埋め込んだm...
-
文字と数字が混在する要素のsor...
-
離れた場所にマウスオーバーで...
-
ホームページビルダー15 メニュ...
-
c++std::string型をTCHARに変換...
-
タブで開いてさらにタブ内をア...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
textareaに画像を表示したい
-
JavaScript スライドの画像にリ...
-
1枚の画像をクリックして複数の...
-
HTMLで条件分岐はできますか?
-
Javascript で共通の処理をどこ...
-
Gifアニメ、最後のコマに行った...
-
JavaScriptとチェックボックス...
-
画像の重なりの順序を代える方...
-
画像ランダム表示、しかしダブ...
-
javascriptで毎月替わる画像
-
1枚の画像をクリックすると複数...
-
オンマウスで、画像切り替え+...
-
透過pngの透明部分以外をクリッ...
-
Javascriptで指定した日付と時...
-
jQueryスライドショー画像への...
-
JavaScript で flexslider の画...
-
lightbox2をiframeから外に表示...
-
重なった画像にクリックイベン...
-
Twitterの埋め込みしたWebペー...
-
画像をフォルダに入れれば表示...
おすすめ情報