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 9 of 9
  1. #1
    New Coder
    Join Date
    Feb 2007
    Posts
    94
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Image Swap in JS

    Greetings,

    Hi all! I would like to request any hints if there is any way that I can use OnMouseOver effect in Javascript Script that can swap the image in another html row rather than the same row? Many thanks !




    Best regards


    New Comer

  • #2
    Regular Coder
    Join Date
    May 2004
    Location
    Alabama, USA
    Posts
    237
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Anything is possible

    Show us the relevant html and we can make suggestions.

  • #3
    New Coder
    Join Date
    Feb 2007
    Posts
    94
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks Mike and everyone,

    I have coded some javascript for this, but it only runs once; for OnMouseOver but not OnMouseOut. I have tried to code it some other ways but it is still the OnMouseOver works only! Hope you can make some suggestions on this. Many thanks!

    ==========================================================
    <html>
    <head>
    <title>dsp</title>
    </head>
    <body>

    <script>
    function chg(){
    document.write('<br>');
    document.write('<tr>');
    document.write('<td><img src=on.gif></td>');
    document.write('</tr>');
    document.write('<br>');
    }

    function first_write(){
    document.write('<br>');
    document.write('<tr>');
    document.write('<td><img src=off.gif></td>');
    document.write('</tr>');
    document.write('<br>');
    }

    window.onload = first_write();
    </script>

    <tr>
    <td><a href=test.htm onMouseover=chg() onMouseout=first_write()><img src=dsp.gif name=hob></a></td>
    </tr>
    </body>
    </html>
    ==========================================================

    Best regards


    New Comer

  • #4
    Regular Coder
    Join Date
    May 2004
    Location
    Alabama, USA
    Posts
    237
    Thanks
    0
    Thanked 0 Times in 0 Posts
    You can't use 'document.write' after the page is already loaded.

    Please describe exactly what you want to do. Are you inserting and removing TRs? Or just changing the src of an img?

    There are many threads here on mouseover image replacement.

  • #5
    New Coder
    Join Date
    Feb 2007
    Posts
    94
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hi Mike, thanks for your reply,

    I am not going to remove/insert TR but just making image swap. However, I cannot find any suitable tool to achieve this and hope I didn't request to much. I hope that I can as follows:

    1. Display the image (DSP) and image (OFF) on different rows/pages during the page was first loaded.

    2. When OnMouseOver for image (DSP) the image (OFF) will be swapped with image (ON) .

    3. When OnMouseOut for image (DSP) the image (OFF) will be swapped back again.

    Instead of using functions, will there be any way/tool to make this work or do I need to change the structure to some other way?


    The page will be as follows:

    ==========================================================
    <html>
    <head>
    <title>Index</title>
    </head>
    <body>
    <center><table>
    <tr>
    <td align=center><img src=off.gif <!--(this will be changed to on.gif if mouse is over on image (dsp)-->></td>
    </tr>
    <tr>
    <td></td>
    </tr>
    <!-- some more rows here-->
    <tr>
    <td align=center><a href="test.htm" onMouseover="function or other means to swap off.gif to on.gif" onMouseout="function or other means to swap on.gif back to off.gif"><img src="dsp.gif"></a></td>
    </tr>
    </table>
    </center>
    </body>
    </html>
    ==========================================================

    Best regards


    New Comer

  • #6
    Regular Coder
    Join Date
    May 2004
    Location
    Alabama, USA
    Posts
    237
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Code:
    <table>
    <tr>
    <td><img id='imgSwap' src='off.gif'></td> 
    </tr>
    <tr>
    <td></td>
    </tr>
    <tr>
    <td>
    <a href='test.htm' onmouseover="document.getElementById('imgSwap').src='on.gif'"
    onmouseout="document.getElementById('imgSwap').src='off.gif'"><img src="dsp.gif"></a>
    </td>
    </tr>
    </table>

  • #7
    New Coder
    Join Date
    Feb 2007
    Posts
    94
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Many thanks Mike ...!

  • #8
    Regular Coder
    Join Date
    Mar 2006
    Posts
    187
    Thanks
    5
    Thanked 0 Times in 0 Posts
    of course you can jazz it up by preloading the images ;-)


    Code:
    <head>
    <script language="javascript">
    offIMG = new Image();
    offIMG.src = "off.gif";
    
    onIMG = new Image();
    onIMG.src = "on.gif";
    </script>
    </head>
    and then change

    Code:
    <a href='test.htm' onmouseover="document.getElementById('imgSwap').src='on.gif'"
    onmouseout="document.getElementById('imgSwap').src='off.gif'"><img src="dsp.gif"></a>
    to

    Code:
    <a href='test.htm' onmouseover="document.getElementById('imgSwap').src=onIMG.src"
    onmouseout="document.getElementById('imgSwap').src=offIMG.src"><img src="dsp.gif"></a>

  • #9
    New Coder
    Join Date
    Feb 2007
    Posts
    94
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Many thanks Phill as well as everyone of you!


  •  

    Posting Permissions

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