Need help - javascript onmouseover rollover effects

PoorDoggie · 08-01-2009, 03:52 AM

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

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

)
????: NamePros.com http://www.namepros.com/programming/600353-need-help-complicated-javascript-onmouseover-rollover.html
????: NamePros.com http://www.namepros.com/showthread.php?t=600353

Thank you all

nasaboy007 · 08-01-2009, 06:53 AM

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 · 08-01-2009, 12:34 PM

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.
????: NamePros.com http://www.namepros.com/showthread.php?t=600353

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

HTML Code:

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 · 08-01-2009, 06:52 PM

GIVEN UP!!!

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.

nasaboy007 · 08-01-2009, 11:27 PM

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 · 08-02-2009, 03:55 AM

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

08-01-2009, 06:53 AM	#2 (permalink)
nasaboy007 Senior Member Join Date: Jul 2005 Location: NJ Posts: 1,219	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) __________________ Hacksar.com - Your source for random computer tips and tricks! MySiteMemberships.com - Keep track of your site registration information! Like my post? Rep is appreciated!

08-01-2009, 12:34 PM	THREAD STARTER #3 (permalink)
PoorDoggie Soon to be RICHdoggie! Join Date: Jan 2005 Location: UK Posts: 2,408	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. ????: NamePros.com http://www.namepros.com/showthread.php?t=600353 What I need is a way to do the css thing, for example: HTML Code: 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.

08-01-2009, 11:27 PM	#5 (permalink)
nasaboy007 Senior Member Join Date: Jul 2005 Location: NJ Posts: 1,219	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. __________________ Hacksar.com - Your source for random computer tips and tricks! MySiteMemberships.com - Keep track of your site registration information! Like my post? Rep is appreciated!

08-01-2009, 06:52 PM	THREAD STARTER #4 (permalink)
PoorDoggie Soon to be RICHdoggie! Join Date: Jan 2005 Location: UK Posts: 2,408	GIVEN UP!!! 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.

08-02-2009, 03:55 AM	THREAD STARTER #6 (permalink)
PoorDoggie Soon to be RICHdoggie! Join Date: Jan 2005 Location: UK Posts: 2,408	oh ok, wicked... I'll go look that up thank you very much.

Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)