Web Analytics Made Easy - StatCounter image map / javascript / array problem - CodingForum

Announcement

Collapse
No announcement yet.

image map / javascript / array problem

Collapse
X
Collapse
 
  • Page of 1
  • Filter
  • Time
  • Show
Clear All
new posts
Previous template Next
  • #1

    image map / javascript / array problem

    Hello, I've been messing around with this code and can't get it to work right. I'm a newbie and don't know where the problem could be, maybe even a typo!

    I butchered the code so many times but I'm out of ideas. At this point, I'm probably missing even more necessary parts to it.

    Please note: the first code listed WORKS. The second code listed is the one I need help with!

    Code:
    <html>
<body>
<body bgcolor="white">
<!--<body background="C:\WINDOWS\Web\Wallpaper\20.jpg"> -->

<script type="text/javascript">

<!--
var index = 2
changeIMG = new Array();

changeIMG[0] = new Image; 
changeIMG[0].src = "C:/WINDOWS/Web/Wallpaper/47.jpg"; 
changeIMG[1] = new Image; changeIMG[1].src = "C:/WINDOWS/Web/Wallpaper/48.jpg"; 
changeIMG[2] = new Image; changeIMG[2].src = "C:/WINDOWS/Web/Wallpaper/49.jpg";
changeIMG[3] = new Image; changeIMG[3].src = "C:/WINDOWS/Web/Wallpaper/50.jpg";
changeIMG[4] = new Image; changeIMG[4].src = "C:/WINDOWS/Web/Wallpaper/51.jpg";
changeIMG[5] = new Image; changeIMG[5].src = "C:/WINDOWS/Web/Wallpaper/52.jpg";

function doChangeMe(index)
 { 
document.myIMG.src=changeIMG[index].src; 
}
</script>
<img src="C:\WINDOWS\Web\Wallpaper\spacer.gif" BORDER=0 HEIGHT=500 WIDTH=300>
<center>
<a href="javascript:doChangeMe(index)"onClick="index++";><img src="C:/WINDOWS/Web/Wallpaper/47.jpg" name="myIMG" width="256" height="204" border=0></a>
</center>

</body>
</html>

    I had this code working without an image map (so it would switch images when clicked anywhere on the image) but can't get the format to work with image map. Eventually I would also like to add a OnClick=(index++) once I get it to change at least on first click.

    Code:
    <html>
<body>
<body bgcolor="white">

<script type="text/javascript">

<!--
var index = 2
changeIMG = new Array();

changeIMG[0] = new Image; 
changeIMG[0].src = "C:/WINDOWS/Web/Wallpaper/47.jpg"; 
changeIMG[1] = new Image; changeIMG[1].src = "C:/WINDOWS/Web/Wallpaper/48.jpg"; 
changeIMG[2] = new Image; changeIMG[2].src = "C:/WINDOWS/Web/Wallpaper/49.jpg";
changeIMG[3] = new Image; changeIMG[3].src = "C:/WINDOWS/Web/Wallpaper/50.jpg";
changeIMG[4] = new Image; changeIMG[4].src = "C:/WINDOWS/Web/Wallpaper/51.jpg";
changeIMG[5] = new Image; changeIMG[5].src = "C:/WINDOWS/Web/Wallpaper/47.jpg";

function doChangeMe(index)
 { 
document.myIMG.src=changeIMG[index].src;
}
</script>
<img src="C:\WINDOWS\Web\Wallpaper\spacer.gif" BORDER=0 HEIGHT=500 WIDTH=300>
<center>
<map name="map">
<area href="javascript:doChangeMe(index)" shape="rect" coords="1,1,128,102">
</map>
<img src="C:/WINDOWS/Web/Wallpaper/47.jpg" width=256 height=204 border=0 usemap="#map">
</center>
</body>
</html>
    Tags: None
  • #2
    Okay you've got a couple of problems going on here.

    Firstly in this line you refer to an id (myIMG) that doesn't exist:

    Code:
    document.[B]myIMG[/B].src=changeIMG[index].src;
    You need to add that to the image that you are updating the source of:

    Code:
    <img src="C:/WINDOWS/Web/Wallpaper/47.jpg" width="256" height="204" border="0" usemap="#map" id="myIMG" >
    Secondly you are not updating the value of index at any point so you may want to update your function to something like:

    Code:
    function doChangeMe() { 
document.myIMG.src=changeIMG[index].src; 
index++;
}
    Thirdly I'm guessing you want to loop this as otherwise you will run out of images after 5 so you may want to add something like:

    Code:
    function doChangeMe() { 
document.myIMG.src=changeIMG[index].src;
index++;
if (index == changeIMG.length-1) {
	index = 0;
}
}
    Finally your HTML is shocking Chose a doctype and try validating it http://validator.w3.org/ - this will save you countless problems in the future

    Comment

    • #3
      Thanks!

      Sorry about the format, I copy/pasted a lot from other examples and I'm sure the format from different programmers clashes (plus my own newbieness). I found the problem all along is that this code works in internet explorer but not as a windows background.

      My ultimate goal was to have an interactive windows wallpaper where you can switch the background just by clicking on certain areas on the desktop. I guess windows desktop won't run javascript and I have to code what I want with only html... So I'll have to come up with a different layout - should be interesting. Thanks for your help though!

      Comment

      • #4
        Going to take a wild stab in the dark here as I've no idea if this would work or not but maybe try using an external .htc file for your scripting if you are aiming to run it from the desktop.

        Again I've no idea if that would work but it might.

        Comment

        • #5
          Originally posted by mattyod View Post
          Okay you've got a couple of problems going on here.

          Firstly in this line you refer to an id (myIMG) that doesn't exist:

          Code:
          document.[B]myIMG[/B].src=changeIMG[index].src;
          I have to disagree with you there. This is not a document.getElementById('myIMG') He doesn't need an id attribute, he needs a name attribute. Other than that... the rest of your suggestions seem fine and would probably solve his issue. While typing and previewing... I saw that the OP had posted again... it helps to know what your long-term goal is so we can point you in the right direction... had you said you were planning on running this on a desktop... we would have told you that it's not possible with JavaScript alone. I guess you could try the following link for help... supposedly it has a solution... though I haven't tested it:

          http://stackoverflow.com/questions/1...ing-javascript
          Last edited by Eldarrion; Apr 9, 2009, 11:02 AM. Reason: Adding extra info
          The way to success is to assume that there are no impossible things. After all, if you think something is impossible, you will not even try to do it.

          How to ask smart questions?

          Comment

          • #6
            Originally posted by Eldarrion View Post
            He doesn't need an id attribute, he needs a name attribute.
            Fair enough I guess as he isn't using a doctype, I was just trying to give him a nudge along towards writing valid code.

            Comment

            Previous template Next
            Working...
            X