Inserting image into table cell

[David Pritchard]

I've written code that will conditionally insert an image into a table cell depening on the monitor resolution of the user - it doesn't work. Using straight HTML it does load the image correctly and display it. The section of code is as follows:

<table width="92%" borders="0">
<tr>
<script type="text/javascript">
<!-- hide from javascript impaired browser
var width=screen.width;
var height=screen.height;
var status="false";
if(width==1280 && height==1024 )
{
alert("have entered 1280x1024 mode");
document.write('<tr width="350" height="399" align="center"><img scr="Design/Assets/father_john_1280_1024.gif"></td>');
document.write('td width="488"><div align="center">');
status="true";
}
// done hiding -->
</script>
... various other HTML for the last cell ...
</td>

The alert was displayed showing that the JavaScript was working and was going to the right place in the decision structure. But it just showned a place holder for the image. Went I click on the properties of the image (no picture) it said "not available" but it loaded the image with straight HTML code

Regards
Dave

[David Pritchard]

Looking back at the code I saw a mistake - a " had been left out. But even when I corrected the error it still didn't display the image.

[jscheuer1]

You have two <tr> tags in a row without a <td> tag:

<table width="92%" borders="0">
<tr>
<script type="text/javascript">
<!-- hide from javascript impaired browser
var width=screen.width;
var height=screen.height;
var status="false";
if(width==1280 && height==1024 )
{
alert("have entered 1280x1024 mode");
document.write('<tr width="350" height="399" align="center"><img scr="Design/Assets/father_john_1280_1024.gif"></td>');
document.write('td width="488"><div align="center">');
status="true";
}
// done hiding -->
</script>
... various other HTML for the last cell ...
</td>

Also, the second <td> tag has no leading <

Finally, when hiding from javascript impaired browsers, it is best to run as fast as you can too. Actually, the hiding and done hiding lines are not needed.

[mwinter]

I've written code that will conditionally insert an image into a table cell depening on the monitor resolution of the user

The display resolution has relatively little bearing on the issue. My current resolution is 1024x768, but you certainly won't have that much space to work with: including an image of that size would mean I'd have to scroll both vertically and horizontally to view it all.

it doesn't work.

Yes, in more ways than one.

If your intent is to provide various images at different sizes, list the dimensions available and let the user choose. Even if you just want to provide a very large image, link to it. Nothing more.

<table width="92%" borders="0">
   <tr>
   <script type="text/javascript">
   <!-- hide from javascript impaired browser
   var width=screen.width;
   var height=screen.height;
   var status="false";
   if(width==1280 && height==1024 )
   {
      alert("have entered 1280x1024 mode");
      document.write('<tr width="350" height="399" align="center"><img scr="Design/Assets/father_john_1280_1024.gif"></td>');
      document.write('td width="488"><div align="center">');
      status="true";
   }
   // done hiding -->
   </script>
      ... various other HTML for the last cell ...
   </td>

That markup is invalid, both before and after the script runs.

Mike

[David Pritchard]

I have made changes, code listed below, but still doesn't display the image

<table width="92%" border="0">
<tr>
<script type="text/javascript">
var width = screen.width;
var height = screen.height;
var status = "false";
alert("have reached here");
if( width == 1280 && height == 1024 )
{
alert("have entered 1280 x 1024 mode");
document.write('<td width="350" height="399" align="center"><img
scr="Design/Assets/father_john_1280_1024.gif"></td>');
document.write('<td width="488"><div align="center">');
status = "true";
}
</script>
<p><strong><font color="#000000" size="7" face="Arial, Helvetica, sans-
serif">Father John</font></strong></p>
<p><strong><font color="#000000" size="4" face="Arial, Helvetica, sans-
serif">our Spiritual Advisor</font></strong></p>
</div></td>
</tr>

Regards
Dave

[David Pritchard]

Hi Mike,
Thanks for the comments.
How come the markup is invalid - sorry I don't understand - as you can see I'm still learning.
In supplying a list of resolutions to the user does that mean I have to repeat each page on the web site five or six times (representing the different image sizes for each resolution). At the moment the web site analysis is showing 36 pages. That would now be 36x6 = 216 pages.
I was hoping to dynamically formate the page, after the Javascript reading the monitor resolution.

[jscheuer1]

There is no scr attribute for the img tag. Also, though the line wrapping may be an artifact of the way the forum has displayed your code on my monitor, you cannot have a line break in the middle of a document.write(), at least not the way it appears here:

<table width="92%" border="0">
<tr>
<script type="text/javascript">
var width = screen.width;
var height = screen.height;
var status = "false";
alert("have reached here");
if( width == 1280 && height == 1024 )
{
alert("have entered 1280 x 1024 mode");
document.write('<td width="350" height="399" align="center"><img //no line break allowed here
scr="Design/Assets/father_john_1280_1024.gif"></td>');
document.write('<td width="488"><div align="center">');
status = "true";
}
</script>
<p><strong><font color="#000000" size="7" face="Arial, Helvetica, sans-
serif">Father John</font></strong></p>
<p><strong><font color="#000000" size="4" face="Arial, Helvetica, sans-
serif">our Spiritual Advisor</font></strong></p>
</div></td>
</tr>

This will work:

<table width="92%" border="0">
<tr>
<script type="text/javascript">
var width = screen.width;
var height = screen.height;
var status = "false";
alert("have reached here");
if( width == 1280 && height == 1024 )
{
alert("have entered 1280 x 1024 mode");
document.write('<td width="350" height="399" align="center"><img src="Design/Assets/father_john_1280_1024.gif"></td>');
document.write('<td width="488"><div align="center">');
status = "true";
}
</script>
<p><strong><font color="#000000" size="7" face="Arial, Helvetica, sans-
serif">Father John</font></strong></p>
<p><strong><font color="#000000" size="4" face="Arial, Helvetica, sans-
serif">our Spiritual Advisor</font></strong></p>
</div></td>
</tr>

[David Pritchard]

Hi John
Thanks - another person in another forum said the same thing. Once I made the syntax correction as you suggested it worked.

Thanks very much

Regards
Dave