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.
Page 1 of 2 12 LastLast
Results 1 to 15 of 16
  1. #1
    New to the CF scene
    Join Date
    May 2005
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Post switching images on click

    hello all,

    I was wondering if anyone could assist me in this matter or if its even possible. My web site is broke down into tables where each table has its own background image and i was wondering if there was a way that if you clicked on a certain link somewhere on the page in say table_1 that it would change only table_2's background image and leave the rest alone? Any assistance in this matter would be greatly appreciated.

    Thank you,

  • #2
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    There are multiple ways of accomplishing what you want. Can you show us your code please?

  • #3
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,037
    Thanks
    0
    Thanked 250 Times in 246 Posts
    <a href="#" onclick="document.getElementById('table_2').style.backgroundImage='url(backg2.gif)'; return false">Change Background</a>

  • #4
    New to the CF scene
    Join Date
    May 2005
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Here is the html code. I would like to change the menu.gif located in a certain table to a different gif image when i click a link from a sub page that loads in the iframe. hopefully this helps and will give you all a understanding of what i need. If anyone could give me the how to that would be greatly appreciated thank you.

    <html>

    <head>
    <meta http-equiv="content-type" content="text/html;charset=iso-8859-1">
    <title>Test</title>
    </head>

    <body bgcolor="black" bgProperties="fixed">
    <center>
    <table width="100%" height="100%" border="0" cellPadding="0" cellSpacing="0" align="center">
    <tr><td><table width="900" height="100%" border="0" cellPadding="0" cellSpacing="0" align="center">
    <tr><td width="900" height="98" background="top.gif"></td></tr>
    <tr><td width="900" height="111" background="menu.gif"><table width="900" height="111" border="0" cellPadding="0" cellSpacing="0">
    <tr><td width="200"></td>
    <td width="100">
    <table width="100" height="111" border="0" cellPadding="0" cellSpacing="0">
    <tr><td width="100" height="111">
    <table width="100" height="111" border="0" cellPadding="0" cellSpacing="0">
    <tr>
    <td width="100%" height="30"></td>
    </tr>
    <tr>
    <td align="center" vAlign="top"><a href="q3.html" target="main"><img src="q3.gif" align="top" width="99" height="29" border="0"></a></td>
    </tr>
    </table>
    </td></tr>
    </table>
    </td>
    <td width="100">
    <table width="100" height="111" border="0" cellPadding="0" cellSpacing="0">
    <tr>
    <td width="100" height="111"><table width="100" height="111" border="0" cellPadding="0" cellSpacing="0">
    <tr><td width="100%" height="18"></td></tr>
    <tr>
    <td align="center" vAlign="top"><a href="q2.html" target="main"><img src="q2.gif" align="top" width="99" height="29" border="0"></a></td>
    </tr>
    </table></td>
    </tr>
    </table>
    </td>
    <td vAlign="top" width="100">
    <table width="100" height="111" border="0" cellPadding="0" cellSpacing="0">
    <tr><td align="center" vAlign="top" width="100" height="111"><table width="100" height="111" border="0" cellPadding="0" cellSpacing="0">
    <tr><td width="100%" height="9"></td></tr>
    <tr><td vAlign="top"><a><img src="b1.gif" border="0" width="99" height="29"></a></td></tr>
    </table></td></tr>
    </table>
    </td>
    <td width="100">
    <table width="100" height="111" border="0" cellPadding="0" cellSpacing="0">
    <tr>
    <td width="100" height="111">
    <table width="100" height="111" border="0" cellPadding="0" cellSpacing="0">
    <tr>
    <td width="100%" height="18"></td>
    </tr>
    <tr>
    <td align="center" vAlign="top"><a href="q1.html" target="main"><img src="q1.gif" align="top" width="99" height="29" border="0"></a></td>
    </tr>
    </table>
    </td>
    </tr>
    </table>
    </td>
    <td width="100">
    <table width="100" height="111" border="0" cellPadding="0" cellSpacing="0">
    <tr>
    <td align="center" vAlign="top">
    <table width="100" height="111" border="0" cellPadding="0" cellSpacing="0">
    <tr><td width="100%" height="30"></td></tr>
    <tr><td align="center" vAlign="top"><a href="q4.html" target="main"><img src="q4.gif" align="top" width="99" height="29" border="0"></a></td></tr>
    </table>
    </td>
    </tr>
    </table>
    </td>
    <td width="200"></td></tr>
    </table></td></tr>
    <tr><td width="900" height="491" background="main.gif"><table width="900" height="491" border="0" cellPadding="0" cellSpacing="0">
    <tr><td width="900" height="491"><iframe width="900" height="491" border="0" marginHeight="0" marginWidth="0" scrolling="auto" noResize name="main" frameSpacing="0" frameBorder="0" src="start_page.html"></iframe></td></tr>
    </table></td></tr>
    </table></td></tr>
    </table></center>
    </body>

    </html>
    Last edited by silas; 05-30-2005 at 11:51 PM.

  • #5
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    glenngv gave you the solution you want. It will work, all you have to do is add this to that td cell.
    Code:
    id="table_2"

  • #6
    New to the CF scene
    Join Date
    May 2005
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts

    error

    when i add this code

    <a href="#" onclick="document.getElementById('table_2').style.backgroundImage='url(backg2.gif)'; return false">Change Background</a>
    i get error: object required

    probably something simple but thank you guys for assistance thus far...
    Last edited by silas; 05-31-2005 at 02:48 AM.

  • #7
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Did you add id="table_2" to that td cell like I told you? That error is because there is no element with the id of "table_2".

  • #8
    New to the CF scene
    Join Date
    May 2005
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts

    :(

    yes here's a snip of the td

    <td id="table_2" width="900" height="111" background="menu.gif">

  • #9
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Okay now we either need a link or the updated code, a link would be good since we can see the images as well. Also is that link located in the iframe or on the page with the iframe?

  • #10
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,037
    Thanks
    0
    Thanked 250 Times in 246 Posts
    If the link is in the iframe and the table is in the main page containing the iframe, the code should be like this:
    Code:
    <a href="#" onclick="parent.document.getElementById('table_2').style.backgroundImage='url(backg2.gif)'; return false">Change Background</a>
    For more control of the td background, you should use CSS (http://www.devguru.com/Technologies/...kground.html):
    Code:
    <td id="table_2" style="width:900px; height:111px; background:url(menu.gif) no-repeat fixed center">

  • #11
    New to the CF scene
    Join Date
    May 2005
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts

    .

    Not a whole lot as changed on the code but here it is... Keep in mind I'm trying to use this from a sub page that loads into the iframe. I got rid of the iframe on the main index and just add that code and got a black image in the td cell. I think the iframe portion of the site is where the problem lies. The sub page dosen't know how to reference the main index.

    <html>

    <head>
    <meta http-equiv="content-type" content="text/html;charset=iso-8859-1">
    <title>Test</title>
    </head>

    <body bgcolor="black" bgProperties="fixed">
    <center>
    <table width="100%" height="100%" border="0" cellPadding="0" cellSpacing="0" align="center">
    <tr><td><table width="900" height="100%" border="0" cellPadding="0" cellSpacing="0" align="center">
    <tr><td width="900" height="98" background="top.gif"></td></tr>
    <tr><td id="table_2" width="900" height="111" background="menu.gif"><table width="900" height="111" border="0" cellPadding="0" cellSpacing="0">
    <tr><td width="200"></td>
    <td width="100">
    <table width="100" height="111" border="0" cellPadding="0" cellSpacing="0">
    <tr><td width="100" height="111">
    <table width="100" height="111" border="0" cellPadding="0" cellSpacing="0">
    <tr>
    <td width="100%" height="30"></td>
    </tr>
    <tr>
    <td align="center" vAlign="top"><a href="q3.html" target="main"><img src="q3.gif" align="top" width="99" height="29" border="0"></a></td>
    </tr>
    </table>
    </td></tr>
    </table>
    </td>
    <td width="100">
    <table width="100" height="111" border="0" cellPadding="0" cellSpacing="0">
    <tr>
    <td width="100" height="111"><table width="100" height="111" border="0" cellPadding="0" cellSpacing="0">
    <tr><td width="100%" height="18"></td></tr>
    <tr>
    <td align="center" vAlign="top"><a href="q2.html" target="main"><img src="q2.gif" align="top" width="99" height="29" border="0"></a></td>
    </tr>
    </table></td>
    </tr>
    </table>
    </td>
    <td vAlign="top" width="100">
    <table width="100" height="111" border="0" cellPadding="0" cellSpacing="0">
    <tr><td align="center" vAlign="top" width="100" height="111"><table width="100" height="111" border="0" cellPadding="0" cellSpacing="0">
    <tr><td width="100%" height="9"></td></tr>
    <tr><td vAlign="top"><a><img src="b1.gif" border="0" width="99" height="29"></a></td></tr>
    </table></td></tr>
    </table>
    </td>
    <td width="100">
    <table width="100" height="111" border="0" cellPadding="0" cellSpacing="0">
    <tr>
    <td width="100" height="111">
    <table width="100" height="111" border="0" cellPadding="0" cellSpacing="0">
    <tr>
    <td width="100%" height="18"></td>
    </tr>
    <tr>
    <td align="center" vAlign="top"><a href="q1.html" target="main"><img src="q1.gif" align="top" width="99" height="29" border="0"></a></td>
    </tr>
    </table>
    </td>
    </tr>
    </table>
    </td>
    <td width="100">
    <table width="100" height="111" border="0" cellPadding="0" cellSpacing="0">
    <tr>
    <td align="center" vAlign="top">
    <table width="100" height="111" border="0" cellPadding="0" cellSpacing="0">
    <tr><td width="100%" height="30"></td></tr>
    <tr><td align="center" vAlign="top"><a href="q4.html" target="main"><img src="q4.gif" align="top" width="99" height="29" border="0"></a></td></tr>
    </table>
    </td>
    </tr>
    </table>
    </td>
    <td width="200"></td></tr>
    </table></td></tr>
    <tr><td width="900" height="491" background="main.gif"><table width="900" height="491" border="0" cellPadding="0" cellSpacing="0">
    <tr><td width="900" height="491"><iframe width="900" height="491" border="0" marginHeight="0" marginWidth="0" scrolling="auto" noResize name="main" frameSpacing="0" frameBorder="0" src="start_page.html"></iframe></td></tr>
    </table></td></tr>
    </table></td></tr>
    </table></center>
    </body>

    </html>

    -
    -
    here is the code for the sub page that loads into the iframe
    -
    -

    <html>

    <head>
    <meta http-equiv="content-type" content="text/html;charset=iso-8859-1">
    </head>
    <body bgcolor="#ffffff" text="black">
    <table width="900" height="491" border="0" cellPadding="0" cellSpacing="0" align="center" background="main.gif">
    <tr><td width="30" height="491"></td>
    <td width="870" height="491" align="left" vAlign="top"><table width="870" height="491" border="0" cellPadding="0" cellSpacing="0">
    <tr>
    <td><a href="http://www." onclick="document.getElementById('table_2').style.backgroundImage='url(menu1.gif)'; return false" target="main">Change Background</a> </td>
    </tr>
    </table></td>
    </tr>
    </table>
    </body>

    </html>

  • #12
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Okay try this
    Code:
    <a href="#" onclick="parent.document.getElementById('table_2').style.backgroundImage='url(menu1.gif)'; return false" target="main">Change Background</a>
    Last edited by _Aerospace_Eng_; 05-31-2005 at 04:16 AM.

  • #13
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,037
    Thanks
    0
    Thanked 250 Times in 246 Posts
    silas, you must have overlooked my previous post (post#10). My suggestion is the same as _Aerospace_Eng_'s.

  • #14
    New to the CF scene
    Join Date
    May 2005
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts

    thanks guys

    Yes, I was in the middle of posting a reply and didn't see your post 10. The code you guys gave me works. it does switch the image so woot, one step forward. The only downside to this is when i click the link that contains this code:

    <a href="#.html" target="main" onclick="parent.document.getElementById('table_2').style.backgroundImage='url(menu1.gif)'; return false"><font color="#000000">Change Background</font></a>

    It doesn't load the requested url into the iframe in the main index but if i remove the onclick portion of the code it loads into the iframe just fine i just lose the background change.

    Thank you guys very much for all the assistance. Its been very appreciated...

  • #15
    Banned
    Join Date
    Sep 2003
    Posts
    3,620
    Thanks
    0
    Thanked 0 Times in 0 Posts
    The onclick event's return false is cancelling out the the href...
    Remove return false...

    .....Willy


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

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