Simulating a hover event

Question

jonsan32 12 Junior Poster in Training

13 Years Ago

Trying to use a <body id=""> tag to simulate a hover event on any given image of my navbar. Is it possible? Could a "swap image" script work? I'm willing to place the images in an "li,ul" list if need be.

Any advice on this or any other aspect of my code is welcome. Thanks.

<div style="width:100%;display:scroll;position:fixed;top:0px;left:0px;" class="spannav">


<table width=100% height=100 bgcolor="#ffffff"><tr><td width=50% style="padding-left:25px">

<img src="http://i40.photobucket.com/albums/e250/jonsan32/New%20Album/epicheader.png" width="400" />

</td><td width=50% align="right">




<table width=100% border=0><tr>
<td align="center" valign="bottom" style="padding-bottom:0px; padding-left:0px;">
<a href="http://www.epicbasketball.com"><img src="http://i40.photobucket.com/albums/e250/jonsan32/New%20Album/epicevent3.png" height="95" name="event" /></a>
</td>


<td align="center" valign="bottom" style="padding-bottom:8px; padding-right:0px;">
<a href="http://www.epicbasketball.com/p/3on3-tournaments.html"><img src="http://i40.photobucket.com/albums/e250/jonsan32/New%20Album/bb097a8b.jpg" height=90  onmouseover="this.src='http://i40.photobucket.com/albums/e250/jonsan32/New%20Album/7620b8f9.jpg';" onmouseout="this.src='http://i40.photobucket.com/albums/e250/jonsan32/New%20Album/bb097a8b.jpg';" /></a>
</td>

<td align="center" valign="bottom" style="padding-bottom:13px; padding-right:8px;">
<a href="http://www.epicbasketball.com/p/clinics.html"><img src="http://i40.photobucket.com/albums/e250/jonsan32/New%20Album/c6c9985f.jpg" height=80  onmouseover="this.src='http://i40.photobucket.com/albums/e250/jonsan32/New%20Album/4f63da4d.jpg';" onmouseout="this.src='http://i40.photobucket.com/albums/e250/jonsan32/New%20Album/c6c9985f.jpg';" /></a>
</td>

<td align="center" valign="bottom" style="padding-bottom:11px; padding-right:5px;">
<a href="http://www.epicbasketball.com/p/workouts.html"><img src="http://i40.photobucket.com/albums/e250/jonsan32/New%20Album/dfdc548d.jpg" height=95  onmouseover="this.src='http://i40.photobucket.com/albums/e250/jonsan32/New%20Album/c6025384.jpg';" onmouseout="this.src='http://i40.photobucket.com/albums/e250/jonsan32/New%20Album/dfdc548d.jpg';" /></a>
</td>

<td align="center" valign="bottom" style="padding-bottom:14px; padding-right:5px;">
<a href="http://www.epicbasketball.com/p/forum_02.html"><img src="http://i40.photobucket.com/albums/e250/jonsan32/New%20Album/26c44db6.jpg" height=90  onmouseover="this.src='http://i40.photobucket.com/albums/e250/jonsan32/New%20Album/f95f83e2.jpg';" onmouseout="this.src='http://i40.photobucket.com/albums/e250/jonsan32/New%20Album/26c44db6.jpg';" /></a>
</td>

<td align="center" valign="bottom" style="padding-bottom:4px; padding-right:0px;">
<a href="http://www.epicbasketball.com/p/members.html"><img src="http://i40.photobucket.com/albums/e250/jonsan32/New%20Album/60b6dfe3.jpg" height=110  onmouseover="this.src='http://i40.photobucket.com/albums/e250/jonsan32/New%20Album/08b918c5.jpg';" onmouseout="this.src='http://i40.photobucket.com/albums/e250/jonsan32/New%20Album/60b6dfe3.jpg';" /></a>
</td>

<td align="center" valign="bottom" style="padding-bottom:20px; padding-right:10px;">
<a href="http://www.epicbasketball.com/p/more.html"><img src="http://i40.photobucket.com/albums/e250/jonsan32/New%20Album/47019086.jpg" height=80  onmouseover="this.src='http://i40.photobucket.com/albums/e250/jonsan32/New%20Album/0ca3af52.jpg';" onmouseout="this.src='http://i40.photobucket.com/albums/e250/jonsan32/New%20Album/47019086.jpg';" /></a>
</td>

</tr></table>
























