Two things i could figure how to do

**Dobizobi** · 06-07-2011, 01:15 PM

Hi, i have a <td> with a background image and 3 other <td>'s that contains blank photos in them,
i need 2 things that they'll make:
1. when i click on one td that contain blank image lets call it tdimg1 it will toggle the visibility of the div inside the first td lets call it tdframe and for the div lets call it divframe1, (i have a script that works) but the main issue is that when i click tdimg1 tdimg2 and tdimg3 it will show divframe1 divframe2 and divframe3
what i want is that it will show only one at a time, so if ill hit the tdimg2 it will show me divframe2 and if after that ill hit tdimg3 it will hide the divframe2 and appear the divframe3.

2.the tdframe have an image as a background lets call it basicbg.jpg, i want that when i will hit tdimg1 the background of the tdframe will change to lets say newbg1.jpg, and as ill hit it again it will go back to basicbg.jpg, as ill hit tdimg3 it will change to newbg3.jpg and if i wont "close" it and click tdimg2 it will just change it to newbg2.jpg

thanks!

**Beverleyh** · 06-07-2011, 03:43 PM

This is all very detailed (and I'm sure it makes perfect sense to you) but I'm having a hard time deciphering what you're trying to achieve. Can you please post a link to your web page to help us understand more.

**Dobizobi** · 06-07-2011, 07:10 PM

Code:

<html>
<head>
<title>Sironit</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1255">
</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<!-- Save for Web Slices (Sironit.psd) -->
        <style type="text/css">
            #td1 {background-image: url('images/Sironit_09.png');}
        </style>
<script>
function toggleDisplay() {
  document.getElementById("toggleMe").style.visibility = "visible";
  if(document.getElementById("toggleMe").style.display == "none" ) {
    document.getElementById("toggleMe").style.display = "";
  }
  else {
    document.getElementById("toggleMe").style.display = "none";
  }
}
function toggleDisplay2() {
  document.getElementById("toggleMe2").style.visibility = "visible";
  if(document.getElementById("toggleMe2").style.display == "none" ) {
    document.getElementById("toggleMe2").style.display = "";
  }
  else {
    document.getElementById("toggleMe2").style.display = "none";
  }
}
function toggleDisplay3() {
  document.getElementById("toggleMe3").style.visibility = "visible";
  if(document.getElementById("toggleMe3").style.display == "none" ) {
    document.getElementById("toggleMe3").style.display = "";
  }
  else {
    document.getElementById("toggleMe3").style.display = "none";
  }
}
</script>
<table id="Table_01" width="520" height="650" border="0" cellpadding="0" cellspacing="0">
	<tr>
		<td colspan="7" background="http://up352.siz.co.il/up3/4mqqzogmd0fd.png" width="520">
			<img src="images/Sironit_01.png" width="520" height="518" alt=""></td>
	</tr>
	<tr>
		<td>
			<img src="images/Sironit_02.png" width="33" height="20" alt=""></td>
		<td background="images/Sironit_03.png" width="106" height="20"><a href="#" onclick="toggleDisplay3();"><img align="top" src="http://up203.siz.co.il/up2/ymmxjgmiuzhh.png" width="106" height="20"/></a></td>
		<td>
			<img src="images/Sironit_04.png" width="98" height="20" alt=""></td> 
		<td background="images/Sironit_05.png" width="60" height="20"><a href="#" onclick="toggleDisplay2();"><img align="top" src="http://up203.siz.co.il/up2/ymmxjgmiuzhh.png" width="60" height="20"/></a></td>
		<td>
			<img src="images/Sironit_06.png" width="117" height="20" alt=""></td>
		<td background="images/Sironit_07.png" width="73" height="20"><a href="#" onclick="toggleDisplay();"><img align="top" src="http://up203.siz.co.il/up2/ymmxjgmiuzhh.png" width="73" height="20"/></a></td>
		<td>
			<img src="images/Sironit_08.png" width="33" height="20" alt=""></td>
	</tr>
	<tr>
		<td id="td1" colspan="7" width="520" height="11">
<div id="toggleMe" style="visibility: hidden;"> 1</div><div id="toggleMe2" style="visibility: hidden;">2</div><div id="toggleMe3" style="visibility: hidden;">3</div></td>
	</tr>
	<tr>
		<td colspan="7">
			<img src="images/Sironit_10.png" width="520" height="101" alt=""></td>
	</tr>
</table>
<!-- End Save for Web Slices -->
</body>
</html>

this is the website code, i hope it will help you.. thanks!

Thread: Two things i could figure how to do

Thread Tools

Search Thread

Two things i could figure how to do

Bookmarks

Bookmarks

Posting Permissions