Full version: jsB@nk » Form » Checkbox » Click Radio Button to View Information with images
URL: https://www.javascriptbank.com/click-radio-button-to-view-information-with-images.html
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.
Full version: jsB@nk » Form » Checkbox » Click Radio Button to View Information with images
URL: https://www.javascriptbank.com/click-radio-button-to-view-information-with-images.html
<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><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>