Resizing a Table Background Image

[Scott Hatton]

I have a table like this

[table width=125]
[tr]
[td background="map.gif"]
[img src="foreground.gif" width=125]
[/td]
[/tr]
[/table]

What the code does is display a background map of width=125 with
roads, hills and rivers etc. The foreground image is a transparent GIF
showing town names which fits exactly over the background map.

Some of my users find the result difficult to read so I want to
implement a zoom in. The background image has to double in size to 250
pixels. As will the foreground image but that's easy.

How do I get the background image to double in size?

One image is just to use simple HTML and create second versions of all
the background images doubled in width. Trouble is I have thousands of
the pesky things - it would send me over my disk space allocation from
my ISP. And I want an elegant solution!

thanks

Scott

[luke]

You can always change the background image to a large version like
this..............

<script>
function increaseImg(){
document.all.backImg.background = "maplarge.gif"
document.all.foreImg.width = "250"
}
</script>

<table width=125>
<tr>
<td background="map.gif" id="backImg"><img id="foreImg" src="foreground.gif"
width="125"></td>
</tr>
</table>

<a href="#" onclick="increaseImg();">increase image sizes</a>

[luke]

I forgot to say this would only work in Internet Explorer!


"luke" <gr******@hotmail.com> wrote in message
news:bt************@ID-218367.news.uni-berlin.de...

You can always change the background image to a large version like
this..............

<script>
function increaseImg(){
document.all.backImg.background = "maplarge.gif"
document.all.foreImg.width = "250"
}
</script>

<table width=125>
<tr>
<td background="map.gif" id="backImg"><img id="foreImg" src="foreground.gif" width="125"></td>
</tr>
</table>

<a href="#" onclick="increaseImg();">increase image sizes</a>

[Scott Hatton]

Luke,

Thanks.

However, this solution needs a second, enlarged, background image.

best regards

Scott