A Little Help with Tables... 1

VietKong · May 5, 2002

Hello everyone, I have basically the same question as Mpaone12, who posted earlier, so I'm just gonna restate his question insted of typing again. He said..

>Hello, I am a novice web-designer and I am looking to create a table that contains both buttons, as well as, a table cell for displaying information.

>It will work like this, when the user does a mouse-over on one of the buttons, there will be a designated spot (cell) in the table that displays specific information about that button.

>For example, it will look like this...
> _______________
>|button | button |
>|______|________|
>|button | button |
>|______|________|
>|button | infohere|
>|______|________|

>So that, whenever a mouseover occurs on a button, different additional information (in picture format) is displayed in the info box (cell). So basically, my question is, How can I make it so that the info box (cell) continues to update itself with a series of different images for each button on it's mouseover?

Thanks! [bigsmile]

theocraticmind · May 5, 2002

ok, i didn't use buttons, i used links, only because it's less to type, but i'm sure you can figure out how to change it. also, theoretically, it should be cross browser, but i've only tested it in IE6.

Code:

<!DOCTYPE HTML PUBLIC &quot;-//W3C//DTD HTML 4.0 Transitional//EN&quot;>
<html>
<head>
	<title>showDiv</title>
<style>
#item1{visibility:hidden;}
#item2{visibility:hidden;}
#item3{visibility:hidden;}
#item4{visibility:hidden;}
#item5{visibility:hidden;}
</style>
<script language=&quot;javascript&quot;>
if (document.layers) {
visible = 'show';
hidden = 'hide';
} 
function showDiv (on,off1,off2,off3,off4){
if (document.all){
if (off1.style.visibility == 'visible' ||off2.style.visibility == 'visible' ||off3.style.visibility == 'visible'||off4.style.visibility == 'visible'){
off1.style.visibility = 'hidden';
off2.style.visibility = 'hidden';
off3.style.visibility = 'hidden';
off4.style.visibility = 'hidden';
}
on.style.visibility = 'visible';
} else if (document.layers) {
if (document.layers[off1].visibility == 'visible'||document.layers[off2].visibility == 'visible'||document.layers[off3].visibility == 'visible' ||document.layers[off4].visibility == 'visible'){
document.layers[off1].visibility = 'hidden';
document.layers[off2].visibility = 'hidden';
document.layers[off3].visibility = 'hidden';
document.layers[off4].visibility = 'hidden';
}
document.layers[on].visibility = 'visible';
}
}
</script>
</head>

<body>

<table>
<tr>
       <td>
	   	   <a href=&quot;javascript:showDiv(item1,item2,item3,item4,item5)&quot;>1</a>
	   </td>
       <td>
	   	   <a href=&quot;javascript:showDiv(item2,item1,item3,item4,item5)&quot;>2</a>
	   </td>
</tr>
<tr>
       <td>
	   	   <a href=&quot;javascript:showDiv(item3,item2,item1,item4,item5)&quot;>3</a>
	   </td>
       <td>
	   	   <a href=&quot;javascript:showDiv(item4,item2,item3,item1,item5)&quot;>4</a>
	   </td>
</tr>
<tr>
       <td valign=&quot;top&quot;>
	   	   <a href=&quot;javascript:showDiv(item5,item2,item3,item4,item1)&quot;>5</a>
	   </td>
       <td>
	   <div id=&quot;item1&quot;>
	   		1
	   </div>
	   <div id=&quot;item2&quot;>
	   		2
	   </div>
	   <div id=&quot;item3&quot;>
	   		3
	   </div>
	   <div id=&quot;item4&quot;>
	   		4
	   </div>
	   <div id=&quot;item5&quot;>
	   		5
	   </div>
	   </td>
</tr>
</table>
</body>
</html>

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

A Little Help with Tables... 1

VietKong

Programmer

theocraticmind

Programmer

Similar threads

Part and Inventory Search

Sponsor