Code: Select all
<TABLE border = "0">
<TR>
<script type="text/javascript">
winwidth=document.all?document.body.clientwidth:window.innerwidth;
winHeight=document.all?document.body.clientHeight:window.innerHeight;
if (winwidth > 640) {
document.write('<TD width="800" height="75" valign="bottom" background="/apps/Comm/images/image800.jpg">'); //800x600
}
else if (winwidth > 800) {
document.write('<TD width="1024" height="75" valign="bottom" background="/apps/Comm/images/image1024.jpg">'); //1024x768
}
else if (winwidth > 1024) {
document.write('<TD width="1280" height="75" valign="bottom" background="/apps/Comm/images/image1280.jpg">'); //1280x1024
}
else if (winwidth > 1280) {
document.write('<TD width="1440" height="75" valign="bottom" background="/apps/Comm/images/image1440.jpg">'); //1440x900
}
else if (winwidth > 1440) {
document.write('<TD width="1600" height="75" valign="bottom" background="/apps/Comm/images/image1600.jpg">'); //1600x1200
}
else if (winwidth > 1600) {
document.write('<TD width="1920" height="75" valign="bottom" background="/apps/Comm/images/image1920.jpg">'); //1920x1200
}
</script>
</TR>
A colleague suggested I split the banner into two or three separate images and work with them independently (each image on a different cell on the same row), but I cannot see how this would work.
Any suggestions? It is ok if the solution uses one or several banner images (for each resolution), as long as it can be achieved using html and/or javascript.
If you need any more details please let me know.