Web Front-end
JS Tutorial
js implements Select avatar selection real-time preview code_javascript skills
js implements Select avatar selection real-time preview code_javascript skills
May 16, 2016 pm 03:44 PMThe example in this article describes the js implementation of Select avatar selection real-time preview code. Share it with everyone for your reference. The details are as follows:
Here is a demonstration of js implementation of Select avatar selection and real-time preview of the effect. When leaving a message or comment, users can easily select an avatar. In the past, the most common way was to use radio button boxes. Of course, other forms can also be used, such as today This Select, the drop-down box to select an avatar, is also a good experience.
The screenshot of the running effect is as follows:
The online demo address is as follows:
http://demo.jb51.net/js/2015/js-select-ico-pic-view-codes/
The specific code is as follows:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>select头像选择代码</title> </head> <body> <select name=lanrentuku onchange="document.images['idface'].src=options[selectedIndex].value;"> <option value="images/ico1.gif" >头像01</option> <option value="images/ico2.gif" >头像02</option> <option value="images/ico3.gif" >头像03</option> </select> <div style="position:absolute;"><img src="images/ico1.gif" id=idface></div> </body> </html>
I hope this article will be helpful to everyone’s JavaScript programming design.
Hot Article
Hot tools Tags
Hot Article
Hot Article Tags
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
How to use JS and Baidu Maps to implement map pan function
Nov 21, 2023 am 10:00 AM
How to use JS and Baidu Maps to implement map pan function
Recommended: Excellent JS open source face detection and recognition project
Apr 03, 2024 am 11:55 AM
Recommended: Excellent JS open source face detection and recognition project
Essential tools for stock analysis: Learn the steps to draw candle charts with PHP and JS
Dec 17, 2023 pm 06:55 PM
Essential tools for stock analysis: Learn the steps to draw candle charts with PHP and JS
PHP and JS Development Tips: Master the Method of Drawing Stock Candle Charts
Dec 18, 2023 pm 03:39 PM
PHP and JS Development Tips: Master the Method of Drawing Stock Candle Charts
How to create a stock candlestick chart using PHP and JS
Dec 17, 2023 am 08:08 AM
How to create a stock candlestick chart using PHP and JS
How to use JS and Baidu Maps to implement map polygon drawing function
Nov 21, 2023 am 10:53 AM
How to use JS and Baidu Maps to implement map polygon drawing function
How to use JS and Baidu Map to implement map click event processing function
Nov 21, 2023 am 11:11 AM
How to use JS and Baidu Map to implement map click event processing function
