The JavaScript Source: Miscellaneous : View Selected Information (With Images)

General

Display detailed information about members or products in a compact manner. When a radio button is selected its corresponding information is displayed in the area to the right with an image. Great for products, membership lists, address books, and more.

Username:	Details:	Photo:
Mountains Lake Barren	Click any radio button on the left to see more details and the photo of the place.

Notes

Created by: Sandeep Gangadharan
Web Site: http://www.sivamdesign.com/scripts/
Posted: September 28, 2007

Source Code

Paste this source code into the designated areas.

External file

Paste this code into an external JavaScript file named: viewSelectedInfoImg.js

/* This script and many more are available free online at
The JavaScript Source!! http://javascript.internet.com
Created by: Sandeep Gangadharan | http://www.sivamdesign.com/scripts/ */
function printDetails() {
 txt = "<b>Title:</b> " + this.title + "<br>";  // change the text data here. You can have as many
 txt += "<b>Location:</b> " + this.location + "<br>";  // lines of data as required. to add more
 txt += "<b>State:</b> " + this.state + "<br>";  // lines do it as shown on the left
 txt += "<b>Cost:</b> " + this.cost + "<br>";  // links can be added as shown
 img = this.photo;
theDetails = txt;
document.changeImg.avatars.src = img;
document.getElementById('theData').innerHTML = theDetails; }

function place(title, location, state, cost, photo) {
 this.title = title;
 this.location = location;
 this.state = state;
 this.cost = cost;
 this.photo = photo;
 this.printDetails = printDetails; }

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

Mountains = new place("Mountains", "Black Hills", "Colorado", "$1,250", "pix1-sm.gif");
Lake = new place("Lake", "Taragon Lake", "Oregon", "$1,680", "pix2-sm.gif");
Barren = new place("Barren", "Dimas Desert", "New Mexico", "1,375", "pix3-sm.gif");

Head

Paste this code into the HEAD section of your HTML document.


<script type="text/javascript" src="viewSelectedInfoImg.js"></script>

Body

Paste this code into the BODY section of your HTML document


<form 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:Mountains.printDetails()">Mountains</label><br>
   <label for="b"><input type="radio" id="b" name="pointer" onClick="javascript:Lake.printDetails()">Lake</label><br>
   <label for="c"><input type="radio" id="c" name="pointer" onClick="javascript:Barren.printDetails()">Barren</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 place.</span>
  </td>
  <td width="50" align="center" bgcolor="#ffffff" valign="top">
   <img src="blank.gif" width="50" height="60" name="avatars" alt="">
  </td>
 </tr>
</table>
</form>

User Comments

Add a comment, suggestion, or correction

Comments feed

Navigation Menu

Internet.commerce

Developer Channel

Great Sites

Promotions

General

Notes

Source Code

External file

Head

Body

User Comments

1. From: aland
viewsourceinfo.js
12/07/2007 18:43:28

2. From: Lee Underwood (Admin)
01/29/2008 11:34:52

Navigation Menu

Internet.commerce

Developer Channel

Great Sites

Promotions

General

Notes

Source Code

External file

Head

Body

User Comments

1. From: alandviewsourceinfo.js12/07/2007 18:43:28

2. From: Lee Underwood (Admin)01/29/2008 11:34:52

1. From: aland
viewsourceinfo.js
12/07/2007 18:43:28

2. From: Lee Underwood (Admin)
01/29/2008 11:34:52