Home/ Questions/Q 6688983
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-26T05:27:59+00:00

I’m having an issue creating a mouseover menu for an image within a Content

  • 0

I’m having an issue creating a mouseover menu for an image within a Content Editor Web part.

The functionality I desire is to have two images in a table, side by side. When a user hovers over one of the images, a drop-down menu appears with a few different links. When the user moves their mouse off of the image, the menu will disappear.

This is my HTML for the Content Editor Web Part containing the images:

<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>

These two images are side by side. Now, I would like to incorporate the effect I made note of above as seen at this link:
http://roshanbh.com.np/2008/06/accordion-menu-using-jquery.html

(Only the mouseover effect and essentially for only one “header” (the image) as I will only have three sub-menu links. )

I never really learned javascript, but merely look resources I found online and incorporate them onto pages. Can someone please outline how I would structure the HTML and Jquery with the appropriate DIV tags to get this working? Any help would be greatly appreciated.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Instead of the img tags I would put divs into my html code and the images would be the background of my divs. I would put a select tag into each div with display: none as default for the select tags inside the divs. My divs would have a class attribute and on mouseover event I would change the display of the select in the div where the hover was triggered. When mouseout would happen I would change back the display of the inner div. Try to search on google for more information.

    I hope this helps

    • 0