- Impact
- 18
Ok, so I've got this tabbed display on my website at the moment:
Future Ventures - Local Marketing
As you can see, the content of the blue area changes as you mouseover the nav buttons, and the colour of the nav buttons change (two different images).
The problem now is that I cannot find any way to do these things:
I'm sorry to be thick and stuff, but I've looked everywhere, typed all possible combinations of search terms into google, picked through the jquery website (which is incredibly difficult to understand, I think) and I can't figure it out... heres my code:
Future Ventures - Local Marketing
As you can see, the content of the blue area changes as you mouseover the nav buttons, and the colour of the nav buttons change (two different images).
The problem now is that I cannot find any way to do these things:
- I want the content of the boxes to stay the same ONLY when the mouse is over the corresponding tab OR the content below... otherwise I want it to revert back to the "home" option.
- I want the tab that you have mouseover's image to stay changed when you move to the content below, and only to change back to normal when the mouse is over a different tab option OR when the mouse isn't over any of it.
I'm sorry to be thick and stuff, but I've looked everywhere, typed all possible combinations of search terms into google, picked through the jquery website (which is incredibly difficult to understand, I think) and I can't figure it out... heres my code:
HTML:
<? $page="home"; ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Future Ventures - Local Marketing</title>
<link rel="stylesheet" type="text/css" href="default.css" />
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery-ui.js"></script>
<script type="text/javascript">
$(document).ready( function()
{
ROLL.rollover.init();
}
);
ROLL = {};
ROLL.rollover =
{
init: function()
{
this.preload();
$(".ro").hover(
function () { $(this).attr( 'src', ROLL.rollover.newimage($(this).attr('src')) ); },
function () { $(this).attr( 'src', ROLL.rollover.oldimage($(this).attr('src')) ); }
);
},
preload: function()
{
$(window).bind('load', function() {
$('.ro').each( function( key, elm ) { $('<img>').attr( 'src', ROLL.rollover.newimage( $(this).attr('src') ) ); });
});
},
newimage: function( src )
{
return src.substring( 0, src.search(/(\.[a-z]+)$/) ) + '_on' + src.match(/(\.[a-z]+)$/)[0];
},
oldimage: function( src )
{
return src.replace(/_on\./, '.');
}
};
$(function() {
$("#tabs").tabs({
event: 'mouseover'
});
});
</script>
</head>
<body>
<center>
<table cellpadding="0" cellspacing="0" width="1000px">
<tr>
<td><img src="images/header.gif" alt="Future Ventures | Raise revenue, increase repeat custom and maximise profits" /></td>
</tr>
<tr>
<td id="nav">
<?php
// navigation menu... grr...
// start nav array:
$navButton = array(
'home' => 'images/home.gif',
'about' => 'images/about.gif',
'packages' => 'images/packages.gif',
'portfolio' => 'images/portfolio.gif',
'contact' => 'images/contact.gif');
$navLinks = array(
'home' => 'index.php',
'about' => 'about.php',
'packages' => 'packages.php',
'portfolio' => 'portfolio.php',
'contact' => 'contact.php');
// page should be defined at the top of each script...
if($page == "home"){
$navButton['home'] = "images/home_on.gif";
}
else if($page == "about"){
$navButton['about'] = "images/about_on.gif";
}
else if($page == "packages"){
$navButton['packages'] = "images/packages_on.gif";
}
else if($page == "portfolio"){
$navButton['portfolio'] = "images/portfolio_on.gif";
}
else if($page == "contact"){
$navButton['contact'] = "images/contact_on.gif";
}
else{
// correct the page
$page = "home";
// set home button
$navButton['home'] = "images/home_on.gif";
}
// ok... lets start building the navbar...
echo '<div id="tabs"><ul>
<li><a href="#tabs-1"><img src="'.$navButton['home'].'" class="ro" /></a></li>
<li><a href="#tabs-2"><img src="'.$navButton['about'].'" class="ro" /></a></li>
<li><a href="#tabs-3"><img src="'.$navButton['packages'].'" class="ro" /></a></li>
<li><a href="#tabs-4"><img src="'.$navButton['portfolio'].'" class="ro" /></a></li>
<li><a href="#tabs-5"><img src="'.$navButton['contact'].'" class="ro" /></a></li>
</ul>';
// figures theres an easy way to do this...
echo '<div id="tabs-1"><img src="images/'.$page.'_box.gif" /></div>
<div id="tabs-2"><img src="images/about_box.gif" /></div>
<div id="tabs-3"><img src="images/packages_box.gif" /></div>
<div id="tabs-4"><img src="images/portfolio_box.gif" /></div>
<div id="tabs-5"><img src="images/contact_box.gif" /></div>
</div>';
?>
</td>
</tr>
<tr>
<td><img src="images/spacer.gif" width="1000px" height="12px" /></td>
</tr>
<tr>
<td class="content">
</tr>
</table>
</body>
</html>
