Degradable, sized new window popup for image

Forum Moderators: open

Message Too Old, No Replies

Degradable, sized new window popup for image

Accessibility requiremnt

kiwibrit

9:42 pm on Jun 10, 2006 (gmt 0)

I have to show a range of blind (shade) cloths on a page. Against each cloth name, I am showing a small image of the cloth - but need to show a larger image in a popup window. The popup should be sized to the (standard) width and height of the image. The link must be degradable in the event of javascript not being enabled - albeit I accept that sizing will no longer be possible.

The page is coded in HTML 4.01 strict.

So far, I have:


<tr>
<td>cloth name</td>
<td><img src="images/cloths/cloth-name.jpg" alt="image of textured, cloth" width="100" height="40"></td>
<td><a href="images/cloths/large-cloth-name.jpg" target="newWindow" onclick="window.open(this.href, this.target); return false">Large image [new window]</a></td>
</tr>

But I have been unable to put in values for height and width to have the desired effect. I'd be grateful for assistance.

kiwibrit

10:24 pm on Jun 10, 2006 (gmt 0)

Just a rider. I appreciate that any non-javascript link could not be in a new window - unless I reverted to transitional code - which I ma thinking of doing.

Rambo Tribble

12:54 am on Jun 11, 2006 (gmt 0)

Window dimensions are a parameter of the window.open() method. The syntax is as follows:

window.open("URL", "windowName", "windowFeatures")

where 'windowFeatures' can include 'height=40, width=100', as well as other window display specifications (for chrome and such).

kiwibrit

10:54 am on Jun 11, 2006 (gmt 0)

Thank you.


<script type="text/javascript">
 <!--
 function ClothWindow() {
 Cloth_Window = window.open("images/LargeCloth.htm","WindowLargeCloth", "width=300,height=472,scrollbars=yes");
 Cloth-Window.focus();
 }
 document.writeln("<a href='#' onClick='ClothWindow()'>Large view [new window]<\/a>");
 //-->
</script>
<noscript>
<a href="images/cloths/LargeCloth.htm">Large view</a></div>
</noscript>

works, and validates. Rather a load of script per link, though.

My javascript ignorance is causing me a bit of a headache, but I think there should be some way of declaring the Cloth-Window function once, so that it can accept the url for the specific new window required for a given link. I'll look for that - but if anyone can drop me a hint I'd appreciate it.

kiwibrit

11:28 am on Jun 11, 2006 (gmt 0)

Code edited to add divs needed to validate code within the td.


<div>
<script type="text/javascript">
 <!--
 function ClothWindow() {
 Cloth_Window = window.open("images/LargeCloth.htm","WindowLargeCloth", "width=300,height=472,scrollbars=yes");
 Cloth-Window.focus();
 }
 document.writeln("<a href='#' onClick='ClothWindow()'>Large view [new window]<\/a>");
 //-->
</script>
</div>
<noscript>
<div>
<a href="images/cloths/LargeCloth.htm">Large view</a></div>
</div>
</noscript>

encyclo

6:16 pm on Jun 11, 2006 (gmt 0)

You should define the function within a script in the

head

section of your page, either inline or in an included file.

Rather than using a separate

noscript

block (which leaves in place a non-functioning link for non-JS users), you should just use the standard href link as the backup, much like you had in your original example:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>test template</title>
<script type="text/javascript">
<!--
function ClothWindow(theURL) {
Cloth_Window = window.open(theURL,"WindowLargeCloth", "width=300,height=472,scrollbars=yes");
}
//-->
</script>
</head>
<body>
<p><a href="images/cloths/large-cloth-name.jpg" target="_blank" [b]onclick="ClothWindow(this.href);return false;"[/b]>Large view</a></p>
</body>
</html>

Whilst the

target

attribute is not included on the HTML 4.01 Strict specification, its use in this circumstance is harmless.

kiwibrit

10:58 pm on Jun 11, 2006 (gmt 0)

That's cracked it, thank you.