Thursday, February 26, 2015

Change Image on Select Dropdown HTML+JS

GOAL:  Switch out an image on a webpage based off of a select dropdown option. [HTML + JavaScript]

CODE
<select onchange="$('#imageToSwap').attr('src', this.options[this.selectedIndex].value);">
    <option value="http://cdns2.freepik.com/free-photo/facebook-logo_318-           49940.jpg" selected>Facebook</option>
    <option value="http://cdns2.freepik.com/free-photo/twitter-logo_318- 
    40459.jpg">Twitter</option>
    <option value="http://cdns2.freepik.com/free-photo/instagram-social-network-     logo-of-photo-camera_318-64651.jpg">Instagram</option>
</select>

<img id="imageToSwap" class="profile" src="http://cdns2.freepik.com/free-photo/facebook-logo_318-49940.jpg">

DEMO
See the Pen Change Image on Select Dropdown by Josh Wentz (@joshwentz) on CodePen.



1 comment:

  1. Ever wanted to get free Instagram Likes?
    Did you know that you can get them AUTOMATICALLY AND ABSOLUTELY FREE by using Like 4 Like?

    ReplyDelete