ansaurus

Question

Images In Javascript

Answer 1

+1 A:

Hey,

img3 and img4 are missing the this.id reference, so the method doesn't know about the image being clicked... is that what you were asking about?

Brian 2010-01-22 14:57:33

+1 for preemptive answer :)

PeanutPower 2010-01-22 14:59:40

yup. thanks i did that but still no change

kjkjl 2010-01-22 14:59:43

Hey, also the method should take the ID, and you should change the document.getElementById() to take this new param, so it should be: swapImage(id) { .. }, and getElementById should use this new id variable...

Brian 2010-01-22 17:52:11

Answer 2

A:

I suppose the question is: "Why does this script fail?".

There are several issues with your script:

document.write() is not supposed to be used for logging. It can easily corrupt your page.
You don't set the IMG1 variable. You probably wont something like var IMG1 = document.getElementById("IMG1"); at the start of your script.
The cases in the switch statement have to be string literals. Instead of case img3: you have to write case "img3":

Fabian Jakobs 2010-01-22 15:05:08

Thanks Fabian. I tried that but still no results.

kjkjl 2010-01-22 15:09:44

...not to forget, that `function swapImage(this.id) {` is a syntax error (you can't set `this.id` as variable declaration of a function).

Boldewyn 2010-01-22 15:10:46

Thanks guys. but I feel the function swapimage isnt getting executed. as the document.write() statement isnt executed.

kjkjl 2010-01-22 15:14:29

Answer 3

A:

Is this what you were trying to do (untested)?

<html>
    <head>
    <script type="text/javascript">
        var swapImage = function() {
            var IMG1=document.getElementById("img1");
            return function(){
                switch (this.id) {
                    case "img2":
                        IMG1.src = "component1/images/image2.jpg";
                        intImage = 2;
                    break;
                    case "img3":
                        IMG1.src = "component1/images/image3.jpg";
                        intImage = 2;
                    break;
                    case "img4":
                        IMG1.src = "component1/images/image4.jpg";
                        intImage = 2;
                    break;
                    default:
                    break;
                }
                return false;
            }
        };
        </script>
    </head>
    <body>
        <IMG id="img1" height="100px" width="100px" src="image1.jpg">
        <IMG id="img2" height="40px" width="40px" src="image2.jpg" onclick="swapImage();"> 
        <IMG id="img3" height="40px" width="40px" src="image3.jpg" onclick="swapImage();">
        <IMG id="img4" height="40px" width="40px" src="image4.jpg" onclick="swapImage();">

    </body>
</html>

Please note that is not a good way to do this.

David Murdoch 2010-01-22 15:09:35

k... trying my best.

kjkjl 2010-01-22 15:16:43

Answer 4

+1 A:

To add to Fabian's answer, in your function your parameter should be id, not this.id, and your switch statement should do the same, like so:

function swapImage(id) {
  switch (id) {
    // case statements
  }
}

KevnRoberts 2010-01-22 15:09:38

Answer 5

+1 A:

How about this?

<HTML>
<HEAD>
<SCRIPT LANGUAGE="javascript">
function swapImage(src) {
  document.getElementById("IMG1").src = src;
}
</SCRIPT>
</HEAD>
<BODY>
 <IMG id="IMG1" src="image1.jpg" height="100px" width="100px">
 <IMG id="IMG2" height="40px" width="40px" src="image1.jpg" onclick="swapImage(this.src);"> 
 <IMG id="IMG3" height="40px" width="40px" src="image2.jpg" onclick="swapImage(this.src);">
 <IMG id="IMG4" height="40px" width="40px" src="image1.jpg" onclick="swapImage(this.src);">
 </BODY>
</HTML>

There are some errors in your code, for example:

The document.write should not be used like this
You are doing switch/case on non existing variables (img2, img3, img4)
JavaScript is case sensitive. IMG4 does not equal img4
return is a statement. If you want to return false, you write return false;
Each statement should end with a semicolon.
HTML tag names should be written in lowercase
this.id is used incorrectly in the swapImage function (shouldn't be there at all)..
..but it is correct when used in IMG2..
..but is incorrect in IMG3 and IMG4
The img tag should not have a "name" attribute

Hope this helps.

Helgi 2010-01-22 17:02:20

Thanks Helgi,but the image is not changing.

kjkjl 2010-01-22 18:07:28

Could be a casing issue? The image tag has id: IMG1, the javascript looks for img1? Just a thought.

KP 2010-01-22 19:51:02

@KevinP Yes, there was a casing issue. Also, the language attribute contained "text/javascript" instead of just "javascript".

Helgi 2010-01-25 09:59:22

ansaurus

tags:

views:

answers:

Images In Javascript

related questions