change tab-image onclick

[Dania665]

Hi,

I have a horizontal navigation menu with 6 tabs (all images) at the top of my website. Each tab has 2 possible images (f.e. home_on.gif & home_off.gif) and is wrapped with a unique link(url), like so:

<div id="menu">
 <a href="www.site.com/home"><img src="images/home_on.gif"></a>
 <a href="www.site.com/subpage"><img src="images/subpage_off.gif"></a>
 etc.
</div>

Since I'm fairly new to Javascript, I could definitely use some help figuring out how to turn a tab image "on" (change the image) if a user clicks on it. And then if a user clicks on a different tab the currently "on" tab needs to be switched back to "off" and the new selection needs to be "on". When opening the standard site (www.site.com) the tab Home always needs to be "on".

Any help would be GREATLY appreciated.

PS I don't need any mouseover effects, they're already in my HTML doc.

[birdbrain]

Hi there Dania665,

It is getting a little late for me to work on a solution for you tonight. ;)

If you you can answer this question for me though, it will save me some time tomorrow.

Are there two or three images involved here?

By two I mean is the clicked image the "hover" image
By three I mean "off", "on" and "hover" images.

birdbrain

[Dania665]

Hi birdbrain,

Can imagine, it's indeed a bit late. :)

To answer your question: there are only two images involved,
so the clicked image (home_on.gif) is the hover image.

Hope that helps,

Dania665

[MichaelBluejay]

I'm confused. You say you want the image to switch to the on version when the user *clicks* it, but do you really mean when the user *points* to it?

Or do you mean that when the user lands on the new page, the clicked tab should display with the ON image by default?

[caffinated]

I think what you're trying to do may be done using css background images which is better all round:

a {[rest of spec for anchor];background:url(image_off.png) no-repeat;}
a:hover, a.active {[rest of spec for anchor];background:url(image_on.png) no-repeat;}

This means you place the text content of the anchor using 'text' but simply change the background of the anchor. Notice that you specify which page is active using the class="active" bit.

<div id="menu">
<a class="active" href="www.site.com/home">Home</a>
<a href="www.site.com/subpage">Next page</a>
etc.
</div>

Would this work for you?

Moreover, this process allows you to also change the colour of the text in the anchor with a little mod...

a {[rest of spec for anchor];background:url(image_off.png) no-repeat;color:#000;}
a:hover, a.active {[rest of spec for anchor];background:url(image_on.png) no-repeat;color:#FFF}

[caffinated]

oops, should have been a ; afer the last color:#FFF

[Dania665]

@MichaelBluejay The second option comes closest, so what i want is a 'You Are Here' navigation. My hover-effects already work.

@caffinated With some help from 'birdbrain' i already tried to implement this whilst using CSS, but now my Home-page is always selected and whenever i try to click on another page, nothing happens, except for Home staying selected.

PS I'm working with a 'masterpage' that is linked to a CMS.

[caffinated]

Possible solution: give each of your menu anchors an individual id and use javascript to change the html image (if you prefer to keep your existing structure) for that id only, perhaps?

Are you able to include a script function within the CMS for each individual page? I guess so, right? If so, you can put the script in a .js file and call it from the page content with a passed value, something like

<script type=text/javascript">menuChange('homepage')<script>

where menuChange is the function that identifies the menu id, makes the changes to the image src according to the passed parameter for the 'homepage' (swapped with the appropiate parameter for each subsequent page) using a series of "IF" statements in the js:

funtion swapMenu('activePage'){
if (activePage == 'homepage') {image change script here for the home page};
if (activePage == 'secondpage') {image change script here for the next page};
etc...

else {return}
}

Would that work for you?

[Dania665]

Apologies for my late reaction, but i fixed the problem whilst using jQuery. :)

For the people who are curious, it looks something like this:

$(document).ready(function(){
$('#a_{URL}').addClass('active');
});
</script>

<div id="menu">
 <ul id="tabs">
 <li><a id="a_home" href=#/home">Home</a></li>
 <li><a id="a_sub" href="#/sub">Sub</a></li>
 </ul>
</div>

So it compares the URL with the 'id' and my CSS changes the image when they match, using the 'active' class. Works like a charm.

Still a big thank you for thinking with me! :)