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?
LVL 1
Vin32Asked:
Who is Participating?
 
KeClConnect With a Mentor Commented:
Or even like this (IE/NN compatible):


<html><head>
<script>
<!--
function HideImg()
{
if (!document.layers)
I.style.display = 'none';
}
function ToImg()
{
if (document.layers)
{
document.layers["s"].visibility = 'hidden';
document.layers["i"].visibility = 'show';
}
else
{
S.style.display = 'none';
I.style.display = 'block';
}
}
// -->
</script>
</head><body onload=HideImg()>
<table><tr><td>
      <layer id="s" visibility="show">
      <table id="S" style="display:block"><tr><td><form name="myform" onsubmit="return false;"><input type="reset" onclick="ToImg();"></form></td></tr></table>
      </layer>
      <layer id="i" visibility="hidden">
      <table id="I"><tr><td><img src="http://www.experts-exchange.com/images/lnf/headerask.gif"></td></tr></table>
      </layer>
</td></tr></table>
</body></html>
0
 
chewymonCommented:
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.
0
 
AristippusCommented:
Fairly simple to do.  Add an OnClick within the image tag as follows:

<img src="image.gif" OnClick="src='image2.gif'">
0
The new generation of project management tools

With monday.com’s project management tool, you can see what everyone on your team is working in a single glance. Its intuitive dashboards are customizable, so you can create systems that work for you.

 
AristippusCommented:
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
0
 
Vin32Author Commented:
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.


0
 
KeClCommented:
<html><head>
<script>
<!--
function ToImg()
{
S.style.display = 'none';
I.style.display = 'block';
}
// -->
</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="http://www.experts-exchange.com/images/lnf/headerask.gif"></td></tr></table>
</td></tr></table></form>
</body></html>


Good luck!
0
 
SubhumanCommented:
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.
0
 
chewymonCommented:
5. Use onMouseout to restore the button to the original so it looks like it popped back up.
0
 
Vin32Author Commented:
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.

0
 
Vin32Author Commented:
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 :-) .
0
All Courses

From novice to tech pro — start learning today.