By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
455,236 Members | 1,354 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 455,236 IT Pros & Developers. It's quick & easy.

Resizing a Table Background Image

P: n/a
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
Jul 20 '05 #1
Share this Question
Share on Google+
3 Replies


P: n/a
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>
Jul 20 '05 #2

P: n/a
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>

Jul 20 '05 #3

P: n/a
Luke,

Thanks.

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

best regards

Scott
Jul 20 '05 #4

This discussion thread is closed

Replies have been disabled for this discussion.