On Sun, 18 Jan 2004 16:56:39 GMT, Rob Manger <ro********@hotmail.com>
wrote:
<snip>
Also, how do I "preload" the images before they are even needed? eg: so
the Loading image loads immedeately.
If I recall correctly:
var img = new Image();
img.src = 'image1.gif'; // Preload image1.gif
What I don't remember is if you should use an array of Image objects, each
preloading a separate image, or if you can use one. Try it and see. :)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
Nice to see someone using a DTD for a change. :)
<html>
<head>
<script id="clientEventHandlersJS" language="javascript">
The SCRIPT element doesn't have an id attribute. Also, it requires (that
is, it's mandatory) a type attribute. The above should read:
<script type="text/javascript">
When the type attribute is used, there is no need to use the language
attribute.
<!--
Don't bother with SGML comments in SCRIPT elements. They're no longer
required.
var clicked='false';
Why are you using a string to indicate true or false? That's what booleans
are for. Instead use:
var clicked = false;
This also allows you to write
if ( clicked ) {
rather than
if ( clicked == 'false' ) {
which is another way of solving the next issue...
function fncover(){
if (clicked='false')
This is where your problems lie. When you assign a value to a variable,
the expression returns the assigned value. That is, if you did this:
window.alert( clicked = 'false' );
the alert box would display, false. As this returned value is not null,
undefined, false, 0, or an empty string (all considered false), your if
expression is *always* true. Instead, use:
if ( 'false' == clicked ) {
Note: I reversed the order of the expression out of habit. If you wrote,
if ( 'false' = clicked ) {
you would get an error as you can't assign to a literal value. Placing
constants on the left-hand side when you are performing a comparison can
help avoid these simple mistakes.
{
IMG1.src='./images/webmainlogoover.gif';
This might not work on all browsers because IMG1 is not a global, it's the
id of an element. There are two solutions in your case; getElementById()
or passing an object reference. The latter is easier, so I'll just show
that.
Inside an intrinsic event, such as onclick, the keyword 'this' is a
reference the object that was clicked. You can then use it to access the
properties of that object. For example:
function myClick( elem ) {
elem.src = '...';
}
...
<img src="..." onclick="myClick(this)">
<snip>
<img
onmouseover="return fncover()"
onmouseout="return fncoff()"
onclick="return fncclick()"
src="./images/webmainlogo.gif"
border="0"
id="IMG1"
language="javascript"
width="500" >
The IMG element doesn't have a language attribute. To specify the language
used in intrinsic events, place this META element in the head of the
document.
<meta http-equiv="Content-Script-Type" content="text/javascript">
SUMMARY - thought I'd better do this, for clarity
Use SCRIPT elements like
<script type="text/javascript">
Don't use incompatible globals - pass references to your functions instead.
Use booleans, not strings (where appropriate).
Make sure you compare, not assign.
function fncover( elem ) {
if ( true == clicked ) { // or more simply: if ( clicked ) {
elem.src = 'newImage.gif';
}
}
...
<img
onmouseover="fncover(this)"
onmouseout="fncoff(this)"
onclick="fncclick(this)"
src="./images/webmainlogo.gif"
border="0"
id="IMG1"
width="500">
One last thing: you'll notice above that I removed the return keyword in
the event attributes of the IMG element. This is because you never
returned a value from any of the functions. As I don't remember anything
about you needing to return a value, in this case, I didn't add return
statements.
Hope that helps,
Mike
--
Michael Winter
M.******@blueyonder.co.invalid (replace ".invalid" with ".uk" to reply)
