« »

In order to display detailed information about some object; such as member or product; you can use simple JavaScript code. This is upgraded version of Click Radio Button to View Information; this script display image for each item.

Label: radio, button, view, information, image, display, product, object

Report to us error of this JavaScript

Demo
Enlarge
Reload
New window

Code
JavaScript
HTML
Print

Copy All x2

<script type="text/javascript">
<!--
// 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");
//-->
</script>

Copy All x2

<form name="changeImg">
<table align="center" bgcolor="#cccccc" border="0" cellpadding="2" cellspacing="2" width="400">
 <tbody><tr>
  <th class="small" align="left" width="150">
   Username:
  </th>
  <th class="small" align="left" width="400">
   Details:
  </th>
  <th class="small" align="left" width="50">
   Photo:
  </th>
 </tr>
 <tr>
  <td class="small" align="left" bgcolor="#ffffff" valign="top" width="150">
   <label for="a"><input id="a" name="pointer" onclick="javascript:Mountains.printDetails()" type="radio">Mountains</label><br>
   <label for="b"><input id="b" name="pointer" onclick="javascript:Lake.printDetails()" type="radio">Lake</label><br>
   <label for="c"><input id="c" name="pointer" onclick="javascript:Barren.printDetails()" type="radio">Barren</label><br>
  </td>
  <td class="small" align="left" bgcolor="#ffffff" valign="top" width="400">
   <span id="theData" style="margin: 0pt; padding: 1px; width: 400px;"><b>Title:</b> Mountains<br><b>Location:</b> Black Hills<br><b>State:</b> Colorado<br><b>Cost:</b> $1,250<br></span>
  </td>
  <td align="center" bgcolor="#ffffff" valign="top" width="50">
   <img src="pix1-sm.gif" name="avatars" alt="" height="60" width="50">
  </td>
 </tr>
</tbody></table>
</form>