Javascipt - Expand Collapse Modification

[websitebuilder101]

Hello All-

I am very close to achieving the javascript function that I want using a modified Expand Collapse script. I'll try to explain what is is I am trying to achieve. On my website I would like to have certain images click-able, and when the image is clicked I would like a new image shown with text over it.

I can set it up when image1 gets clicked it goes to a different image (image2). I am having difficulty trying to get the entire image to show up with text over it. With the code below the second image doesn't show up entirely (only the part that is behind the text). I'm sure it's a simple modification but I want the second image to show up entirely regardless of the amount of text over it.

-Just an idea . . .I thought one way to do it would be to set the table row height and width to the same size of the background image (250x250) so that the entire second image would show up. It didn't seem to work but maybe I set it up wrong . . .

Thanks for the help!

Here is the code:

<table>
<tr>
<td>

<div id="on">
<a href="javascript: expandCollapse('expand', 'on');"><img src="image1.jpg" width="250" height="250"></a>
</div>

<div id="expand">
<span style="background-image: url(http://www.mysite.com/image2.jpg)" width="250" height="250">You can add a background image to your text.</span>
</div>

</td>

</tr>
</table>

[shadmego]

It sounds like it's a CSS problem. You will have to add the height and width of the picture to the div#expand element in order for the entire image to show.

This means, if you have a bunch of images you need this to work with, you are going to have to somehow find a way to place the height and width of all the images in some kind of variable or configuration parameter for the javascript to use. I'm not sure how this would happen as I'm not a terribly good JavaScript programmer.

Perhaps someone else can help ...

[websitebuilder101]

After resting on it for 24 hours and then taking another look at it I realized it was better to set the background image inside of the <div> tag. It is now producing the results I want.

Thanks for the response!