</td></tr></table><img src="http://i40.photobucket.com/albums/e250/jonsan32/New%20Album/gradient.png" height="20" width="100%" /></div>

javascript

Edited 13 Years Ago by jonsan32 because: n/a

2 Contributors
8 Replies
259 Views
1 Week Discussion Span
Latest Post 13 Years Ago Latest Post by jonsan32

Airshow 416 WiFi Lounge Lizard

13 Years Ago

Hi Jonsan,

Things are made slighly tricky by the scripts already on the page and we need to ensure that we don't hijack their onload handlers.

I think this will do what you want but it's untested.

Delete onload="....." from the body tag.
Add id="spannav" to the <table> tag that currently has class="spannav"
Change the "Events" nav link to be the same as all the others (ie with mouseover and mouseout handlers for image swapping).
Add the following script to each page, and set the variable pageID to:
- Events: 0
- 3on3: 1
- Clinics: 2
- Workouts: 3
- Forum: 4
- Membership: 5

pageID = 3;//On each of the six pages, set this value to 0|1|2|3|4|5.
function setNavHighlight(){
	var spannav = document.getElementById('spannav');
	if(spannav) {
		var navLinks = spannav.getElementsByTagName('a');
		var pageLink = navLinks[pageID];
		if(pageLink){
			pageLink.onMouseover();//trigger the mouseover event
			pageLink.onMouseout = null;//remove the mouseout event
			pageLink.href = null;//remove the hyperlink action
		}
	}
}
addEventListener ? addEventListener("load", setNavHighlight, false) : attachEvent('onload', setNavHighlight);

You can put this inside its own or any of the existing <script></script> tags (preferably in the document head).

As I say, it's untested so may need debugging.

Airshow

Edited 13 Years Ago by Airshow because: n/a

Airshow 416 WiFi Lounge Lizard

13 Years Ago

Jonsan,

Try setting alerts in the function to see if it is called and if so, how far it gets.

Let me know the result.

Airshow

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

jonsan32 12 Junior Poster in Training · Answer 1 · 2011-09-11T12:40:38+00:00

Very interesting way of going about it. It seems like it should work, but does not. Should I change the id spannav to something else, so that it doesn't interfere with the class and div already labeled as such? Do I need to set an id for each image? Thanks so much for your help.

<style type="text/css">
div.spannav {
z-index: 99;
width:100%;
padding:0;
  margin:0;
}</style>


<div style="width:100%;display:scroll;position:fixed;top:0px;left:0px;" class="spannav">
 
 
<table width=100% height=100 bgcolor="#ffffff"><tr><td width=50% style="padding-left:25px">
 
<img src="http://i40.photobucket.com/albums/e250/jonsan32/New%20Album/epicheader.png" width="400" />
 
</td><td width=50% align="right">
 
 
 
 
<table width=100% border=0 id="spannav"><tr>

 
<td align="center" valign="bottom" style="padding-bottom:0px; padding-right:0px;">
<a href="http://www.epicbasketball.com"><img src="http://i40.photobucket.com/albums/e250/jonsan32/New%20Album/epicevent4.png" height=95 onmouseover="this.src='http://i40.photobucket.com/albums/e250/jonsan32/New%20Album/epicevent3.png';" onmouseout="this.src='http://i40.photobucket.com/albums/e250/jonsan32/New%20Album/epicevent4.png';" /></a>
</td>


 
<td align="center" valign="bottom" style="padding-bottom:8px; padding-right:0px;">
<a href="http://www.epicbasketball.com/p/3on3-tournaments.html"><img src="http://i40.photobucket.com/albums/e250/jonsan32/New%20Album/bb097a8b.jpg" height=90  onmouseover="this.src='http://i40.photobucket.com/albums/e250/jonsan32/New%20Album/7620b8f9.jpg';" onmouseout="this.src='http://i40.photobucket.com/albums/e250/jonsan32/New%20Album/bb097a8b.jpg';" /></a>
</td>
 
<td align="center" valign="bottom" style="padding-bottom:13px; padding-right:8px;">
<a href="http://www.epicbasketball.com/p/clinics.html"><img src="http://i40.photobucket.com/albums/e250/jonsan32/New%20Album/c6c9985f.jpg" height=80  onmouseover="this.src='http://i40.photobucket.com/albums/e250/jonsan32/New%20Album/4f63da4d.jpg';" onmouseout="this.src='http://i40.photobucket.com/albums/e250/jonsan32/New%20Album/c6c9985f.jpg';" /></a>
</td>
 
