Set image onclick and keep it there

Rob Manger · Jan 18, 2004

Hi All,

I am hoping someone can help me. I am trying to setup my main page so that
when the user moves the mouse over an image, it changes the source (got this
working). When the user CLICKS on the image (it is a link to the content
page) it changes to a third image AND STAYS THERE. ie: so the iamge won't
change back to the omouseoff image. Does this make sense?

Also, how do I "preload" the images before they are even needed? eg: so the
Loading image loads immedeately.

Here is the code I have so far, which works as far is it goes, however the
"Loading" image is overwritten by the mouse off function. What am I doing
wrong? (Sorry for formatting):

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<script id="clientEventHandlersJS" language="javascript">

</script>
</head>
<body>
<a href="Content.aspx" target="maintitle">
<img
onmouseover="return fncover()"
onmouseout="return fncoff()"
onclick="return fncclick()"
src="./images/webmainlogo.gif"
border="0"
id="IMG1"
language="javascript"
width="500" >
</a>
</body>
</html>

Thanx in advance,

Rob
(e-mail address removed)

Michael Winter · Jan 18, 2004

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)">

<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

Rob Manger · Jan 19, 2004

Excellent!!!! Thanx Mike. Your a legend

Rob

Uncaught ReferenceError: item is not defined at HTMLButtonElement.onclick in the: <button onclick="item.inserir()">Inserir dados</button>	1	Apr 22, 2023
New to coding - image to the time of day based on time	2	May 14, 2022
Image not changing between "mute" & "un-mute" images.	5	Jun 2, 2023
Make 'Image X' spin 360deg on y-Axis until reset button clicked	1	Jan 22, 2023
I am trying to detect Which image id="" was clicked ?	22	Jan 3, 2023
Image upload not working in browser	4	Sep 9, 2022
Image shifts to the right when export the page to pdf	4	May 5, 2023
Unable to add task to todo list	1	Sep 25, 2021

Set image onclick and keep it there

Rob Manger

Michael Winter

Rob Manger

Ask a Question

Similar Threads

Members online

Forum statistics

Latest Threads