Change nav IMAGE to 'over' state based on page id

What to change the navigation image to the over state

[AdamElvis]

I want to find some very useful code that will help in the 'rollover' state of a button to be displayed depending on page name or id.

So presuming I can work from one central navigation file that will be referenced as an include:
<!--#Include File="filename.html"-->

Then each navigation button will have an id. That id would match the id of the page.
<meta name="PageName" content="homepage"> or would it be in the body tag?

<a href="index.shtml" id="homepage"
onmouseover="changeImages('but_home', 'images/but_home_over.gif'); return true;"
onmouseout="changeImages('but_home', 'images/but_home.gif'); return true;"
onmousedown="changeImages('but_home', 'images/but_home_over.gif'); return true;"
onmouseup="changeImages('but_home', 'images/but_home_over.gif'); return true;">
<img name="but_home" src="images/but_home.gif" width="194" height="20" border="0" alt="Home" id="homepage"></a><br>
<a href="expertise_personal.shtml" id="expertpersonal"
onmouseover="changeImages('but_exper', 'images/but_exper_over.gif'); return true;"
onmouseout="changeImages('but_exper', 'images/but_exper.gif'); return true;"
onmousedown="changeImages('but_exper', 'images/but_exper_over.gif'); return true;"
onmouseup="changeImages('but_exper', 'images/but_exper_over.gif'); return true;">
<img name="but_exper" src="images/but_exper.gif" width="194" height="20" border="0" alt="Expertise & Personal Info" id="expertpersonal"></a><br>

===============
so in this example, I would like the loaded navigation from the include file to change the two instances (img reference and the mouseout reference) of the but_home.gif to but_home_over.gif because it is loading the home page.

I would prefer this to be an extension of the javascript, but willing to hear options using CSS. Here is the javascript used:

<script type="text/javascript">
<!--

function newImage(arg) {
if (document.images) {
rslt = new Image();
rslt.src = arg;
return rslt;
}
}

function changeImages() {
if (document.images && (preloadFlag == true)) {
for (var i=0; i<changeImages.arguments.length; i+=2) {
document[changeImages.arguments[i]].src = changeImages.arguments[i+1];
}
}
}

var preloadFlag = false;
function preloadImages() {
if (document.images) {
but_home_over = newImage("images/but_home_over.gif");
but_expertisepersonal_over = newImage("images/but_expertisepersonal_over.gif");
preloadFlag = true;
}
}

// -->
</script>
==============================
My knowledge is very limited with extensive programming. I am good at implementing what I am given to work with, but please keep your answer clear enough with that understanding.
Thank you,
Adam

[Receptional Andy]

Hi AdamElvis, welcome to WebmasterWorld :)

I think you would be better off using CSS for both the hover images and for the highlighting of the current page.

There was a recent thread on highlighting the current page with CSS:
Active Link or On Page identification, highlight menu [webmasterworld.com]

There have also been various discussions of css-based image rollovers [google.com]

[AdamElvis]

Hi Andy,
Thank you for the reply. But both cases only deal with text based links. I am dealing with images as my menu and need help with that. And alot of the answers seemed all over the place. Could use some help in narrowing down a direct answer that I can work with right off the top. Any thoughts on that?
Thank you, Adam

[kaled]

Here's some CSS from my site you may find useful. It provides six variations using a single image file that contains three glassy button images in a vertical stack (white, red, black). The buttons are blank, i.e. text is provided by html.

a.btn32whiteblack, a.btn32whitered, a.btn32blackwhite, a.btn32blackred, a.btn32redwhite, a.btn32redblack {
display:block; margin-top:8px; margin-bottom:2px; width:128px; height:25px; padding-top:7px; text-align:center; overflow:hidden;
background-image :url(images/buttons32_wrbk_w.png);
background-repeat:no-repeat;
}

