Home/ Questions/Q 7640625
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-31T08:43:02+00:00

So, I’m working on a project for a motion-graphics class, wherein they teach us

  • 0

So, I’m working on a project for a motion-graphics class, wherein they teach us no JavaScript but then have us make a webpage using JavaScript. We’re told to use DreamWeaver, and that’s worked okay for most things, but I’m having trouble with one function in particular-

I want to be able to change an image multiple times when it is clicked. I’ve put the DW generated code below, basically I want sun.png to change to whitedwarf.png when clicked, and that works fine using the MM_swapImage() method. The rub is that I want to be able to click on the new whitedwarf.png and change it to a 3rd image (planet.png for the curious).

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>

<style type="text/css">
body {
margin-left: 100px;
margin-top: 100px;
background-image: url(Images/startile.gif);
}
</style>
<script type="text/javascript">
function MM_findObj(n, d) { //v4.01
var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src;     x.src=a[i+2];}
}
</script>
</head>

<body>
<img src="Images/sun.png" width="500" height="500" id="Image1" onclick="MM_swapImage('Image1','','Images/whitedwarf.png',0)" />
</body>
</html>

I’ve provided as much relevant info as I can, I have precisely no familiarity with JS, though I have programmed a good deal in Java, so I’m not completely illiterate.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    “Use Dreamweaver”? Phooey on Dreamweaver. You don’t need no stinkin Dreamweaver.

    Start with a collection of images grouped inside a div or section (if you’re using HTML5)
    If CSS or Javascript are disabled, the images will show up normally, so you can still see them all.

    <div id="imgs">
<img src="img.jpg" alt="My Image 1"/>
<img src="img2.jpg" alt="My Image 2"/>
</div>

    Then, when the page loads, hide all the images except one, and wire a click event to each image to hide itself and display the next one. 

    var port_imgs, i;
    window.onload = function () {
            //get all the images in "#imgs"
        port_imgs = document.getElementById("imgs").getElementsByTagName("img");
           //loop through, hiding them all
        for (i = 0; i < port_imgs.length; i++) {
            port_imgs[i].style.display = "none";
                    //wire up the click event and do the magic
            port_imgs[i].onclick = (function (k) {
                var r = function () {
                    this.style.display = "none";
                    if (k >= port_imgs.length) { k = 0 }
                    port_imgs[k].style.display = "block";
                };
                return r;
            })(i+1);
        }
            //un-hide (display) the first image so we're all set to go
        port_imgs[0].style.display = "block";
    }

    You can see a live example on my website, where I’ve employed exactly the same thing.

    • 0