Phiên bản đầy đủ: jsB@nk » Biểu mẫu » Ô chọn » Chọn thông tin muốn xem dùng ảnh
URL: https://www.javascriptbank.com/click-radio-button-to-view-information-with-images.html
Đây là phiên bản nâng cấp của Chọn thông tin muốn xem, thêm tính năng hiển thị hình ảnh cho mỗi mục chọn khi người dùng nhấn vào các nút radio.
Phiên bản đầy đủ: jsB@nk » Biểu mẫu » Ô chọn » Chọn thông tin muốn xem dùng ảnh
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>