a.btn32whiteblack, a.btn32whitered { background-color:white; background-position:top; color:black }
a.btn32blackwhite, a.btn32blackred { background-color:black; background-position:bottom; color:white }
a.btn32redwhite, a.btn32redblack { background-color:#E00000; background-position:center; color:white }

a.btn32whiteblack:hover, a.btn32redblack:hover { background-color:black; background-position:bottom; color:white }
a.btn32blackwhite:hover, a.btn32redwhite:hover { background-color:white; background-position:top; color:black }
a.btn32whitered:hover, a.btn32blackred:hover { background-color:#E00000; background-position:center; color:white }

Kaled.

[AdamElvis]

Thank you Kaled for this example. I'm not a very good programmer, in fact probably not even considered one at all. But I am good at seeing something in action and figuring it out. Would it be okay to ask for your site address so I can see it in action and compare the affect of changing an element? As well, I don't see in there how it picks up which page it is on and then knows how to display the correct image based on the PAGE ID? To refresh, I want this to work in a manner that I can work from a central INCLUDE file and when it loaded into the browser, it will read the PAGE ID and 'force' the matching image to display in the navigation in the over state.
Thanks, Adam

[edited by: AdamElvis at 4:08 pm (utc) on May 22, 2008]

[kaled]

To be honest, I'm not sure what it is you are trying to achieve. You're using javascript to preload images etc. probably because that's what you've read somewhere, but it's a rubbish method of achieving so-called "rollovers".

Although a few older browsers may struggle, the pure CSS method I have used is far simpler (but doesn't give you a "mouse-down" image).

I'll make a guess at what you want...

Assuming you want a different image for each link, this could be controlled by assigning each link a unique id (throughout the site) and using a single css file that specifies a different background image for each id.

If you explain clearly and concisely what it is you are trying to achieve (rather than how you think it might be achieved) then I'm sure someone here can help or point you in the right direction.

Kaled.

[AdamElvis]

Fair enough. Okay, here goes as clearly as I can muster.

Firstly, here is one site I would like to achieve this result on: <removed>
On the left side there is a navigation bar. If you hover any of the links you see the obvious mouseover change. The 'mouse-down' state isn't such a big deal for me. So turning/upgrading to CSS is not a problem, just something I would need to learn. I only use JS because that is what most programs use when outputting the images and page code at the same time.

That being said, when you click on the link, you are taken to say, the 'Overview' page. When you are on that page, I had to modify the code slightly so that the hover state is now the active state for the Overview button. As you will see, it is in gold when you are ON that page.

So what I am faced with is this. I would like to use a central navigation file that has all the mouseover's in normal mode. I would use <!--#Include File="incl_navbar.html"--> to pull in that file to each page using .shtml as my file extension for the primary page.

Now what I would like, is there to be some way I can put a PAGE ID in the overview.shtml page and then the contactus.shtml page and so on. When the incl_navbar.html page loads, each button will have a corresponding ID. If they match, then it will change the visible state of the button to the 'over' image, hence the gold version being displayed as it is now.... i must interject, darn I wish I knew more programming right now... okay, back on track. So with this functionality, I can make as many updates as I want to the navigation menu file, upload the ONE file and it is picked up by all the pages. Instead, right now, I have to go through all the pages to make that change of either adding or removing a link.

So in closing, I really hope I have explained myself clearly here. I want to stress, that I am open to learning a new way of coding for mouse over functions, but would need to see the primary code example and then I would integrate it from there into my sites moving forward. I have just done it this way for soooooo long, I haven't invested time to learn any other way. Kind of the addage, "if it ain't broke, don't fix it" attitude. And "far simpler" is all a matter of perspective. Right now, this all seems very overwhelming. But I will appreciate your help.
Thank you,
Adam

[edited by: jatar_k at 8:03 pm (utc) on May 22, 2008]
[edit reason] no urls thanks [/edit]

[kaled]

Ok, I think I understand...

You want to use a different link image in the navigation area to identify the page that is currently displayed.

To identify each page uniquely...

<div id="nav_page_id_1">
<!--#Include File="incl_navbar.html"-->
</div>

You would then have to ensure each navigation link has a unique id

<a href="page_1.html" id="nav_link_id_1">page one</a>

You would then have to set up a unique CSS rule for each navigation link something like this.

#nav_page_id_1 #nav_link_id_1 { background-image:url(images/nav_this_page.png) }
#nav_page_id_2 #nav_link_id_2 { background-image:url(images/nav_this_page.png) }
...etc.
/* NOTE: Unique CSS rules must follow generic rules otherwise generic rules will override the unique rules */ 

The container for the navigation is uniquely identified.
Each link in the navigation is uniquely identified.
CSS rules change the background image of one link for each page.

Kaled.