Question

Firstly I am no longer a student and doing this for other purposes, so don’t hold back on the help 😉

I want to incorporate a simple program into my webpage. I want 4 buttons labelled right arm, left arm, activate voice and walk forward. There will be a box above these buttons showing an image of a robot and as the buttons are pressed by the user I want a different image to be loaded in the box.

So if the right arm button is pressed the image with the robot raising its right arm will need to be displayed.

So basically all I want the buttons to do is to load the image that belongs to each one. I am assuming java is the best choice? I have the open source Java package, would I need any other software when it comes to embedding it into a webpage? My webpage is done on dreamweaver and I am pretty good with html. Would appreciate it if someone could point me to the right direction…..Thanks

Answer 1

Don’t use Java for this. Use JavaScript. Something like this:

HTML:

<img src="one.jpg" id="firstImage" />
<img src="two.jpg" id="secondImage" />

​<button id="doSomething">Do Something</button>
<button id="doSomethingElse">​Do Something Else</button>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​

CSS:

​img {
    display: none;
}​

JavaScript:

var hideImages = function() {
    $('#firstImage').hide();
    $('#secondImage').hide();
};

$('#doSomething').click(function() {
    hideImages();
    $('#firstImage').show();
});

$('#doSomething').click(function() {
    hideImages();
    $('#secondImage').show();
});​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​

What this essentially does is initially display no images, just buttons. Then as each button is clicked, the corresponding image is displayed. (And all other images are first hidden, since previous button clicks would have displayed previous images.)

This is an overly simple proof of concept, of course. At the very least you’ll want to use better variable names 🙂 This just demonstrates the idea of how you’d show/hide images in JavaScript in response to button clicks. (This also assumes the use of jQuery, which is a safe assumption these days. The easiest way to use that is to refer to a CDN link in your page, using a standard HTML script tag.) You can see this code in action here (though the images are broken, of course.)

If there are a lot of buttons and a lot of images, you may be able to re-factor the code to be less repetitive as well. Maybe store the images in an array and have a single button click handler which can associate the sending button with the correct array element, etc. That’s up to you.