Sandeep's Nook: JavaScript Page

View Selected Information (With Images)

With the help of this script you can show detailed information about members or products in a compact manner. When any radio button is selected its corresponding explanatory text or information is automatically displayed in the area at the right with a provision for an image. Below I have shown an example of member usernames clicking which you would get to see more details of each member.

Username:	Details:	Photo:
sandeep member1 member2	Click any radio button on the left to see more details and the photo of the member.

Author: Sandeep Gangadharan
Home Page: http://www.sivamdesign.com/home/

This goes in the HEAD of the html file:

function member(name, address, phone, email, photo) {
 this.name = name;
 this.address = address;
 this.phone = phone;
 this.email = email;
 this.photo = photo;
 this.printDetails = printDetails; }

// each user or product details should be added as shown below.

sandeep = new member("Sandeep Gangadharan", "My Nook and the whole Web!", "1234567", "me@sivamdzine.com", "../images/sands.jpg");
member1 = new member("Member 1", "Here goes the address", "1234567", "mem1@gmail.com", "../images/mem1.gif");
member2 = new member("Member 2", "Here goes the address", "1234567", "mem2@yahoo.com", "../images/mem2.gif");
// -->
</script>

This goes in the BODY of the html file:

<form action="" name="changeImg">
<table width="600" align="center" bgcolor="#cccccc" border="0" cellspacing="2" cellpadding="2">
 <tr>
  <th width="150" align="left" class="small">
   Username:
  </th>
  <th width="400" align="left" class="small">
   Details:
  </th>
  <th width="50" align="left" class="small">
   Photo:
  </th>
 </tr>
 <tr>
  <td width="150" bgcolor="#ffffff" class="small" valign="top">
   <label for="a"><input type="radio" id="a" name="pointer" onClick="javascript:sandeep.printDetails()" />sandeep</label><br />
   <label for="b"><input type="radio" id="b" name="pointer" onClick="javascript:member1.printDetails()" />member1</label><br />
   <label for="c"><input type="radio" id="c" name="pointer" onClick="javascript:member2.printDetails()" />member2</label><br />
  </td>
  <td width="400" bgcolor="#ffffff" class="small" valign="top">
   <span id="theData" style="width:400px; padding:1px; margin:0">Click any radio button on the left to see more details and the photo of the member.</span>
  </td>
  <td width="50" align="center" bgcolor="#ffffff" valign="top">
   <img src="../images/blank.gif" width="50" height="60" name="avatars" alt="" />
  </td>
 </tr>
</table>
</form>