473,574 Members | 2,428 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

Set image onclick and keep it there

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="clientEvent HandlersJS" language="javas cript">
<!--

var clicked='false' ;

function fncover(){
if (clicked='false ')
{
IMG1.src='./images/webmainlogoover .gif';
}
}

function fncoff(){
if (clicked='false ')
{
IMG1.src='./images/webmainlogo.gif ';
}
}

function fncclick(){
IMG1.src='./images/Loading.gif';
clicked='true';
}

//-->
</script>
</head>
<body>
<a href="Content.a spx" target="maintit le">
<img
onmouseover="re turn fncover()"
onmouseout="ret urn fncoff()"
onclick="return fncclick()"
src="./images/webmainlogo.gif "
border="0"
id="IMG1"
language="javas cript"
width="500" >
</a>
</body>
</html>

Thanx in advance,

Rob
ro**@devtest.co m
Jul 20 '05 #1
2 4427
On Sun, 18 Jan 2004 16:56:39 GMT, Rob Manger <ro********@hot mail.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="clientEvent HandlersJS" language="javas cript">
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="myClic k(this)">

<snip>
<img
onmouseover="re turn fncover()"
onmouseout="ret urn fncoff()"
onclick="return fncclick()"
src="./images/webmainlogo.gif "
border="0"
id="IMG1"
language="javas cript"
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="fn cover(this)"
onmouseout="fnc off(this)"
onclick="fnccli ck(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.******@blueyo nder.co.invalid (replace ".invalid" with ".uk" to reply)
Jul 20 '05 #2
Excellent!!!! Thanx Mike. Your a legend :D

Rob
Jul 20 '05 #3

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

3
63709
by: -DRB- | last post by:
I suspect this is fairly standard practice, but I've looked on the net and can't quite find the script I want. I would like to have a page with an image on which changed depending on which link next to it is clicked... there will be about 5/6 links and their associated image. Thanks very much indeed. Dave.
5
2139
by: Csaba Gabor | last post by:
Is there any way to determine the pixel height and width of an original image? Specifically, If I have <IMG id=myImg src="pic.jpg" height=200 width=300> can I figure out what the original size of pic.jpg is (had I not placed the height and width attributes on the image, whether in the original tag or later via javascript)?
14
11046
by: D. Alvarado | last post by:
Hello, I am trying to open a window containing an image and I would like the image to be flush against the window -- i.e. have no padding or border. Can I make this happen with a single call to a window.open function? I would prefer not to create a separate HTML page. So far all I have is the basic var cwin =...
1
2497
by: John Thompson | last post by:
We're sooo close. When we load the page to upload the image, all of the prms go through except the binary image data. Using SQL server with the data type set to "image". Please help! Thanks- John
3
3311
by: lofty00 | last post by:
hello, sorry about the repost - I've been posting to several groups and I've decided it's better to make a single repost to all of them rather than an extra post in each. I've been trying to work out why I can't get the image maps to work in IE6 on a page I'm working on (which is now working in firefox). I've written the page below as a...
7
2444
by: simchajoy2000 | last post by:
Hi, I am just a javascript beginner so maybe this is a simple problem but I am trying to do some rollovers on images in a separate <div>. Here is the relevent piece of my code: <html> <head> <script type="text/javascript"> if (document.images) {
10
6749
by: cjparis | last post by:
Hello everyone. If anyone can give me a hand I would be gratefull Am doing a site which requires a moving element and have used DHTML to do it. Have a simple Browser detect script to sort IE from Netscape. IE is ok but the Netscape browser including Firefox and Safari are not working now. Not sure why. The idea is that when you mouseover...
1
4075
by: sourcie | last post by:
I am changing an existing quiz found on "JavaScriptKit.com Multiple Choice Quiz" I have an image. Instead of using the radio buttons with the normal true/false question, I want to place two hotspots on the image. One being correct(a) and the other incorrect(b). When the user clicks on the correct hotspot or place on the image, it should score...
3
4409
by: premprakashbhati | last post by:
hi, good evening.. i am going to upload an image in a web form .....for that iam using HTML input(file) control and one web control button i.e., Upload_Button() here is the code ...its work fine when iam using a normal web page... but can't in content page.... Code in Master Page <%@ Master Language="C#" AutoEventWireup="true"...
0
7794
marktang
by: marktang | last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However, people are often confused as to whether an ONU can Work As a Router. In this blog post, we’ll explore What is ONU, What Is Router, ONU & Router’s main...
0
7710
by: Hystou | last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can effortlessly switch the default language on Windows 10 without reinstalling. I'll walk you through it. First, let's disable language...
0
8225
jinu1996
by: jinu1996 | last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven tapestry of website design and digital marketing. It's not merely about having a website; it's about crafting an immersive digital experience that...
0
8092
tracyyun
by: tracyyun | last post by:
Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each protocol has its own unique characteristics and advantages, but as a user who is planning to build a smart home system, I am a bit confused by the...
0
6437
agi2029
by: agi2029 | last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing, and deployment—without human intervention. Imagine an AI that can take a project description, break it down, write the code, debug it, and then...
1
5610
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome a new presenter, Adolph Dupré who will be discussing some powerful techniques for using class modules. He will explain when you may want to use classes...
0
3745
by: adsilva | last post by:
A Windows Forms form does not have the event Unload, like VB6. What one acts like?
1
1332
muto222
by: muto222 | last post by:
How can i add a mobile payment intergratation into php mysql website.
0
1051
bsmnconsultancy
by: bsmnconsultancy | last post by:
In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence can significantly impact your brand's success. BSMN Consultancy, a leader in Website Development in Toronto offers valuable insights into creating...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.