Can I change an image to its hover state based on the url?

[jonsan32]

I have 6 horizontal navigation image links on top of my site. The regular images are black n white, but on the hover they transform to a colored image. Each image leads to a different page on my site, I'm wondering if I can make the image corresponding to that page light up whenever on that page.

Any help would be great. Thanks in advance.

[jonsan32]

I'm assuming this is a tricky one. If this helps, I found a page that semi-explains what I need: http://www.456bereastreet.com/archive/200503/setting_the_current_menu_state_with_css/

I still can't figure out how to make the hovered image stay, however. Anyone?

[jonsan32]

OK, so I'm getting further and further... Mostly just posting in case someone else needs this exact thing later on. I've searched around the internet for this question, and it had absolutely no replies in any forum each time it was asked.

So... it seems as though this can be done with a background image change block for the css rollover effect: http://www.webmasterworld.com/forum83/4224.htm

Then combine that with an onload id declaration of which image to activate like this: http://www.cssportal.com/horizontal-menus/456bereastreet.htm

When I get it going, I'll post the rest. If I'm hopeless or missing something simpler, let me know. Thanks for any help that's out there.

[Rahul V S]

Hi,
i think there is a little more insight needed because, there are say like "n number" of ways to perform this but want to know how you are trying to perform this.

do you reload the entire page on click of the highlighted image?
if yes, then i think, as every page will be having its own piece of code so just place the highlighted image and the rest of the images will be black n white.

if no, and you are just refreshing that part of the document then try this,
onclick of the image; first, remove the onmouseout event listener (only for that particular image for other images add the onmouseout event listener).

hope this helps...

[jonsan32]

my page is http://www.epicbasketball.com/ and the nav links are top-right. I'll be adding text and making each black n white. the hover effect where they turn into color is easy, but i wanted to know how to get the color one to stick for whatever page is loaded. that div's html is on every page of my site automatically, and i don't want 5 different versions of the code embedded in each page. I just want each to become "active" or "in focus" or "hovered" based on the specific url. I'll post here if i figure it out. thank u for your time. i truly appreciate the response.

[jonsan32]

The best explanation and example of exactly what I'm trying to do: http://www.sohtanaka.com/web-design/active-state-in-css-navigations/

I'm struggling cuz I suck. If anyone can throw me a lifeline, more power to you :-)

[jonsan32]

Here's what I have so far. I've got all the images to hover correctly in my html editor, but they don't hover on my site. Don't know what I'm doing wrong. And I'm not sure what the next step is to get one hover to stay when I'm on that particular page (something about 'body id=events', I believe), but I'm still working on that. If anyone could finish this puzzle for me, it would save me a day or two, and would be highly appreciated. Thanks guys.

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


.epicevent a { 
display: block; 
width: 60px; 
height: 56px; 
background: transparent url(http://i40.photobucket.com/albums/e250/jonsan32/New%20Album/events-1.png) no-repeat; background-size: 55px;
}
.epicevent a:hover { 
background-position: 2px -65; 
}


.epic3on3 a { 
display: block; 
width: 60px; 
height: 60px; 
background: transparent url(http://i40.photobucket.com/albums/e250/jonsan32/New%20Album/3on3-1.png) no-repeat; background-size: 55px;
}
.epic3on3 a:hover { 
background-position: 2px -65; 
}


.epicclinic a { 
display: block; 
width: 60px; 
height: 47px; 
background: transparent url(http://i40.photobucket.com/albums/e250/jonsan32/New%20Album/clinics.png) no-repeat; background-size: 55px;
}
.epicclinic a:hover { 
background-position: 2px -54; 
}


.epicworkouts a { 
display: block; 
width: 70px; 
height: 51px; 
background: transparent url(http://i40.photobucket.com/albums/e250/jonsan32/New%20Album/workouts.png) no-repeat; background-size: 65px;
}
.epicworkouts a:hover { 
background-position: 3px -55; 
}


.epicforums a { 
display: block; 
width: 60px; 
height: 64px; 
background: transparent url(http://i40.photobucket.com/albums/e250/jonsan32/New%20Album/forum.png) no-repeat; background-size: 55px;
}
.epicforums a:hover { 
background-position: 1px -64; 
}


.epicmembership a { 
display: block; 
width: 90px; 
height: 60px; 
background: transparent url(http://i40.photobucket.com/albums/e250/jonsan32/New%20Album/membership.png) no-repeat; background-size: 90px;
}
.epicmembership a:hover { 
background-position: 3px -65; 
}


.epicmore a { 
display: block; 
width: 53px; 
height: 60px; 
background: transparent url(http://i40.photobucket.com/albums/e250/jonsan32/New%20Album/more.png) no-repeat; background-size: 53px;
}
.epicmore a:hover { 
background-position: 1px -60; 
}
</style>


<div style="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">
<div class="epicevent"> 
<a href="http://www.epicbasketball.com/"></a> 
</div></td>


<td align="center" valign="bottom">
<div class="epic3on3"> 
<a href="http://www.epicbasketball.com/p/3on3-tournaments.html"></a> 
</div></td>

<td align="center" valign="bottom">
<div class="epicclinic"> 
<a href="http://www.epicbasketball.com/p/clinics.html"></a> 
</div></td>

<td align="center" valign="bottom">
<div class="epicworkouts"> 
<a href="http://www.epicbasketball.com/p/workouts.html"></a> 
</div></td>

<td align="center" valign="bottom">
<div class="epicforums"> 
<a href="#"></a> 
</div></td>

<td align="center" valign="bottom">
<div class="epicmembership"> 
<a href="http://www.epicbasketball.com/p/members.html"></a> 
</div></td>

<td align="center" valign="bottom">
<div class="epicmore"> 
<a href="http://www.epicbasketball.com/p/more.html"></a> 
</div></td>

</tr></table>
























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

[shravan24]

Use Jquery Light Box feature it will be more help ful for your specific Requeirement.
http://wowslider.com/jquery-slider-3d-digit-stack-v-demo.html#