Silvestru Posted May 17, 2018 Posted May 17, 2018 Hello forum, I am pretty new to this so I would really appreciate your help. I have the below code: <select id="dynamic_select"> <option value="" selected>Pick a Website</option> <option value="http://www.google.com">Google</option> <option value="http://www.youtube.com">YouTube</option> <option value="https://www.gurustop.net">GuruStop.NET</option> </select> <script> $(function(){ // bind change event to select $('#dynamic_select').on('change', function () { var url = $(this).val(); // get selected value if (url) { // require a URL window.location = url; // redirect } return false; }); }); </script> On my page it looks like this: My question is, how can I link this code to an image so when you click on said image, the drop-down appears. So you can only see this selection after you press on the image. Thank you very much in advance for the help!
Sensei Posted May 17, 2018 Posted May 17, 2018 (edited) Here you go.. <html> <head> <script type="text/javascript"> function changeBackground( image ) { document.getElementById( 'duck' ).style.backgroundImage = "url( " + image + " )"; } </script> <style> #duck { width: 500px; height: 500px; color: red; text-align: center; font-size: 50px; background-image: url( "duck1.jpg" ); } </style> </head> <body> <select id="duck"> <option onclick="changeBackground( 'duck1.jpg' );">Duck 1</option> <option onclick="changeBackground( 'duck2.jpg' );">Duck 2</option> <option onclick="changeBackground( 'duck3.jpg' );">Duck 3</option> </select> </body> </html> I tried it with Firefox only.. So you will have to check whether it works also in Chrome, IE and Opera by yourself.. Edited May 17, 2018 by Sensei 1
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now