How to use background images on mouseover tabs menu

**dmm2020** · 11-13-2009, 11:42 PM

1) Script Title: Mouseover tabs menu

2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...seovertabs.htm

3) Describe problem:

How in the hell do you substitute image backgrounds instead of the colors with this script?

Plain color background is just outright lame and useless for professional grade websites.

**ddadmin** · 11-17-2009, 10:55 PM

The markup for the menu was intentionally set to be minimalistic, so you can customize it as you see fit. Lets say you want to customize the look of the main menu items to adopt the look of Uber Round Tabs. That's easily done just by dropping in the CSS and giving the menu the designated ID value:

Code:

<link rel="stylesheet" type="text/css" href="mouseovertabs.css" />

<script src="mouseovertabs.js" type="text/javascript">

/***********************************************
* Mouseover Tabs Menu- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for this script and 100s more
***********************************************/

</script>

<style type="text/css">

/*Credits: Dynamic Drive CSS Library */
/*URL: http://www.dynamicdrive.com/style/ */

.ubercolortabs{
padding: 0;
width: 100%;
overflow: hidden;
background: transparent;
}

.ubercolortabs ul{
font: bold 11px Arial, Verdana, sans-serif;
margin: 0;
padding: 0;
list-style: none;
}

.ubercolortabs li{
display: inline;
margin: 0 2px 0 0;
padding: 0;
text-transform: uppercase;
}


.ubercolortabs a{
float: left;
color: white;
background: #804000 url(roundleft.gif) no-repeat left top; /*default background color of tabs, left corner image*/
margin: 0 2px 0 0;
padding: 0 0 1px 3px;
text-decoration: none;
letter-spacing: 1px;
}

.ubercolortabs a span{
float: left;
display: block;
background: transparent url(roundright.gif) no-repeat right top; /*right corner image*/
padding: 7px 9px 3px 6px;
cursor: pointer;
}

.ubercolortabs a span{
float: none;
}


.ubercolortabs a:hover, .ubercolortabs li.selected a{
background-color: #AE5300; /*background color of tabs onMouseover*/
color: white;
}

.ubercolortabs a:hover span{
background-color: transparent;
}


.ubercolordivider{ /*CSS for horizontal line.*/
clear: both;
padding: 0;
width: 100%;
height: 5px;
line-height: 5px;
background: #804000; /*background color of horizontal line*/
border-top: 1px solid #fff; /*Remove this to remove border between bar and tabs*/
}

</style>


<body>

<div id="mytabsmenu" class="ubercolortabs">
<ul>
<li><a href="http://www.javascriptkit.com" rel="gotsubmenu[selected]"><span>JavaScript Kit</span></a></li>
<li><a href="http://www.cssdrive.com" rel="gotsubmenu"><span>CSS Drive</span></a></li>
<li><a href="http://www.codingforums.com"><span>No Sub Menu</span></a></li>
</ul>
</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>

**dmm2020** · 11-18-2009, 12:31 AM

I ended up settling for something else. The Uber tabs just don't have the appeal, appearance or even functionality I need. In fact nearly all the tab scripts I found so far only go half way.

I like the idea of the menu bar tabs being linked to the lower bar contents, the problem I find now, I have yet to find tabs that remember the page defaults or that I could set page defaults and I could return to on mouseout of the tabs wrapper which includes the tabs and menu content. The tabs I found so far that have the mouseout actually in the script execute on mouseout of the tabs themselves, which means links in the menubar below are useless.

I am struggling right now trying to get script work with the 3D look I need for a project for one of my clients.

Thread: How to use background images on mouseover tabs menu

Thread Tools

Search Thread

How to use background images on mouseover tabs menu

Bookmarks

Bookmarks

Posting Permissions