<td align="center" valign="bottom" style="padding-bottom:11px; padding-right:5px;">
<a href="http://www.epicbasketball.com/p/workouts.html"><img src="http://i40.photobucket.com/albums/e250/jonsan32/New%20Album/dfdc548d.jpg" height=95  onmouseover="this.src='http://i40.photobucket.com/albums/e250/jonsan32/New%20Album/c6025384.jpg';" onmouseout="this.src='http://i40.photobucket.com/albums/e250/jonsan32/New%20Album/dfdc548d.jpg';" /></a>
</td>
 
<td align="center" valign="bottom" style="padding-bottom:14px; padding-right:5px;">
<a href="http://www.epicbasketball.com/p/forum_02.html"><img src="http://i40.photobucket.com/albums/e250/jonsan32/New%20Album/26c44db6.jpg" height=90  onmouseover="this.src='http://i40.photobucket.com/albums/e250/jonsan32/New%20Album/f95f83e2.jpg';" onmouseout="this.src='http://i40.photobucket.com/albums/e250/jonsan32/New%20Album/26c44db6.jpg';" /></a>
</td>
 
<td align="center" valign="bottom" style="padding-bottom:4px; padding-right:0px;">
<a href="http://www.epicbasketball.com/p/members.html"><img src="http://i40.photobucket.com/albums/e250/jonsan32/New%20Album/60b6dfe3.jpg" height=110  onmouseover="this.src='http://i40.photobucket.com/albums/e250/jonsan32/New%20Album/08b918c5.jpg';" onmouseout="this.src='http://i40.photobucket.com/albums/e250/jonsan32/New%20Album/60b6dfe3.jpg';" /></a>
</td>
 
<td align="center" valign="bottom" style="padding-bottom:20px; padding-right:10px;">
<a href="http://www.epicbasketball.com/p/more.html"><img src="http://i40.photobucket.com/albums/e250/jonsan32/New%20Album/47019086.jpg" height=80  onmouseover="this.src='http://i40.photobucket.com/albums/e250/jonsan32/New%20Album/0ca3af52.jpg';" onmouseout="this.src='http://i40.photobucket.com/albums/e250/jonsan32/New%20Album/47019086.jpg';" /></a>
</td>
 
</tr></table>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
</td></tr></table><img src="http://i40.photobucket.com/albums/e250/jonsan32/New%20Album/gradient.png" height="20" width="100%" /></div>

<style type="text/css">
pageID = 0;//On each of the six pages, set this value to 0|1|2|3|4|5.
function setNavHighlight(){
	var spannav = document.getElementById('spannav');
	if(spannav) {
		var navLinks = spannav.getElementsByTagName('a');
		var pageLink = navLinks[pageID];
		if(pageLink){
			pageLink.onMouseover();//trigger the mouseover event
			pageLink.onMouseout = null;//remove the mouseout event
			pageLink.href = null;//remove the hyperlink action
		}
	}
}
addEventListener ? addEventListener("load", setNavHighlight, false) : attachEvent('onload', setNavHighlight);
</style>

jonsan32 12 Junior Poster in Training · Answer 2 · 2011-09-11T13:37:20+00:00

And PS, I just now switched the <style type="text/css"> to <style type="text/javascript"> and I moved the id=spannav to the first div to make it more like your instructions. Still a no-go, though.

jonsan32 12 Junior Poster in Training · Answer 3 · 2011-09-13T11:32:58+00:00

Ok, sir. How about this alternative. I've learned a lot over the past days of searching for this and this is what I've come up with. This is for another site, btw.

I have the code below setup. I'm wondering if I can apply id tags to each li link, then with a "body id=" link on any given page, I can switch that link's id from class=select to class=current. Would that work?

Here's the code, including the stylesheet

<style type="text/css">

