...

View Full Version : switching images on click



silas
05-29-2005, 06:27 PM
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,

_Aerospace_Eng_
05-29-2005, 06:38 PM
There are multiple ways of accomplishing what you want. Can you show us your code please?

glenngv
05-30-2005, 04:53 AM
<a href="#" onclick="document.getElementById('table_2').style.backgroundImage='url(backg2.gif)'; return false">Change Background</a>

silas
05-30-2005, 07:48 PM
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>

_Aerospace_Eng_
05-31-2005, 01:25 AM
glenngv gave you the solution you want. It will work, all you have to do is add this to that td cell.

id="table_2"

silas
05-31-2005, 03:44 AM
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...

_Aerospace_Eng_
05-31-2005, 03:46 AM
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".

silas
05-31-2005, 03:50 AM
yes here's a snip of the td

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

_Aerospace_Eng_
05-31-2005, 04:34 AM
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?

glenngv
05-31-2005, 04:44 AM
If the link is in the iframe and the table is in the main page containing the iframe, the code should be like this:

<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/css/quickref/css_background.html):

<td id="table_2" style="width:900px; height:111px; background:url(menu.gif) no-repeat fixed center">

silas
05-31-2005, 04:59 AM
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>

_Aerospace_Eng_
05-31-2005, 05:14 AM
Okay try this



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

glenngv
05-31-2005, 05:59 AM
silas, you must have overlooked my previous post (post#10). My suggestion is the same as _Aerospace_Eng_'s.

silas
06-01-2005, 12:08 AM
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...

Willy Duitt
06-01-2005, 12:33 AM
The onclick event's return false is cancelling out the the href...
Remove return false...

.....Willy

silas
06-01-2005, 02:12 AM
I'd just like to say a big thank you guys for all the assistance. Its working like a champ now. Greatly appreciated...



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum