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 5 of 5

Thread: Swapping Images

  1. #1
    New to the CF scene
    Join Date
    Sep 2010
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Swapping Images

    Hi everyone,

    I'm needing some help capturing just the file name rather than the entire path of the SRC on my input type="image". Basically when I hover over an image, the Default Image should change to the image being hovered on. Here is my code, can't quite get it to work. Sorry I'm very new to JavaScript

    Code:
    <html>
    <head>
    
    <script language = "Javascript">
    function ChangeDefault(src)
    {
    //document.frmMain.DefaultImage.src = src <--Doesn't work at all
    alert(src) //<---Displays the entire file path, want just file name 
    
    }
    </script>
    </head>
    	
    <body>
    
    <form name="frmMain">
    <input type="image" name="DefaultImage" SRC="RWDie1.bmp" HEIGHT=110 WIDTH=160 />
    <br />
    <input type="image" name="img2" SRC="RWDie2.bmp" HEIGHT=110 WIDTH=160 onMouseOver="ChangeDefault(src)" />
    <input type="image" name="img3" SRC="RWDie3.bmp" HEIGHT=110 WIDTH=160 onMouseOver="ChangeDefault(src)" />
    <input type="image" name="img4" SRC="RWDie4.bmp" HEIGHT=110 WIDTH=160 onMouseOver="ChangeDefault(src)" />
    <input type="image" name="img5" SRC="RWDie5.bmp" HEIGHT=110 WIDTH=160 onMouseOver="ChangeDefault(src)" />
    
    
    </form>
    
    </body>
    </html>

  • #2
    New to the CF scene
    Join Date
    Sep 2010
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hmm, I've also tried the code below with no success

    Code:
    <html>
    <body>
    
    <form name="frmMain">
    <input type="image" name="DefaultImage" SRC="RWDie1.bmp" HEIGHT=110 WIDTH=160 />
    <br />
    <input type="image" name="img2" SRC="RWDie2.bmp" HEIGHT=110 WIDTH=160 onMouseOver="document.DefaultImage.src='RWDie2.bmp'" />
    <input type="image" name="img3" SRC="RWDie3.bmp" HEIGHT=110 WIDTH=160 onMouseOver="document.DefaultImage.src='RWDie3.bmp'" />
    <input type="image" name="img4" SRC="RWDie4.bmp" HEIGHT=110 WIDTH=160 onMouseOver="document.DefaultImage.src='RWDie4.bmp'" />
    <input type="image" name="img5" SRC="RWDie5.bmp" HEIGHT=110 WIDTH=160 onMouseOver="document.DefaultImage.src='RWDie5.bmp'" />
    
    
    </form>
    
    </body>
    </html>

  • #3
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,919
    Thanks
    203
    Thanked 2,531 Times in 2,509 Posts
    Is this what you mean?


    Code:
    <script type = "text/javascript">
    function ChangeDefault(src) {
    alert(src) //<---Displays the entire file path, want just file name 
    var pos = src.lastIndexOf("/");
    src = src.substring(pos+1)
    alert (src);
    }
    </script>

    If Harry Rednapp (team's coach) had said "Go out and play the worst you possibly can" they couldn't have done any better. - Football Commentator, Sky Sports

  • #4
    New to the CF scene
    Join Date
    Sep 2010
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Got it...

    Code:
    <html>
    	
    <body>
    
    <form name="frmMain">
    <img name="DefaultImage" SRC="RWDie1.bmp" HEIGHT=375 WIDTH=525 />
    <br />
    <img name="img2" SRC="RWDie2.bmp" HEIGHT=110 WIDTH=160 onMouseOver="document.DefaultImage.src='RWDie2.bmp'" />
    <img name="img3" SRC="RWDie3.bmp" HEIGHT=110 WIDTH=160 onMouseOver="document.DefaultImage.src='RWDie3.bmp'" />
    <img name="img4" SRC="RWDie4.bmp" HEIGHT=110 WIDTH=160 onMouseOver="document.DefaultImage.src='RWDie4.bmp'" />
    <img name="img5" SRC="RWDie5.bmp" HEIGHT=110 WIDTH=160 onMouseOver="document.DefaultImage.src='RWDie5.bmp'" />
    
    
    </form>
    
    </body>
    </html>

  • #5
    New Coder
    Join Date
    Feb 2010
    Posts
    95
    Thanks
    14
    Thanked 0 Times in 0 Posts
    If you want to change the default image to the image you hover on, you can do the following:

    1. Use id instead of name on elements
    2. Use document.getElementById in javascript

    Code:
    <script type = "text/javascript">
        function ChangeDefault(src)
        {
            var img = document.getElementById("DefaultImage");
            img.src = src;
        }
    </script>
    
    <body>
        <input type="image" id="DefaultImage" SRC="Default.png" HEIGHT=110 WIDTH=160 />
        <br />
        <input type="image" id="img2" SRC="img2.png" HEIGHT=110 WIDTH=160 onMouseOver="ChangeDefault(src)" />
        <input type="image" id="img3" SRC="img3.png" HEIGHT=110 WIDTH=160 onMouseOver="ChangeDefault(src)" />
    </body>
    I hope this helped!

    //Earni (www.arneneren.se)
    Last edited by earni23; 09-07-2010 at 09:03 PM.


  •  

    Posting Permissions

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