.nav {
height:35px; 
background: url(http://dl.dropbox.com/u/5739741/Dropline%20Menus/cssplay.co.uk/pro_line_0.gif) repeat-x; 
position:relative; 
font-family:arial, verdana, sans-serif; 
font-size:14px; 
width:1000px; 
z-index:500;
}

.nav .table {
display:table; 
margin:0 auto;
}

.nav .select,
.nav .current {
margin:0; 
padding:0; 
list-style:none; 
display:table-cell; 
white-space:nowrap;
}

.nav li {
margin:0; 
padding:0; 
height:auto; 
float:left;
}

.nav .select a {
display:block; 
height:35px; 
float:left; 
background: url(http://dl.dropbox.com/u/5739741/Dropline%20Menus/cssplay.co.uk/pro_line_0.gif); 
padding:0 30px 0 30px; 
text-decoration:none; 
line-height:35px; 
white-space:nowrap; 
color:#ddd;
}

.nav .current a {
display:block; 
height:35px; 
float:left; 
background: url(http://dl.dropbox.com/u/5739741/Dropline%20Menus/cssplay.co.uk/pro_line_2.gif); 
padding:0 0 0 15px; 
text-decoration:none; 
line-height:35px; 
white-space:nowrap; 
color:#fff;
}

.nav .current a b {
display:block; 
padding:0 30px 0 15px; 
background:url(http://dl.dropbox.com/u/5739741/Dropline%20Menus/cssplay.co.uk/pro_line_2.gif) right top;
}

.nav .select a:hover, 
.nav .select li:hover a {
background: url(http://dl.dropbox.com/u/5739741/Dropline%20Menus/cssplay.co.uk/pro_line_1.gif); 
padding:0 0 0 15px; 
cursor:pointer; 
color:#fff;
}

.nav .select a:hover b, 
.nav .select li:hover a b {
display:block; 
float:left; 
padding:0 30px 0 15px; 
background:url(http://dl.dropbox.com/u/5739741/Dropline%20Menus/cssplay.co.uk/pro_line_1.gif) right top; 
cursor:pointer;
}

.nav .select_sub {
display:none;
}

/* IE6 only */
.nav table {
border-collapse:collapse; 
margin:-1px; 
font-size:1em; 
width:0; 
height:0;
}

.nav .sub {
display:table; 
margin:0 auto; 
padding:0; 
list-style:none;
}

.nav .sub_active .current_sub a, 
.nav .sub_active a:hover {
background:transparent; 
color:#f00;
}

.nav .select :hover .select_sub, 
.nav .current .show {
display:block; 
position:absolute; 
width:1000px; 
top:35px; 
background:url(http://dl.dropbox.com/u/5739741/Dropline%20Menus/cssplay.co.uk/back_0.gif); 
padding:0; 
z-index:100; 
left:0; 
text-align:center;
}

.nav .current .show {
z-index:10;
}

.nav .select :hover .sub li a, 
.nav .current .show .sub li a {
display:block; 
float:left; 
background:transparent; 
padding:0 10px 0 10px; 
margin:0; 
white-space:nowrap; 
border:0; 
color:#444;
}

.nav .current .sub li.sub_show a {
color:#088; 
cursor:default; 
background:url(http://dl.dropbox.com/u/5739741/Dropline%20Menus/cssplay.co.uk/back_1.gif);
}

.nav .select :hover .sub li a:hover, 
.nav .current .sub li a:hover {
visibility:visible; 
color:#088; 
background:url(http://dl.dropbox.com/u/5739741/Dropline%20Menus/cssplay.co.uk/back_1.gif);
}

</style>





<div class="nav">

<div class="table">

<div class="row">





  

<ul class="current"><li><a href="#nogo"><b>J.A.M. Basketball</b><!--[if IE 7]><!--></a><!--<![endif]-->

<!--[if lte IE 6]><table><tr><td><![endif]-->

<div class="select_sub show">

	<ul class="sub">

		<li class="sub_show"><a href="#nogo">News & Registration</a></li>

		<li><a href="#nogo">J.A.M. Newsletters</a></li>

		<li><a href="#nogo">Camps & Clinics</a></li>

		<li><a href="#nogo">Schedules</a></li>

		<li><a href="#nogo">Standings</a></li>

		<li><a href="#nogo">Tournaments</a></li>

		<li><a href="#nogo">Contact List Signup</a></li>

	</ul>

</div>

<!--[if lte IE 6]></td></tr></table></a><![endif]-->

</li>

</ul>




<ul class="select"><li><a href="#nogo"><b>Community</b><!--[if IE 7]><!--></a><!--<![endif]-->

<!--[if lte IE 6]><table><tr><td><![endif]-->

<div class="select_sub">

	<ul class="sub">

		<li><a href="#nogo">Forum</a></li>

		<li><a href="#nogo">Local Event</a></li>

		<li><a href="#nogo">J.A.M. Photos</a></li>

		<li><a href="#nogo">Club Teams</a></li>

		<li><a href="#nogo">Daily Workouts</a></li>

		<li><a href="#nogo">Team Fundraisers</a></li>

		<li><a href="#nogo">Sponsors</a></li>


	</ul>

</div>

<!--[if lte IE 6]></td></tr></table></a><![endif]-->

</li>

</ul>



<ul class="select"><li><a href="#nogo"><b>Team Management</b><!--[if IE 7]><!--></a><!--<![endif]-->

<!--[if lte IE 6]><table><tr><td><![endif]-->

<div class="select_sub">

	<ul class="sub">

		<li><a href="#nogo">Write-up Contest</a></li>

		<li><a href="#nogo">Download Central</a></li>

		<li><a href="#nogo">Random Payment</a></li>

		<li><a href="#nogo">Uniform Purchase</a></li>

		<li><a href="#nogo">Facility Usage</a></li>

		<li><a href="#nogo">Hardships</a></li>

		<li><a href="#nogo">Cancellations</a></li>


	</ul>

</div>

<!--[if lte IE 6]></td></tr></table></a><![endif]-->

</li>

</ul>





<ul class="select"><li><a href="#nogo"><b>Extra Information</b><!--[if IE 7]><!--></a><!--<![endif]-->

<!--[if lte IE 6]><table><tr><td><![endif]-->

<div class="select_sub">

	<ul class="sub">

		<li><a href="#nogo">Are You New?</a></li>

		<li><a href="#nogo">FAQs</a></li>

		<li><a href="#nogo">Driving Directions</a></li>

		<li><a href="#nogo">League Rules</a></li>

		<li><a href="#nogo">Company Info</a></li>

		<li><a href="#nogo">Terms of Service</a></li>

		<li><a href="#nogo">Past Champions</a></li>


	</ul>

</div>

<!--[if lte IE 6]></td></tr></table></a><![endif]-->

</li>

</ul>





<ul class="select"><li><a href="#nogo"><b>Customer Relations</b><!--[if IE 7]><!--></a><!--<![endif]-->

<!--[if lte IE 6]><table><tr><td><![endif]-->

<div class="select_sub">

	<ul class="sub">

		<li><a href="#nogo">Contact Us</a></li>

		<li><a href="#nogo">Referees</a></li>

		<li><a href="#nogo">Feedback</a></li>

		<li><a href="#nogo">Tips & Advice</a></li>

		<li><a href="#nogo">Advertising</a></li>

		<li><a href="#nogo">Donations</a></li>

		<li><a href="#nogo">Website Tour</a></li>


	</ul>



</div></li></ul></div>




</div>

<!--[if lte IE 6]></td></tr></table></a><![endif]-->











</div>

Thank you!

jonsan32 12 Junior Poster in Training · Answer 4 · 2011-09-13T11:54:18+00:00

And here's another page I'm looking at that might give a clue into what I'm trying to accomplish: http://www.webdevtuts.net/coding/css/highlight-current-page-in-an-html-document-using-css/

Airshow 416 WiFi Lounge Lizard Team Colleague · Answer 5 · 2011-09-14T03:17:35+00:00

Jonsan,

Yes, it could be done with class-switching but only if the link is built in the right way. Remember that class-switching can only affect those aspects that are put in place with CSS. In the case of your nav links, they would need to be reformulated each to have a background images. Foreground images are put in place by HTML, not CSS.

Going back to my first idea, I wonder if recasting the code in jQuery would help. It's certainly simpler:

$(function(){
	$('.spannav a').eq(3).attr('href',null).mouseout(null).onmouseover();
});

With this, you don't even need to add id="spannav" because jQuery can address elements by classname. As long as class="spannav" is used just once, then the above jQuery should work with no chance of inadvertently affecting anything else on the page.

Just make sure jQuery is installed (with <script src="path/to/jquery"></script) on every page and that the 3 in .eq(3) is changed to 0|1|2|3|4|5 on each of the pages to correspond with the index of the appropriate nav link.

Airshow

jonsan32 12 Junior Poster in Training · Answer 6 · 2011-09-14T03:20:16+00:00

Much thanks! I will get on this. Appreciate your help once again. You and Muhammad Ali... The Greatest! :-)