Need help - Complicated Javascript onmouseover rollover effects

PoorDoggie · Aug 1, 2009

Need help - javascript onmouseover rollover effects

Hi there.

Future Ventures - Local Marketing

If you have a look on that page the navigation has a fancy (although simple) rollover effect.

The problem is that the whole idea was that people would be able to mouseover the images (ie: about, portfolio, contact etc...) and it would display some content in the blue area below. So what I wanted was for the rollover effect to work when someone mouseover'd the different navigation options, then for it to stay like that if they dragged their mouse down into the blue area below, and only to revert back to the normal if they mouseout of the whole section.

I hope you understand, lol, its so difficult to explain. If anyone can point me in the right direction that would be good. Here is my code:

HTML:

<!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>
<script type="text/javascript">
if(document.images){
pic1=new Image();
pic1.src="home.gif";
pic2=new Image();
pic2.src="about_on.gif";
pic3=new Image();
pic3.src="packages_on.gif";
pic4=new Image();
pic4.src="portfolio_on.gif";
pic5=new Image();
pic5.src="contact_on.gif";
}
function roll_over(img_name, img_src)
   {
   document[img_name].src = img_src;
   }
</script>
<style type="text/css">
body {
	background: url('images/bg.gif');
	background-repeat: repeat-x;
	margin: 0;
	font-family: Tahoma, Arial, Serif;
}
#nav {
	text-align: center;
	vertical-align: top;
	height: 28px;
}
</style>
</head>

<body>

<center>
<table cellpadding="0" cellspacing="0">
	<tr>
		<td>
		<img src="http://www.namepros.com/images/header.gif" alt="Future Ventures | Raise revenue, increase repeat custom and maximise profits" /></td>
	</tr>
	<tr>
		<td id="nav">
			<img src="http://www.namepros.com/images/divider.gif" />
				<img src="http://www.namepros.com/images/home_on.gif" name="home" />
			<img src="http://www.namepros.com/images/divider.gif" />
				<img src="http://www.namepros.com/images/about.gif" name="about" onmouseover="roll_over('home','images/home.gif');roll_over('about','images/about_on.gif');" onmouseout="roll_over('home','images/home_on.gif');roll_over('about','images/about.gif');" />
			<img src="http://www.namepros.com/images/divider.gif" />
				<img src="http://www.namepros.com/images/packages.gif" name="pck" onmouseover="roll_over('home','images/home.gif');roll_over('pck','images/packages_on.gif');" onmouseout="roll_over('home','images/home_on.gif');roll_over('pck','images/packages.gif');" />
			<img src="http://www.namepros.com/images/divider.gif" />
				<img src="http://www.namepros.com/images/portfolio.gif" name="folio" onmouseover="roll_over('home','images/home.gif');roll_over('folio','images/portfolio_on.gif');" onmouseout="roll_over('home','images/home_on.gif');roll_over('folio','images/portfolio.gif');" />
			<img src="http://www.namepros.com/images/divider.gif" />
				<img src="http://www.namepros.com/images/contact.gif" name="contact" onmouseover="roll_over('home','images/home.gif');roll_over('contact','images/contact_on.gif');" onmouseout="roll_over('home','images/home_on.gif');roll_over('contact','images/contact.gif');" />
			<img src="http://www.namepros.com/images/divider.gif" />
		</td>
	</tr>
</table>
</center>

</body>

</html>

(disclaimer: please don't shout at me for using tables, I really don't understand divs :p)

Thank you all

nasaboy007 · Aug 1, 2009

something like this? Free CSS Drop-Down Menu Framework - LWIS.NET

it can be done mostly with css (js is only needed for IE6 or earlier)

PoorDoggie · Aug 1, 2009

nasaboy007 thanks for that... I've read up about it and I understand the whole concept now with css and all that...

but I can't think how to do it for my particular scenario.

When you mouseover each of the images in the navigation menu of my website I want a different box of content to display below it. Not like a dropdown menu.

I can't think how to do it. There needs to be the "home" content box when the page initially opens then when you mouseover the different menu options it changes the content below, but it needs to revert back to the "home" content when you mouseout.

What I need is a way to do the css thing, for example:

HTML:

div{display:none;}
a:hover div{display:block;}

but the problem is that you then have to nest the <div> within the <a> tag.

I can't figure out how to position it all like that.

Thanks
Tom

---------- Post added at 07:34 PM ---------- Previous post was at 06:34 PM ----------

I've got it working as best i can on futureventures.co.uk/beta now, so you can kinda see what I want.

All I need now is for that to work like that, but if you mouseover "about" and then move the mouse pointer to where the content box below has changed, I need the content to stay there.

PoorDoggie · Aug 2, 2009

GIVEN UP!!! :p I know... i couldn't wait anymore (in anticipation, not impatience

) so I just went ahead and did it the standard way everyone else would do it, without flashy mouseover nonsense. :p

nasaboy007 · Aug 2, 2009

sometimes you just gotta think outside of the box, so here's my outside-of-the-box idea for implementation.

use jQuery and it's AJAX support to have it so that it changes the content of that div on the hover over. once it changes, it shouldn't change back until you hover over on one of the other tabs (which will accordingly cause the ajax to trigger and pull new content for the page). that would actually be a cool way not only because it would do exactly what you want, but you'd learn how to use jquery AND ajax in one shot (jquery makes ajax a BREEZE, you have no idea - not to mention ajax seems to be the future of web). it works fine the way you have it now (standard clicking), but i just think it would be fun (personally) to figure out how to get it to work in the original way, even if i didnt end up using it on my final site.

PoorDoggie · Aug 2, 2009

oh ok, wicked... I'll go look that up thank you very much.

Need help - Complicated Javascript onmouseover rollover effects

More options

PoorDoggie

Soon to be RICHdoggie!VIP Member

nasaboy007

VIP Member

PoorDoggie

Soon to be RICHdoggie!VIP Member

PoorDoggie

Soon to be RICHdoggie!VIP Member

nasaboy007

VIP Member

PoorDoggie

Soon to be RICHdoggie!VIP Member

Similar threads

We're social

New posts

Auction activity

What non .com extensions have you sold in 2024?

Polls of interest

Popular this week

Community favorite

Popular this month

Blog favorites

Pinned

Appreciation

Agreement