Change nav image to 'on' by page id

**jasonbdesign** · 12-07-2007 09:19 AM

Hello
I am a newbie so sorry if some of this doesn't make sense. Here's what I'm trying to do:

When a page loads, I want javascript to look for a page id. Example:
<div id="page1"></div>

Based on what the javascript finds, I want it to change a top nav image to the 'on' state to tell the user that they are on the current page.

I plan to have 7 top nav 'tabs' on each page. So if I had 7 corresponding pages, in each page I would put <div id="page1"></div> for page1.html or <div id="page2"></div> for page2.html, etc.

Here's my attempt:

function changeTab() {
var pageid = document.getElementById("page1");
var img = document.getElementById("tabimage1");

if (pageid == true) {
img.setAttribute("src","images/tabimage1_on.png");
}

Here's the HTML:

Somewhere on the page, <div id="page1"></div>

Then for the tab image:
<ul>
<li><a href="page1.html" target="_top"><img src="images/tabimage1_off.png" alt="page" name="tabimage1" border="0" id="tabimage1" /></a></li>
</ul>

My guess is that I will have to list maybe like this?
var pageid = document.getElementById("page1");
var pageid = document.getElementById("page2");
var pageid = document.getElementById("page3");

And I assume I will need to have a body onload images function to load the on tab images.

I would REALLY appreciate your help, and if you do help me out, please know I started learning javascript yesterday so I really know nothing and am pretty much guessing at this.

Thank you so much!

**jasonbdesign** · 12-07-2007 11:35 AM

Hello? Anyone?

**jasonbdesign** · 12-07-2007 03:43 PM

I made another attempt. . . . I really don't know much.

<script type="text/javascript">
var img = new Array();
var i = 0;
var docid = document.getElementById("tabimage1");

function LoadImages()
{
img[0] = new Image();
img[0].src = "images/tab_off.png";
img[1] = new Image();
img[1].src = "images/tab_on.png";

document.images[0].src = img[0].src;

if(docid == "tabimage1") {
i = 1;
document.images[i].src = img[i].src;
}
}
</script>

<body onload="LoadImages()">
<img src="images/tab_off.png" id="tabimage1"/>

Please Help!!!

**savvykms** · 12-07-2007 03:48 PM

Try this:

Code:

function changeimage(imageid,imagesrc) { document.getElementById(imageid).src = imagesrc; }

Code:

<img src="images/tab_off.gif" id="timg01" alt="Tab" width="256" height="256" onmouseover="changeimage('timg01','images/tab_on.gif')" onmouseoff="changeimage('timg01','images/tab_off.gif')">

**jasonbdesign** · 12-07-2007 04:29 PM

Actually I don't want to do a mouseover on and off. I don't know if that was very clear.

I have seen a lot of mouse event stuff on here, but I want the image to change
onLoad by looking for an id that tells which image to change to 'on.'

Hopefully this clarifies things.

Thank you for your reply though

**gomisute** · 12-07-2007 04:43 PM

PHP Code:


function changeTab(){

//get the div element by its id

var thediv=document.getElementById('divid');



//get the image element by its id

var theimg=document.getElementById('imgid');



//now make the switch

theimg.src='newimagesource.png';



}

---------------
that's if you wanna hard-code everything in there...
to be able to use the function in different places with different calls to it
use this and call the function accordingly:

PHP Code:


function changeTab(divid,imgid,newsrc){

//get the div element by its id

var thediv=document.getElementById(divid);



//get the image element by its id

var theimg=document.getElementById(imgid);



//now make the switch

theimg.src=newsrc;



}

**jasonbdesign** · 12-07-2007 09:37 PM

That looks pretty simple. Is that PHP Code? The box says it is.

I think that's pretty close. I'm going to try to explain it without using code. I think that may help.

Say I have 7 pages. On each of those 7 pages, I have 7 nav tabs at the top that go to each one of those pages.

Each page would have a div id in it according to what page it is:
Example: page1.html has a div id="page1"

Let's use page1 as an example.
Page1 has all 7 tab images as the 'off' images initially.
Example: page1button_off.jpg, page2button_off.jpg, etc.

I'd like a script that looks to see (when any page loads) if it is page1, page2, page3, page4 , page5, page6 or page7.

Let's say the script sees that it's page2. It would then find the page2 id,
and use that as a basis to know which tab image to change to the 'on'
image, in this case: page2button_off.jpg to page2button_on.jpg

That's about the best I can explain it.

I haven't seen anything like this, but imagine how valuable it would be! wouldn't have to go into every html page and change one of the buttons to the on or active state! The site I am trying to do this for has a lot of subnav pages under one of those 7 main tabs. So I am basically trying to avoid having to go into each one and change the top tab image to on.

**gomisute** · 12-07-2007 10:23 PM

No, it's Javascript...I just used this forum's php tags to make it look nicer...
---

I see what you mean, now...
I wrote a script like this many months ago and submitted it to the javascript source and to this forum as well.
---

here is what you were looking for:

download the zip file and expand in to one directory
the open up tabs.html

---
this is a very inefficient way of doing this...
with PHP includes, you can make a header and include it into your pages so you won't have to repeat your code 7 times like I did.

good luck.
PS
I used colours to demo the script, but you can use the same script to switch bg images for the tabs.

**jasonbdesign** · 12-09-2007 08:10 PM

Thanks gomisute
I can't wait to try it out Monday morning. I'm sure other people will like being able to take a look at it too!

**AdamElvis** · 05-10-2008 10:25 PM

I have been searching for this script for hours. Finally thought I found my solution. Only to see that the script does not define for images and I am not sure how to change it to reference images only? Please advise as I feel I am very close to the answer finally. And you were right, this would be extremely helpful to many people I am sure as I know this is something I have wanted to do for a long time. Thank you.

Thread: Change nav image to 'on' by page id

Thread Tools

Display

Change nav image to 'on' image by page id

I Need Help!

Sort of

Thanks!!

This is what I have been looking for but with images

Thread Information

Users Browsing this Thread

Bookmarks

Bookmarks

Posting Permissions