You are here: irt.org | Articles | JavaScript | Image | Controlling Images #2 [ previous next ]
Published on: Sunday 17th August 1997 By: Martin Webb
This article starts off from where the previous one Controlling Images left off. This article will describe how to use a select dropdown menu to control images, and, for those browsers that can, how to find out image properties.
In the following examples I use a new browser detection script, which allows both Netscape 3+ and MSIE 4+ to use the image object, but for MSIE 3 it uses a floating frame to enable the image to be changed within the current document.
If the examples are used in Netscape 2 then an alert message pops us to inform the user that their browser does not support the features being used.
The imageForm form uses the onClick event handler to invoke the showImage() function, which passes a reference to the imageSelect select object within the imageForm form.
The showImage() function accepts this reference as an object, it then gets the value of the option selected using selectedIndex. It then checks the browser version, and either changes the dropImage image source or the location of the first frame within the document, i.e. frame 0.
The creation of the dropimage image or the floating frame is also dependent on the browser version.
<HTML><HEAD>
<SCRIPT LANGUAGE="JavaScript"><!--
var browser = navigator.appName;
var version = parseInt(navigator.appVersion);
function showImage(object) {
var imageToShow = object.options[object.selectedIndex].value;
if (browser == 'Netscape') {
if (version >= 3) document.dropImage.src = imageToShow;
else alert('Your browser does not support the image object - sorry');
}
else if (browser == 'Microsoft Internet Explorer') {
if (version >= 4) document.dropImage.src = imageToShow;
else frames[0].location.href = imageToShow;
}
}
//--></SCRIPT>
</HEAD><BODY>
<SCRIPT LANGUAGE="JavaScript"><!--
if (browser == 'Netscape')
document.write('<IMG SRC="image1.jpg" NAME="dropImage" WIDTH=320 HEIGHT=240>');
else if (browser == 'Microsoft Internet Explorer') {
if (version >= 4)
document.write('<IMG SRC="image1.jpg" NAME="dropImage" WIDTH=320 HEIGHT=240>');
else
document.write('<IFRAME FRAMEBORDER=0 WIDTH=320 HEIGHT=240 MARGINHEIGHT=0 MARGINWIDTH=0 SCROLLING=no SRC="image1.jpg"><\/IFRAME>');
}
//--></SCRIPT>
<FORM NAME="imageForm">
<SELECT NAME="imageSelect">
<OPTION VALUE="image1.jpg">Baseball
<OPTION VALUE="image2.jpg">Ice Hockey
<OPTION VALUE="image3.jpg">Basketball
<OPTION VALUE="image4.jpg">Football
<OPTION VALUE="image5.jpg">Soccer
</SELECT>
<INPUT NAME="submitName" TYPE="BUTTON" VALUE="Show" onClick="showImage(document.imageForm.imageSelect)">
</FORM>
<P><A HREF="index.htm">return</A>
</BODY></HTML>Why not try it out Dropdown menu images?
The next example uses exactly the same principles as the last, but here it checks which radioButton button on the controlForm form is checked first and then changes the required dropImage image or floating frame.
This example also uses a simplified version of the browser check.
<HTML><HEAD>
<SCRIPT LANGUAGE="JavaScript"><!--
var browser = navigator.appName;
var version = parseInt(navigator.appVersion);
function showImage(object) {
var imageToShow = object.options[object.selectedIndex].value;
if ( ((browser == 'Netscape') && (version >= 3)) ||
((browser == 'Microsoft Internet Explorer') && (version >= 4)) ) {
if (document.controlForm.radioButton[0].checked)
document.images['dropImage0'].src = imageToShow;
else document.images['dropImage1'].src = imageToShow;
}
else if (browser == 'Microsoft Internet Explorer') {
if (document.controlForm.radioButton[0].checked)
frames[0].location.href = imageToShow;
else frames[1].location.href = imageToShow;
}
else alert('Your browser does not support the image object - sorry');
}
//--></SCRIPT>
</HEAD><BODY>
<SCRIPT LANGUAGE="JavaScript"><!--
if ( (browser == 'Netscape') || ((browser == 'Microsoft Internet Explorer') && (version >= 4)) ) {
document.write('<FORM NAME="controlForm">');
document.write('<IMG SRC="../images/image1.jpg" NAME="dropImage0" WIDTH=320 HEIGHT=240>');
document.write('<INPUT TYPE="RADIO" NAME="radioButton" VALUE="0" CHECKED>');
document.write('<IMG SRC="../images/image1.jpg" NAME="dropImage1" WIDTH=320 HEIGHT=240>');
document.write('<INPUT TYPE="RADIO" NAME="radioButton" VALUE="1">');
document.write('<\/FORM>');
}
else if (browser == 'Microsoft Internet Explorer') {
document.write('<FORM NAME="controlForm">');
document.write('<IFRAME FRAMEBORDER=0 WIDTH=320 HEIGHT=240 MARGINHEIGHT=0 MARGINWIDTH=0 SCROLLING=no SRC="../images/image1.jpg"><\/IFRAME>');
document.write('<INPUT TYPE="RADIO" NAME="radioButton" VALUE="0" CHECKED>');
document.write('<IFRAME FRAMEBORDER=0 WIDTH=320 HEIGHT=240 MARGINHEIGHT=0 MARGINWIDTH=0 SCROLLING=no SRC="../images/image2.jpg"><\/IFRAME>');
document.write('<INPUT TYPE="RADIO" NAME="radioButton" VALUE="1">');
document.write('<\/FORM>');
}
//--></SCRIPT>
<FORM NAME="imageForm">
<SELECT NAME="imageSelect">
<OPTION VALUE="image1.jpg">Baseball
<OPTION VALUE="image2.jpg">Ice Hockey
<OPTION VALUE="image3.jpg">Basketball
<OPTION VALUE="image4.jpg">Football
<OPTION VALUE="image5.jpg">Soccer
</SELECT>
<INPUT NAME="submitName" TYPE="BUTTON" VALUE="Show" onClick="showImage(document.imageForm.imageSelect)">
</FORM>
<P><A HREF="index.htm">return</A>
</BODY></HTML>Why not try out this example Dropdown menu to multiple images?
The image object has several properties that can be inspected before, during and after the image has loaded.
The following example displays all the image properties supported by JavaScript1.1. Notice that its possible to access the image properties in three ways:
This example uses the onLoad event handler within the BODY tag to invoke a setupDataForm() function, depening on the current browser this will either invoke the JavaScript or JavaScript1.1 version. The last function definition found will be used, therefore the JavaScript1.1 version must follow the JavaScript version. For browsers that do not support JavaScript 1.1 then the JavaSript1.1 version will be ignored.
<HTML>
<HEAD>
<SCRIPT LANGUAGE="JavaScript"><!--
function setupDataForm() {
alert('Your browser does not support the image object - sorry');
}
//--></SCRIPT>
<SCRIPT LANGUAGE="JavaScript1.1"><!--
function setupDataForm() {
document.dataForm.name.value = document.images[0].name;
document.dataForm.src.value = document.images[0].src;
document.dataForm.lowsrc.value = document.images[0].lowsrc;
document.dataForm.height.value = document.images['Sample Image'].height;
document.dataForm.width.value = document.images[document.images[0].name].width;
document.dataForm.border.value = document.images[0].border;
document.dataForm.complete.value = document.images[0].complete;
document.dataForm.hspace.value = document.images[0].hspace;
document.dataForm.vspace.value = document.images[0].vspace;
document.dataForm.prototype.value = document.images[0].prototype;
}
//--></SCRIPT>
</HEAD>
<BODY onLoad="setupDataForm()">
<IMG NAME="Sample Image" SRC="image1.jpg">
<P>
<FORM NAME="dataForm">
<TABLE CELLPADDING=0 BORDER=0>
<TR><TD>name</TD><TD><INPUT TYPE="INPUT" NAME="name" SIZE="40"></TD></TR>
<TR><TD>src</TD><TD><INPUT TYPE="INPUT" NAME="src" SIZE="40"></TD></TR>
<TR><TD>lowsrc</TD><TD><INPUT TYPE="INPUT" NAME="lowsrc" SIZE="40"></TD></TR>
<TR><TD COLSPAN=2>
<TABLE CELLPADDING=0 BORDER=0><TR><TD>height</TD><TD><INPUT TYPE="INPUT" NAME="height" SIZE="4">
</TD><TD>width</TD><TD><INPUT TYPE="INPUT" NAME="width" SIZE="4">
</TD><TD>border</TD><TD><INPUT TYPE="INPUT" NAME="border" SIZE="4"></TD></TR>
<TR><TD>complete</TD><TD><INPUT TYPE="INPUT" NAME="complete" SIZE="5">
</TD><TD>hspace</TD><TD><INPUT TYPE="INPUT" NAME="hspace" SIZE="4">
</TD><TD>vspace</TD><TD><INPUT TYPE="INPUT" NAME="vspace" SIZE="4"></TD></TR></TABLE>
</TD></TR>
<TR><TD>prototype</TD><TD><INPUT TYPE="INPUT" NAME="prototype" SIZE="40"></TD></TR>
</TABLE>
</FORM>
<P><A HREF="index.htm">return</A>
</BODY></HTML>Why not try out this example Image properties?
Now that we know we can access the image properties, especially the image height and width, wouldn't it be nice if we could establish the browser window width and height. Well the following script almost does that. It uses a trick where an image is shown at 100% width and 100% height, i.e. the full size of the browser window. It then retrieves the image height and width properties, whic can then be used to determine what screen size the user is using and redirect then to different versions of the same web page, e.g. small images, or large images.
To perform this trick its useful to have a very small balnk image, preferably a white image 1 pixel wide by 1 pixel high.
To show you that the image is indeed expanded I've included an image border, which you can romve in your examples.
It uses the onLoad event handler again to invoke one of two checkSize() functions. The JavaScript1.1 version displays the testImage image width and height properties.
<HTML><HEAD>
<SCRIPT LANGUAGE="JavaScript"><!--
function checkSize() {
alert('Your browser does not support the image object - sorry');
window.location.href = 'index.htm';
}
//--></SCRIPT>
<SCRIPT LANGUAGE="JavaScript1.1"><!--
function checkSize() {
alert('Width=' + document.images['testImage'].width + ' Height=' + document.images['testImage'].height);
window.location.href = 'index.htm';
}
//--></SCRIPT>
</HEAD>
<BODY onLoad="checkSize()">
<IMG SRC="image.jpg" NAME="testImage" WIDTH="100%" HEIGHT="100%" BORDER=1>
</BODY></HTML>Why not try out this example Browser size?
The following example extends the previous one to attempt to detect the screen size.
<HTML><HEAD>
<SCRIPT LANGUAGE="JavaScript"><!--
function checkSize() {
alert('Your browser does not support the image object - sorry');
window.location.href = 'index.htm';
}
//--></SCRIPT>
<SCRIPT LANGUAGE="JavaScript1.1"><!--
function checkSize() {
var imageWidth = document.images['testImage'].width;
var imageHeight = document.images['testImage'].height;
if ( (imageWidth > 1152) || (imageHeight > 864) )
alert('Screen Width=1280 Screen Height=1024');
else if ( (imageWidth > 1024) || (imageHeight > 768) )
alert('Screen Width=1152 Screen Height=864');
else if ( (imageWidth > 800) || (imageHeight > 600) )
alert('Screen Width=1024 Screen Height=768');
else if ( (imageWidth > 640) || (imageHeight > 480) )
alert('Screen Width=800 Screen Hight=600');
else alert('Screen Width=640 Screen Height=480');
window.location.href = 'index.htm';
}
//--></SCRIPT>
</HEAD>
<BODY onLoad="checkSize()">
<IMG SRC="../images/image.jpg" NAME="testImage" WIDTH="100%" HEIGHT="100%" BORDER=1>
</BODY></HTML>Note, this method is not fool proof, as it depends on what size and layout the users browser is set to.
You could always replace the alert() function calls with a redirection to another document, e.g.:
window.location.href = 'd640x480.htm';
Why not try out this example Screen size?
Macromedia Fireworks Image Map Tutorial