Don't know how to make script with preloaded images

Question

Can someone look over this and tell me what I have to do to get the images to show up?

<head>

<SCRIPT LANGUAGE="JavaScript">



<!-- //Begin

function changeImage(filename)
{
  mainimage.src = filename;
}

//  End -->
</script>

</head>



<body>

<p>
<a href="javascript:changeImage('image-viewer/image1.jpg')">Image 1</a>
<a href="javascript:changeImage('image-viewer/image2.jpg')">Image 2</a>
<a href="javascript:changeImage('image-viewer/image3.jpg')">Image 3</a>
<a href="javascript:changeImage('image-viewer/image4.jpg')">Image 4</a>
</p>
<p>
<img name="mainimage" src="image-viewer/blank.jpg"></p>


<p><center>
<font face="arial, helvetica" size"-2">
</center><p>


</script>
</font></body>
</html>

Your current code seems to work fine. I made a copy of your code, put it in a file called test.html, then made a folder called "image-viewer" and put 4 images in there. And it worked in Safari, Chrome, and Firefox. Can't test on IE on my home computer. Are you sure you've got the file names correct? — Vincent McNabb, Jul 31 '10 at 06:08
I don't know how to load the images onto my page. I know this sounds ridiculous, but when you run the script, no pictures show up. Are the pictures supposed to come from my computer? — kHuynh, Jul 31 '10 at 06:23
Yes I'm sure, however it doesn't load with IE. That's my issue. — kHuynh, Jul 31 '10 at 06:24
Please don't use javascript: URLs - they break horribly if link is opened in new tab (which I do often). `` will do the same thing, better. — Kornel, Jul 31 '10 at 11:54
Yes, that works. However I want to be able to change images on the same page rather than having to go back and click on the next link. — kHuynh, Jul 31 '10 at 17:49

score 0 · Answer 1 · answered Jul 31 '10 at 05:10

<!DOCTYPE html>
<html>
    <head>
        <title>Sample page</title>   
        <script type="text/javascript">

        function changeImage(replacement)
        {
            document.getElementById("main_image").src = replacement;
            return false;   
        }

        </script>
    </head>
    <body>

        <ul>
            <li><a href="javascript:changeImage('image1.jpg')">Image 1</a></li>
            <li><a href="javascript:changeImage('image2.jpg')">Image 2</a></li>
            <li><a href="javascript:changeImage('image3.jpg')">Image 3</a></li>
            <li><a href="javascript:changeImage('image4.jpg')">Image 4</a></li>
        </ul>

        <p>
            <img id="main_image" src="image-viewer/blank.jpg" alt="" />
        </p>

    </body>
</html>

Gert Grenander · Answer 2 · 2010-07-31T05:47:43.273

0

Change your function to:

function changeImage(filename) {
  document.main_image.src=filename;
  void(0);   
}

edited Jul 31 '10 at 05:47

answered Jul 31 '10 at 05:29

Gert Grenander

16,866
6
40
43

Thank you. I don't mean to sound ignorant, however my images still will not show up when I run the script. All that pops up is the red "X" in a white box. – kHuynh Jul 31 '10 at 05:32
How do I get the pictures loaded onto my page? – kHuynh Jul 31 '10 at 05:33
Sorry... I messed up, it wasn't an ID, but name. I've changed my code accordingly. This should work. – Gert Grenander Jul 31 '10 at 05:48

Dan · Answer 3 · 2010-07-31T21:32:20.693

A good friend helped me look this up

mainimage.src = filename; is wrong, and should instead be

<img name="mainimage" src="image-viewer/blank.jpg">

should be

<img id ="mainimage" src="image-viewer/blank.jpg">

And then this:

mainimage.src = filename;

should be

document.getElementById("mainimage").setAttribute("src", filename);

there's an extra tag in the end.

I think she's having more of a problem with her image locations, though. He needs more info about project

Edit : What might be happening is she has the html file in the same folder as the images which really won't work. because if all her files are in c:/image-viewer/ with no subdirectories and the html file is c:/image-viewer/index.html. Therefore she needs a new folder for the images

Because the script is asking for c:/image-viewer/image-viewer/image1.jpg as opposed to c:/image-viewer/image1.jpg

If this isn't for a class, she needs to learn to write standards compliant code. Look up DOM

if all the files are in one folder, then she has to do away with image-viewer/ in front of the file names.

Don't know how to make script with preloaded images

3 Answers3