asked on

Overlap objects in HTML

I have a page where there are a lot of buttons arranged in a tabular format. Once clicked, the buttons are disabled.

The GUI doesn't look too good, so I've decided to do the following:
when a button is clicked, i want it to be replaced by an image.

I thought another way would be to put the buttons over images, and simply make the buttons invisible when clicked. So that the image below shows up.

Is it possible to do either of the above?

chewymon

Not in straight HTML. It should be possible with JavaScript using onMousedown. Why don't you delete this and post it there, or post a 0 point question there pointing here.

It might be possible in DHTML using layers, but JavaScript would be easier.

Aristippus

Fairly simple to do. Add an OnClick within the image tag as follows:

<img src="image.gif" OnClick="src='image2.gif'">

Aristippus

To make the transition smoother, do the following:

Add to the head:
<script LANGUAGE="JAVASCRIPT">
img1=new Image
img2=new Image

img1.src="image.gif"
img2.src="image2.gif"
</script>

Within the body:

<img name="button1" src=img1
onClick="button1.src='img2'">

This will preload the images. For the best looking effect, ensure that both images are the same dimensions although it is not necessary.

Good Luck

Vin32

ASKER

Aristippus, I think there is a bit of clarification needed. The first item is a button and the second is an image. It is not a case of two images.
I appreciate your efforts. Thanks.

chewymon, I guess I will take your suggestion for posting a link in the JavaScript section. Thanks.

KeCl

<html><head>
<script>

</script>
</head><body>
<form name="myform" onsubmit="return false;">
<table><tr><td>
<table id="S" style="display:block"><tr><td><input type="reset" onclick="ToImg();"></td></tr></table>
<table id="I" style="display:none"><tr><td><img src="https://www.experts-exchange.com/images/lnf/headerask.gif"></td></tr></table>
</td></tr></table></form>
</body></html>

Good luck!

ASKER CERTIFIED SOLUTION

KeCl

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Subhuman

It would be easier using two images instead of one image and a button, like Aristippus said. You can use onclick methods with an image same as with a button, so it is not difficult to emulate a button, and it's easy to make an image that looks like a button: just do a button in a temporary page, view tha page, take a screen shot and cut out the button.
You can even make it act like a button as far as animating when you click it:
1. Create button up image
2. Create button down image
3. Create animated gif with two frames: first on is button up, second one is button down. Set the properties of the image so it *doesn't* loop.
4. Use onclick event like KeCl did to replace button up image with button clicked image, this looks like the button goes down when clicked...
Although this is not really useful for normal use, it can be useful when you need the button to change, etc.

chewymon

5. Use onMouseout to restore the button to the original so it looks like it popped back up.

Vin32

ASKER

Thanks KeCl. This was exactly what I was looking for. I still have to try

Thanks for your suggestions, Subhuman and chewymon, but I'll go by the original requirements. I am not allowed to change the original buttons to images.

Vin32

ASKER

Please ignore that "I still have to try" in my last comment -- this is what happens when one has too many windows open at the same time :-) .