Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    New to the CF scene
    Join Date
    Jul 2010
    Posts
    5
    Thanks
    1
    Thanked 0 Times in 0 Posts

    newbie javascript problem - onMouseover slideshow with multiple image locations

    Hi,

    Im a complete newbie to javascript and I've basically copied and pasted the javascript I found here to use on my site. Its an onMouseOver slideshow:

    http://www.javascriptkit.com/script/...ifferent.shtml

    to use on my site.

    Basically, my problem is how do I add a second, separate image in a different location on the web page, associated with this script?


    If I post <a href="javascript:warp()"><img src="myimage" name="targetimage" border=0></a> in two different locations, which is the script for the image, the script stops working, but having it once makes it work. So how do I add two different image locations?

    Can someone please help me here? I just want to add more images in a different location. ie have image location 1, and image location 2.

    Thanks in advance

    Script Below:


    Code:
    <script>
    
    function changeimage(towhat,url){
    if (document.images){
    document.images.targetimage.src=towhat.src
    gotolink=url
    }
    }
    function warp(){
    window.location=gotolink1
    }
    </script>
    <script language="JavaScript1.1">
    var myimages=new Array()
    var gotolink="#"
    
    function preloadimages(){
    for (i=0;i<preloadimages.arguments.length;i++){
    myimages[i]=new Image()
    myimages[i].src=preloadimages.arguments[i]
    }
    }
    
    
    preloadimages(my images here)
    
    </script>
    
    For the Links:
    
    <a href="creativewriting.html" onMouseover="changeimage(myimages[1],this.href)">Creative Writing</a><br>
    
    For the Image:
    
    <a href="javascript:warp()"><img src="myimage" name="targetimage" border=0></a>

  • #2
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    26,007
    Thanks
    79
    Thanked 4,434 Times in 4,399 Posts
    It's because the code uses the name= of the image.

    And you can't have two <img> tags with the same name. (Well, you can, but then you can't refer to a single image by name.)

    Lots of ways to fix it, but the simplest would be to just clone the code, changing all the names in the clone. Maybe just add "2" to the names.

    Code:
    function changeimage2(towhat,url){
        if (document.images){
            document.images.targetimage3.src=towhat.src
            gotolink2=url
        }
    }
    ... etc. ...
    Obviously, you don't want to do this if you will have N such images. Where N is greater than 3 and maybe greater than 2.

    If you will have N>3, then ask again.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • Users who have thanked Old Pedant for this post:

    mindonedig (07-14-2010)

  • #3
    New to the CF scene
    Join Date
    Jul 2010
    Posts
    5
    Thanks
    1
    Thanked 0 Times in 0 Posts
    hi,

    thanks for the reply.

    Im a total newbie to javascript and literally copied and pasted the code. I don't know any technical names or what the functions in the code do as such, but Ill try your suggestion and report back.

    I will have over 50 images associated with this javascript.
    Last edited by mindonedig; 07-14-2010 at 10:35 PM.

  • #4
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    26,007
    Thanks
    79
    Thanked 4,434 Times in 4,399 Posts
    Ehhh...I think maybe here is a simpler solution. That code is too ugly to live, anyway.

    Code:
    <script type="text/javascript">
    function changeLink( linkid, iname, thislink )
    {
        var link = document.getElementById(linkid);
        var image = link.getElementsByTagName("img")[0];
        image.src = iname;
        link.href = thislink.href;
    }
    </script>
    
    ...
    
    <a href="creativewriting.html" onMouseover="changelink('link1','writing.jpg',this)">Creative Writing</a><br>
    <a href="basketweaving.html" onMouseover="changelink('link1','weaving.jpg',this)">Underwater Basket Weaving</a><br>
    
    
    <a id="link1" href="creativewriting.html"><img src="writing.jpg" border=0></a>
    
    <a href="atomics.html" onMouseover="changelink('link2','atomics.jpg',this)">Nuclear Physics for Fun & Profit</a><br>
    <a href="biology.html" onMouseover="changelink('link2','biology.jpg',this)">How to Mutate Plants</a><br>
    
    <a id="link2" href="biology.html"><img src="biology.jpg" border=0></a>
    You can keep the preload of the images, if you want. Can't hurt, might help.

    NOTE: If you made the names of the images *match* the names of the pages (as mine do, in the second set of above example, we could simplify a bit further.

    This code gets rid of warp() and gotolink entirely and does it all with a single simple function.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #5
    New to the CF scene
    Join Date
    Jul 2010
    Posts
    5
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Hi,

    Thanks for the info

    I tried the 2nd method you suggested with the simpler function, and it doesn't work at all!

    not sure what I'm doing wrong or if theres a mistake in the code. I re-checked about 10 times.

    If i could simply re-clone the code I have, I'll be happy, since I dont have a clue about javascript.

    To re-code, is this correct?:

    Code:
    /
    
    function changeimage2(towhat,url){
    if (document.images){
    document.images.targetimage3.src=towhat.src
    gotolink2=url
    }
    }
    function warp2(){
    window.location=gotolink2
    }
    </script>
    <script>
    <script language="JavaScript1.1">
    var myimages=new Array()
    var gotolink="#"
    
    function preloadimages2(){
    for (i=0;i<preloadimages2.arguments.length;i++){
    myimages[i]=new Image()
    myimages[i].src=preloadimages2.arguments[i]
    }
    }
    
    preloadimages2("all of my images" )
    </script>
    and image location would be: <a href="javascript:warp()"><img src="clicklinksontheleft.png" name="targetimage3" border=0></a>

  • #6
    New to the CF scene
    Join Date
    Jul 2010
    Posts
    5
    Thanks
    1
    Thanked 0 Times in 0 Posts
    YES!

    my mr ugly is finally starting to work with the cloned code.

    It may be a bit slow, but Im going to put it in a .js file so should lighten things up a bit

    thanks for the help...i appreciate it!!

  • #7
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    26,007
    Thanks
    79
    Thanked 4,434 Times in 4,399 Posts
    You also need
    Code:
    var gotolink2="#"
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •