USEMAPでの指定区域にマウスオーバー→画像popup、クリックで別窓映像表示させる記述
USEMAPでエリア指定した（画像の）一部にマウスオーバーした時に、補足説明画像をポップアップさせる方法はありますでしょうか？
従来はCSSの処理で、一つの画像にマウスオーバーした時に下記【１】の手順で別の説明用画像をポップアップ表示する処理が出来ているのですが、（通常はhidden,マウスオーバーでvisible）
今回【２】のようなUSEMAPで指定した（大きな画像の）一部のEREA指定部にマウスがオーバーした時点でポップアップ出来れば良いなあ…と、質問させていただきました。
教えていただければうれしいです。よろしくお願いします。<(_ _)>
ちなみに、USEMAPを使う理由ですが、当該画像エリア部をクリックすると対応したビデオ映像が別窓で表示されるようにしています。
この動作は必要ですのでご配慮ください。
なお、ALT属性は画像が使えません。
よろしくお願いします。
-------------------------------------------------------
【１】
<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>
-------------------------------------------------------
【２】
<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）をするような解説は見つけられませんでした。
よろしくお願いします！<(_ _)>
お礼
アドバイスありがとう!