positioning problem

**alex_read** · Aug 14th, 2002, 06:16 AM

This is my sample at it's basic, what I'd like to do using javascript
is to add a picture into a table cell. I.e. the table cell acting as a
container for the picture when a button is clicked.

Can anyone help me with this please?

Code:

<HTML>
<HEAD>

	<SCRIPT Language=javascript>

	function buttonclicked()
	{

	}

	</script>

</HEAD>

<BODY>

	<IMG id=img1 Style="Position:Absolute" Src="1.bmp">

	<BR><BR><BR>

	<TABLE id=tbl1 border=1>
	<TR id=Row1>
		<TD width=100px height=100px id=Cell1>
	</TR>
	</TABLE>

	<BR><BR><BR>

	<INPUT Type=button onclick=buttonclicked() value="click here!">

</BODY>
</HTML>

**axion_sa** · Aug 14th, 2002, 06:57 AM

take ur pick... personally, i prefer number 2

(1)

Code:

<HTML>
<HEAD>

	<SCRIPT Language=javascript>

	function buttonclicked(cellId)
	{
		var cellParent;

        if (document.all) {
			cellParent = document.all[cellId];
        }
        	
        if (!document.all && document.getElementById) {
			cellParent = document.getElementById(cellId);
        }
        
		if (cellParent.innerHTML == ""){		
		   cellParent.innerHTML = "<img id='img1' src='gfx/blue_chevron_down.gif'>";
		} else {
		   cellParent.innerHTML = "";
		}
	}

	</script>

</HEAD>

<BODY>

	<BR><BR><BR>
	<TABLE id=tbl1 border=1>
	<TR id=Row1>
		<TD width=100px height=100px id="Cell_1">
			
		</TD>
	</TR>
	</TABLE>

	<BR><BR><BR>

	<INPUT Type=button onclick=buttonclicked("Cell_1") value="click here!">

</BODY>
</HTML>

or.....

(2)

Code:

<HTML>
<HEAD>

	<SCRIPT Language=javascript>

	function buttonclicked(imgId)
	{
		var cellParent, item;
		var displayItem = "inline";
		var hiddenItem = "none";

        if (document.all) {
			item = document.all[imgId];
        }
        	
        if (!document.all && document.getElementById) {
			item = document.getElementById(imgId);
        }
		
		if (item.style.display == displayItem) {
		    item.style.display = hiddenItem;
		} else {
		  	item.style.display = displayItem;
		}        
	}

	</script>

</HEAD>

<BODY>

	<BR><BR><BR>
	<TABLE id="tbl1" border="1">
	<TR id=Row1>
		<TD width=100px height=100px id="Cell_1">
			<img id="img1" src="gfx/blue_chevron_down.gif" style="display:none" >
		</TD>
	</TR>
	</TABLE>

	<BR><BR><BR>

	<INPUT Type=button onclick=buttonclicked("img1") value="click here!">
</BODY>
</HTML>

**alex_read** · Aug 14th, 2002, 07:25 AM

Fantastic, that's helped me a great deal thanks!
BTW - love the Garfield avatar! ;c)

**axion_sa** · Aug 14th, 2002, 07:31 AM

you're welcome & i thought it was rather good too...

Thread: positioning problem

Thread Tools

Display

positioning problem

Posting Permissions