www.webdeveloper.com
Results 1 to 10 of 10

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

  1. #1
    Join Date
    Dec 2007
    Location
    New Jersey
    Posts
    6

    Change nav image to 'on' image by page id

    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!
    Last edited by jasonbdesign; 12-07-2007 at 09:35 AM.

  2. #2
    Join Date
    Dec 2007
    Location
    New Jersey
    Posts
    6

    I Need Help!

    Hello? Anyone?

  3. #3
    Join Date
    Dec 2007
    Location
    New Jersey
    Posts
    6
    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!!!

  4. #4
    Join Date
    Oct 2007
    Location
    Western Massachusetts, USA
    Posts
    387
    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')">
    Computer programmer / web developer.

  5. #5
    Join Date
    Dec 2007
    Location
    New Jersey
    Posts
    6
    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

  6. #6
    Join Date
    May 2007
    Posts
    205
    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;



  7. #7
    Join Date
    Dec 2007
    Location
    New Jersey
    Posts
    6

    Sort of

    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.

  8. #8
    Join Date
    May 2007
    Posts
    205
    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.
    Attached Files Attached Files

  9. #9
    Join Date
    Dec 2007
    Location
    New Jersey
    Posts
    6

    Thanks!!

    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!

  10. #10
    Join Date
    May 2008
    Posts
    2

    This is what I have been looking for but with images

    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 Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles