SharePoint拡張可能なリンクメニューJqueryでマウスオーバーした画像

Question

コンテンツエディタWebパーツ内の画像のマウスオーバーメニューを作成する際に問題が発生しました。

私が望む機能は、テーブルに2つの画像を並べて並べることです。ユーザーが画像の1つ上を移動すると、いくつかの異なるリンクを含むドロップダウンメニューが表示されます。ユーザーがマウスを画像から離すと、メニューは消えます。

これは、画像を含むコンテンツエディタWebパーツのための私のHTMLです：

<table _moz_resizing="true"> 
<tbody> 
<tr> 
<td> 
<br/> 
<center><a href="/sites/XXXX/AllItems.aspx"><img src="/sites/XXXX/SiteAssets/Link2.png" _moz_resizing="true" alt=""/></a></center> 
</td> 
<td> 
<br/> 
<center><a href="/sites/XXXX/Lists/XXXXX/AllItems.aspx"><img src="/sites/XXX/SiteAssets/Link3.png" _moz_resizing="true" alt=""/></a></center> 
</td> 
</tr> 
</tbody> 
</table> 

これら2枚の画像が並んでいます。私は三つのサブを有することになるよう http://roshanbh.com.np/2008/06/accordion-menu-using-jquery.html

つのみ「ヘッダ」（画像）のための（唯一のマウスオーバー効果と本質的に：今、私は、このリンクで見られるように、上記のメモを作った効果を組み込むしたいです - メニューリンク）

私はJavaScriptを実際に学んだことはありませんでしたが、私はオンラインで見つけたリソースを見て、ページに組み込んでいます。誰かがこの作業をするために適切なDIVタグを使ってHTMLとJqueryをどのように構造化するかを説明してください。どんな助けでも大歓迎です。

Answer 1

imgタグの代わりに私はdivをHTMLコードに入れ、イメージは自分のdivの背景になります。 div内のselectタグのデフォルトとしてdisplay：noneを使用して、各divにselectタグを配置します。私のdivにはclass属性があり、mouseoverイベントでは、カーソルがトリガーされたdiv内のselectの表示を変更します。 mouseoutが起こると、内側のdivの表示を元に戻します。詳細についてはGoogleで検索してみてください。

私はこれが役に立ちそうです。