PDA

View Full Version : Mouseover Tabs Menu help



Dazza30
03-10-2011, 11:39 AM
1) Script Title: Mouseover Tabs Menu help

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex1/mouseovertabs.htm

3) Describe problem: I have been looking for a script that is similar to the TOP Features script on this site http://www.carphonewarehouse.com/mobiles/mobile-phones/SAMSUNG-I5800-GALAXY-APOLLO/PPAY

Yesterday I came across the Mouseover Tabs menu script and have been looking for a way of having upto 10tabs populated by images and when moused over a description is displayed below instead of links.

Can someone please help with this?

ddadmin
03-11-2011, 12:35 AM
Instead of the default UL list menu as the main menu items, you're free to replace it with just image links instead. The key is just to remove the rel="" attribute inside each menu link into the image's A element instead, for example:


<div id="mytabsmenu" class="tabsmenuclass">
<a href="#" rel="gotsubmenu[selected]"><img src="dd1.gif" /></a> <a href="#" rel="gotsubmenu"><img src="dd2.gif" rel="gotsubmenu" /></a> <a href="#"><img src="dd3.gif" /></a>
</div>

<div id="mysubmenuarea" class="tabsmenucontentclass">

<!--1st link within submenu container should point to the external submenu contents file-->
<a href="submenucontents.htm" style="visibility:hidden">Sub Menu contents</a>

</div>

<script type="text/javascript">
//mouseovertabsmenu.init("tabs_container_id", "submenu_container_id", "bool_hidecontentsmouseout")
mouseovertabsmenu.init("mytabsmenu", "mysubmenuarea", true)

</script>

As far as showing a description instead of a row of links, simply replace the sub menu contents inside submenucontents.htm with what you wish to show.