PDA

View Full Version : Help with image please



tracy02
03-01-2009, 09:52 PM
I have a program that when the user opens the page there's an image with no change called "peace.jpg" . I want the user to click the button and a prompt comes up asking the user thier name, next it asks if they like my site.If the user answers "yes" i want the single web page to change the opening peace image to a "smileyface.jpg" when the mouse rolls over the "smileyface.jpg" i want it to change to a "lightupsmiley.jpg" and then back to the smiley face once the mouse rolls out. I cannot figure out how to put this in my code for it shows after the "yes" prompt. Here's what I have and its nowhere near close. I know I have to put the images in variables and call them like this:var myimage = document.getElementById("myimage"); but im lost from there.
<html>
<head>

<script language="JavaScript" type="text/javascript">




function buttonClick()
{

var myName = prompt("What is your first name");

var myPage = prompt("Do you like my webpage?");
if (myPage=='Yes'){
document.write("Thank You".fontsize(4));
document.write("<br>");
document.body.style.backgroundcolor="red";
}
else if (myPage=='No'){
document.write ("Fine then".fontsize(4)+ myName.fontsize(4));
document.bgColor="orange";
}
}
function mouseOver()
{
document.images["myImage"].src="smiley.jpg";
}
function mouseOut()
{
document.images["myImage"].src="lightsmiley.jpg";
}
</script>
</head>

<input type="hidden" id="hiddenInput" runat="server" value="">
<body id="mybody">
<img src="birthdayov.jpg"
name="myImage"
onmouseover="mouseOver()"
onmouseout="mouseOut()">


<img id="myimage" src="peacesign.jpg"
onmouseover="swapImageOver();"
onmouseout="swapImageOut();">
<p id="saying">Welcome?</p>
<br><br>
<button onclick="buttonClick()">CLICK</button>
</body>
</html>