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
  1. #1
    New Coder
    Join Date
    Jul 2010
    Posts
    16
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Image change on mouseover (code faulty).

    Hi this is my first thread here and I am a beginner programmer Java/HTML/CSS only. I used google to add an interactive feature to my website that some people may be familiar with. I wanted to make an image that changes into another image when you mouse over it. Maybe there is a problem with how I integrated it into the rest of my webpage code. I am using angelfire to build my website and am a little disappointed that they don't have their own forum but this one looks really good. Following is my code that can be examined and possibly corrected.

    Code:
    <html>
    <head>
    <style type="text/css">
    
    body {background-color:gold;}
    table
    {
    width:70%;
    }
    th
    {
    height:100px;
    }
    </style>
    <script language="JavaScript">
    <!-- Hide the script from old browsers --
    
    img0_on = new Image(400,400);
    img0_on.src="images/the-power-of-the-cross.JPG";
    img0_off = new Image(400,400);
    img0_off.src="images/006.JPG";
    
    function over_image(parm_name)
         {
            document[parm_name].src = eval(parm_name + "_on.src");
         }
    function off_image(parm_name)
         {
            document[parm_name].src = eval(parm_name + "_off.src");
         }
    // --End Hiding Here -->
    </script>
    <TITLE>Welcome to the Christ Alive Community Church Website</TITLE>
    </head>
    <body>
    <a href="http://www.angelfire.com/caccweb/index2.html" onmouseover="over_image('img0');" onmouseout="off_image('img0')"> <img src="images/006.JPG" border="0" name="img0"> </a> 
    <TABLE>
    <TR>
    <TD>
    <img src="images/006.JPG" WIDTH="400" HEIGHT="400">
    </TD>
    <TD>
    <img src="images/043.JPG" WIDTH="400" HEIGHT="400">
    </TD>
    </TR>
    </TABLE>
    </body>
    
    </html>

  • #2
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,502
    Thanks
    3
    Thanked 500 Times in 487 Posts
    Code:
    <html>
    <head>
    <style type="text/css">
    
    body {background-color:gold;}
    table
    {
    width:70%;
    }
    th
    {
    height:100px;
    }
    </style>
    <script language="JavaScript">
    <!-- Hide the script from old browsers --
    
    var img0_on = new Image(400,400);
    img0_on.src="http://www.vicsjavascripts.org.uk/StdImages/One.gif";
    var img0_off = new Image(400,400);
    img0_off.src="http://www.vicsjavascripts.org.uk/StdImages/Two.gif";
    
    function swap_image(parm_name,over) {
     document[parm_name].src = window[parm_name + (over?"_on":"_off")].src;
    }
    // --End Hiding Here -->
    </script>
    <TITLE>Welcome to the Christ Alive Community Church Website</TITLE>
    </head>
    <body>
    <a href="http://www.angelfire.com/caccweb/index2.html" onmouseover="swap_image('img0',true);" onmouseout="swaP_image('img0')">
     <img src="http://www.vicsjavascripts.org.uk/StdImages/Two.gif" border="0" name="img0" width="400" height="400">
     </a>
    <TABLE>
    <TR>
    <TD>
    <img src="images/006.JPG" WIDTH="400" HEIGHT="400">
    </TD>
    <TD>
    <img src="images/043.JPG" WIDTH="400" HEIGHT="400">
    </TD>
    </TR>
    </TABLE>
    </body>
    
    </html>
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/

  • #3
    New Coder
    Join Date
    Jul 2010
    Posts
    16
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Thank you the code works great.

  • #4
    New Coder
    Join Date
    Jul 2010
    Posts
    16
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Ok, I think I messed up the code again, I want to get an image to change on mouseover only this time I changed the images. Here's the code:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>Our Blog</title>
    </head>
    <style type="text/css">
    
    body {background-color:gold;}
    table
    {
    width:80%;
    }
    th
    {
    height:100%;
    }
    </style>
    <script language="JavaScript">
    <!-- Hide the script from old browsers --
    
    var img0_on = new Image(400,400);
    img0_on.src="img src="http://www.christ-alive-community-church.com/images/SynaxisAngels.jpg";
    var img0_off = new Image(400,400);
    img0_off.src="http://www.christ-alive-community-church.com/images/throne-of-grace.jpg";
    
    function swap_image(parm_name,over) {
     document[parm_name].src = window[parm_name + (over?"_on":"_off")].src;
    }
    // --End Hiding Here -->
    </script>
    <TITLE>Welcome to the Christ Alive Community Church Website</TITLE>
    </head>
    <body>
    <a href="http://www.christ-alive-community-church.com" onmouseover="swap_image('img0',true);" onmouseout="swaP_image('img0')">
     <img src="http://www.christ-alive-community-church.com/images/SynaxisAngels.jpg" border="0" name="img0" width="400" height="400">
     </a>
    Why does it display the SynaxisAngels.jpg image and it won't change on mouseover? I can link back to my homepage but I want the image to swap
    to the throne-of-grace.jpg image.
    Thank you.
    Last edited by Codenoob2; 07-31-2010 at 09:12 AM.

  • #5
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,502
    Thanks
    3
    Thanked 500 Times in 487 Posts
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>Our Blog</title>
    </head>
    <style type="text/css">
    
    body {background-color:gold;}
    table
    {
    width:80%;
    }
    th
    {
    height:100%;
    }
    </style>
    <script language="JavaScript">
    <!-- Hide the script from old browsers --
    
    var img0_on = new Image(400,400);
    img0_on.src="http://www.christ-alive-community-church.com/images/SynaxisAngels.jpg";
    var img0_off = new Image(400,400);
    img0_off.src="http://www.christ-alive-community-church.com/images/throne-of-grace.jpg";
    
    function swap_image(parm_name,over) {
     document[parm_name].src = window[parm_name + (over?"_on":"_off")].src;
    }
    // --End Hiding Here -->
    </script>
    <TITLE>Welcome to the Christ Alive Community Church Website</TITLE>
    </head>
    <body>
    <a href="http://www.christ-alive-community-church.com" onmouseover="swap_image('img0',true);" onmouseout="swap_image('img0')">
     <img src="http://www.christ-alive-community-church.com/images/SynaxisAngels.jpg" border="0" name="img0" width="400" height="400">
     </a>
     </body>
     </html>
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/


  •  

    Posting Permissions

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