Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 11 of 11
  1. #1
    Senior Coder
    Join Date
    Jul 2003
    Location
    My pimped-out igloo in Canadia
    Posts
    1,966
    Thanks
    36
    Thanked 0 Times in 0 Posts

    minor document.getElementById() question -- should be an easy problem to solve :D

    i'm trying to modify a liorean script provided here... and by darn i nearly did it! but alas, i got stuck at the part when i tried to add multiple items to the document.getElementById() script at the bottom of the page. i know my problem is minor, so i suspect i will get laughed at by whoever corrects me
    ... its okay people, THEY'RE ONLY FEELINGS! *sniffle*. hehe, ahhh its okay, they grow back

    anyways, his script is on the bottom of this post:
    Image gallery trouble

    and here's my code
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
    <head>
    <title>Untitled Document</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <link rel="stylesheet" href="css/main.css" type="text/css" media="screen">
    
    <script>
    function openPages(){
      for (var i=0;i<arguments.length;i+=2){
         if (arguments[ i + 1]) window.open(arguments[ i ], arguments[ i + 1] )
      }
    }
    </script>
    
    </head>
    
    <body marginheight="0" leftmargin="0" topmargin="0" marginwidth="0">
    <table height="30" border="0" align="center" cellpadding="0" cellspacing=0>
      <tr align="center">
        <td height="30"><a href="images/ordersYellow.jpg" onClick="openPages('orders.htm','_menu2'); return showImage(this.href);"><img src="images/ordersGrey.jpg" id="orders" width="94" height="30" border="0"></a></td>
        <td height="30"><a href="images/inventoryYellow.jpg" onClick="openPages('orders.htm','_menu2'); return showImage(this.href);"><img src="images/inventoryGrey.jpg" id="inventory" width="94" height="30" border="0"></a></td>
        <td height="30"><img src="images/reportGrey.jpg" width="94" height="30"></td>
      </tr>
    </table>
    <script>
    function showImage(sImage){
        document.getElementById('orders','inventory').src=sImage;
        return false;
    }
    </script>
    </body>
    </html>
    Before you criticize someone, you should walk a mile in their shoes. That way, when you criticize them, you're a mile away and you have their shoes :)

  • #2
    Senior Coder
    Join Date
    Jul 2003
    Location
    My pimped-out igloo in Canadia
    Posts
    1,966
    Thanks
    36
    Thanked 0 Times in 0 Posts
    oh... hehe, one more thing.

    when a picture is changed, is there any way to make it so that if another picture link is clicked & changed on that page, the previously clicked / changed link reverts back to its original state?

    ex:
    Link 1 | Link2 | Link 3
    ...

    if i click on Link 1, i want it to change to Blue
    so i click...
    and now i have this:
    Blue | Link 2 | Link 3
    ...

    NOW if i click on Link 2, i want it to display Red.
    the result will be:
    Blue | Red | Link 3

    i want the result to be:
    Link 1 | Red | Link 3

    any ideas?

    heh, sorry for being a pain guys
    Last edited by canadianjameson; 05-29-2004 at 02:18 AM. Reason: decided not to tempt fate :)
    Before you criticize someone, you should walk a mile in their shoes. That way, when you criticize them, you're a mile away and you have their shoes :)

  • #3
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    10,965
    Thanks
    0
    Thanked 236 Times in 233 Posts
    Quote Originally Posted by canadianjameson
    i'm trying to modify a liorean script provided here... and by darn i nearly did it! but alas, i got stuck at the part when i tried to add multiple items to the document.getElementById() script at the bottom of the page. i know my problem is minor, so i suspect i will get laughed at by whoever corrects me
    ... its okay people, THEY'RE ONLY FEELINGS! *sniffle*. hehe, ahhh its okay, they grow back

    anyways, his script is on the bottom of this post:
    Image gallery trouble

    and here's my code
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
    <head>
    <title>Untitled Document</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <link rel="stylesheet" href="css/main.css" type="text/css" media="screen">
    
    <script>
    function openPages(){
      for (var i=0;i<arguments.length;i+=2){
         if (arguments[ i + 1]) window.open(arguments[ i ], arguments[ i + 1] )
      }
    }
    </script>
    
    </head>
    
    <body marginheight="0" leftmargin="0" topmargin="0" marginwidth="0">
    <table height="30" border="0" align="center" cellpadding="0" cellspacing=0>
      <tr align="center">
        <td height="30"><a href="images/ordersYellow.jpg" onClick="openPages('orders.htm','_menu2'); return showImage(this.href);"><img src="images/ordersGrey.jpg" id="orders" width="94" height="30" border="0"></a></td>
        <td height="30"><a href="images/inventoryYellow.jpg" onClick="openPages('orders.htm','_menu2'); return showImage(this.href);"><img src="images/inventoryGrey.jpg" id="inventory" width="94" height="30" border="0"></a></td>
        <td height="30"><img src="images/reportGrey.jpg" width="94" height="30"></td>
      </tr>
    </table>
    <script>
    function showImage(sImage){
        document.getElementById('orders','inventory').src=sImage;
        return false;
    }
    </script>
    </body>
    </html>
    getElementById expects only one id.

    document.getElementById('orders').src=sImage;
    document.getElementById('inventory').src=sImage;

  • #4
    Senior Coder
    Join Date
    Jul 2003
    Location
    My pimped-out igloo in Canadia
    Posts
    1,966
    Thanks
    36
    Thanked 0 Times in 0 Posts
    EEK. didn't work as planned. when i insert that into my code, the following happens:

    if a user clicks on Orders: both Orders and Inventory switch to Orders.
    if a user clicks Inventory: both Orders and Inventory switch to Inventory.

    any idea how to fix this?

    as well, once a second link is clicked, i need the first one to revert back to the unclicked status...
    Before you criticize someone, you should walk a mile in their shoes. That way, when you criticize them, you're a mile away and you have their shoes :)

  • #5
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    10,965
    Thanks
    0
    Thanked 236 Times in 233 Posts
    Quote Originally Posted by canadianjameson
    EEK. didn't work as planned. when i insert that into my code, the following happens:

    if a user clicks on Orders: both Orders and Inventory switch to Orders.
    if a user clicks Inventory: both Orders and Inventory switch to Inventory.

    any idea how to fix this?
    So, what is it that you really wanted? I just guessed that you were trying to set the specified image both to the 'orders' and 'inventory' ids when you did:

    document.getElementById('orders','inventory').src=sImage;

  • #6
    Senior Coder
    Join Date
    Jul 2003
    Location
    My pimped-out igloo in Canadia
    Posts
    1,966
    Thanks
    36
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by lise
    Your code was very useful, however somethings did not work.
    For instance I have 3 links. I want to make it do this:

    image | link2 | link3 (when first link is clicked)

    link1 | image | link3 (when 2nd link is clicked)

    link1 | link2 | image (when 3rd link is clicked)


    This is all I am getting:

    image | link2 | link3

    image | image | link3

    image | image | image


    Any way of making this work?
    essentially lise & I want the same thing. we want an image to change when the user clicks on it, then when the user clicks another link, we want the first link to revert back to its original, unclicked state, and the new link to appear clicked.

    what i have now is setup in my code
    orders.jpg, inventory.jpd, ordersYellow.jpg, inventoryYellow.jpg

    here's what i want

    initial state:
    orders.jpg, inventory.jpg

    orders link clicked state:
    ordersYellow.jpg, inventory.jpg

    inventory link clicked state:
    orders.jpg, inventoryYellow.jpg

    any ideas?
    Before you criticize someone, you should walk a mile in their shoes. That way, when you criticize them, you're a mile away and you have their shoes :)

  • #7
    Regular Coder
    Join Date
    Jul 2002
    Posts
    698
    Thanks
    0
    Thanked 0 Times in 0 Posts
    the easiest is to reset all the images to default state and then set the image to be changed. and you post is quite odd you talk of 3 links yet I only see 2.

  • #8
    Senior Coder
    Join Date
    Jul 2003
    Location
    My pimped-out igloo in Canadia
    Posts
    1,966
    Thanks
    36
    Thanked 0 Times in 0 Posts
    how would i onClick reset all images to default values?

    i only put two because the third one isnt linked yet. as for resetting all the images... i could have as many as 12 images using this changer... wouldnt it be less heavy on the server load / page reload looking bad to save the lastclicked ID in a variable, and then onNextClick revert that id back, and set a new ID to that variable?

    i know the logic, but i can't code it
    Before you criticize someone, you should walk a mile in their shoes. That way, when you criticize them, you're a mile away and you have their shoes :)

  • #9
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    10,965
    Thanks
    0
    Thanked 236 Times in 233 Posts
    Code:
    <a href="images/inventoryYellow.jpg" onClick="openPages('orders.htm','_menu2'); return showImage(this);"><img src="images/inventoryGrey.jpg" width="94" height="30" border="0"  /></a>
    <a href="images/orderYellow.jpg" onClick="openPages('inventory.htm','_menu2'); return showImage(this);"><img src="images/orderGrey.jpg" width="94" height="30" border="0" /></a>
    <a href="images/reportYellow.jpg" onClick="openPages('report.htm','_menu2'); return showImage(this);"><img src="images/reportGrey.jpg" width="94" height="30" border="0" /></a>
    ...
    <script type="text/javascript">
    //global object to remember details of last clicked link
    var lastClick=new Object();
    lastClick.obj=null;
    lastClick.defaultSrc=null;
    
    function showImage(oLink){
        if (lastClick.obj){
          if (lastClick.obj!=oLink){ 
             lastClick.obj.firstChild.src=lastClick.defaultSrc; //revert back previously clicked image
          }
          else return false; //do nothing, clicked link is clicked again
        }
    
        var defaultSrc = oLink.firstChild.src;
        oLink.firstChild.src=oLink.href; //change image to clicked mode
    
        //remember last clicked details
        lastClick.obj=oLink;
        lastClick.defaultSrc=defaultSrc;
    
        return false;
    }
    </script>

  • #10
    Senior Coder
    Join Date
    Jul 2003
    Location
    My pimped-out igloo in Canadia
    Posts
    1,966
    Thanks
    36
    Thanked 0 Times in 0 Posts
    ------
    Before you criticize someone, you should walk a mile in their shoes. That way, when you criticize them, you're a mile away and you have their shoes :)

  • #11
    Senior Coder
    Join Date
    Jul 2003
    Location
    My pimped-out igloo in Canadia
    Posts
    1,966
    Thanks
    36
    Thanked 0 Times in 0 Posts
    i am lost for words

    thank you Glenn
    Before you criticize someone, you should walk a mile in their shoes. That way, when you criticize them, you're a mile away and you have their shoes :)


  •  

    Posting Permissions

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