Jump to content

Changing image using different button


colinh_7

Recommended Posts

Hello,

 

I'm new to JavaScript and am currently trying to expand my knowledge of it for a project at work. Attached is a simplified version of what I'm trying to do.

 

What I'm looking for is basically when I click the small red square, the large square would turn red. (and the same thing for every other color) Also, I want all of the buttons and large squares to be images, as this is just a simplified version and I will eventually be using actual images.

 

I've been looking for ways to do this, and while it seems like there would be a simple solution, I'm having a very hard time finding it. Any help would be greatly appreciated! Thanks!

post-181676-0-53071400-1425393817_thumb.png

Edited by colinh_7
Link to comment
Share on other sites

Try...

<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"/><title>title</title><style>#big{float:left;margin:5px;width:200px;height:200px;background-color: green;border:1px solid #111;}#little01,#little02,#little03{float:left;width:30px;height:30px;margin:175px 2px 0 0;border:1px solid #111;}</style><script>window.onerror = function(a, b, c, d){alert('Javascript Error:n'+a+'nURL: '+b+'nLine: '+c+'  Column: '+d);return true;}</script><script>'use strict';window.onload = init;function init() {var ele = document.getElementById('little01');ele.onclick = change;ele.style.backgroundColor = 'green';ele = document.getElementById('little02');ele.onclick = change;ele.style.backgroundColor = 'red';ele = document.getElementById('little03');ele.onclick = change;ele.style.backgroundColor = 'yellow';}function change(){//alert('change to '+this.id+' color='+this.style.backgroundColor);document.getElementById('big').style.backgroundColor = this.style.backgroundColor;}</script></head><body><div id="big"></div><div id="little01"></div><div id="little02"></div><div id="little03"></div><br style="clear:both"/></body>    </html>
Link to comment
Share on other sites

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...