...

View Full Version : Image change on mouseover (code faulty).



Codenoob2
07-16-2010, 07:16 AM
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.



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

vwphillips
07-16-2010, 11:17 AM
<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>

Codenoob2
07-16-2010, 10:34 PM
Thank you the code works great.

Codenoob2
07-31-2010, 10:01 AM
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:


<!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.

vwphillips
07-31-2010, 10:43 AM
<!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>



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum