...

View Full Version : Making onMouseOut conditional on onClick?



bllgb
03-12-2005, 10:12 PM
I've created working code of what I want to do in a basic way. Now I want to enhance it but I'm stuck. I've looked in my books and searched online but I'm not even sure how to phrase the question. PS. I'm new at this, be kind.

What I want to do is display a button, which when clicked will display an animated gif. Then, and only if the image was clicked, display a checkmark where the original image was. So far, the code displays the button image and displays the animated gif, but it always displays the checkmark even if the click was not done. How do I make the onMouseOut conditional on the onClick? Is there a simple solution? thanks


<DIV onClick="document.picA2.src='graphics/homerjumping.gif'"
onMouseOut="document.picA2.src='graphics/checkmark5s.jpg'">
<img src="graphics/bk_04s.gif" border=0 name="picA2"> </DIV>

vwphillips
03-13-2005, 08:55 AM
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>
<title></title>
</head>

<body>
<DIV >
<img src="http://www.vicsjavascripts.org.uk/StdImages/Cross1.gif" border=0 name="picA2"
onClick="javascript:this.src='http://www.vicsjavascripts.org.uk/StdImages/One.gif'"
onMouseOut="javascript:this.src='http://www.vicsjavascripts.org.uk/StdImages/Tick1.gif'"
> </DIV>
</body>

</html>

Mr J
03-13-2005, 11:27 AM
Give the following a try



<script type="text/javascript">
<!--

isclicked=0
function chk_me(){
document.picA2.src='graphics/homerjumping.gif'
isclicked=1
}

function m_out(){
if(isclicked==1){
document.picA2.src='graphics/checkmark5s.jpg'
}
isclicked=0
}

//-->
</script>

<img src="graphics/bk_04s.gif" border=0 name="picA2" onclick="chk_me()" onmouseout="m_out()">

bllgb
03-13-2005, 04:41 PM
To vwphillips. I tried your example and i ended up with the same result as I had. I was hoping your solution would work because it looked simple.

To Mr J. Your solution worked. If you don't mind I'd like you to check my understanding of your solution. The script area set up 2 functions: chk_me which sets the image source to homerjumping.gif and sets the isclicked variable to 1; the second function is m_out which runs if the isclicked variable is 1 and it sets the image source to checkmark5s and then resets the isclicked variable to 0. The img source statement initially displayes the button (bk_04s.gif) and states the functions to run with the onclick and onmouseout events.

Thanks to all for your help. Now I need to go back to my original and start customizing.

-Bill

Mr J
03-13-2005, 06:56 PM
vwphillips post was not a solution to your question he/she was showing you that putting the mouse events inside the div tag was not necessary as they could go in the img tag.

To that extent the div tag may not be needed at all.

As for your understanding of the script, I reckon you got it :thumbsup:

The question is, "is it going to be used with just that one img tag" ?

bllgb
03-13-2005, 07:56 PM
Actually, this is going to be part of a pseudo test. There will be 26 questions each with 3 answers. The buttons for the 2 incorrect answers will pop "try again". The correct answer will display an animation when clicked. Then the animation will change to a checkmark when the mouse is moved to the next question. Mr J's solution solved the problem of displaying the checkmark only when the button had previously been clicked.

The goal is not to test learning but to get folks to read the information and reward them if the pick the right answer. So, I've got a lot of cutting/pasting/renaming to do to get this finished. Thanks again for everyone's help. -Bill

Mr J
03-13-2005, 11:13 PM
When you click the correct answer an animation is shown, onmouseout a tick is shown.

I know you said "try again" will pop for an incorrect answer but what shows when you click a wrong answer and what happens onmouseout?

Also how is the script going to determine which answer is correct?

I will be able to adjust the script I posted to help you further

bllgb
03-14-2005, 12:38 AM
The code for the incorrect answer isn't shown but what it does is start displaying the select button. When it is clicked a gif that shows "try again" is displayed, then when you mouseout it returns to the select button.

This isn't a real test. It's more of an exercise that will pair the correct answer with an animated display. I hope they will then actually read the correct answer. There's no guarantee that they will...maybe I should make the text flash too. Here's the code that, with your help, now works:

<!-- this is question A's answer area #2...the correct answer -->
<TR valign=top>
<TD width=30><FONT size=2 color="#000000" face="Arial">
<script type="text/javascript">
isclickedA=0
function chk_meA(){
document.picA2.src='graphics/homerjumping.gif'
isclickedA=1}
function m_outA(){
if(isclickedA==1){
document.picA2.src='graphics/checkmark5s.jpg'
}isclickedA=0}
</script>
<img src="graphics/bk_04s.gif" border=0 name="picA2"
onclick="chk_meA()" onmouseout="m_outA()">
<TD width=936><FONT size=2 color="#000000" face="Arial">
<!-- Insert the text of the correct answer -->
<DIV>&nbsp;Text of the correct answer goes here</DIV>
</FONT>
</TD>
</TR>

Just FYI here's the code for the incorrect answer:

<!-- this is question A's answer area --incorrect selection-->
<TR valign=top>
<TD width=30><FONT size=2 color="#000000" face="Arial">
<!--Sel#1 Displays gif when clicked, then redisplays original when mouseout -->
<DIV
onClick="document.picA1.src='graphics/TryAgain.gif'"
onMouseOut="document.picA1.src='graphics/bk_04s.gif'">
<img src="graphics/bk_04s.gif" border=0 name="picA1">
</DIV>
</FONT>
</TD>
<TD width=936><FONT size=2 color="#000000" face="Arial">
<!-- Insert the text of answer #1 -->
<DIV>&nbsp;incorrect answer 1</DIV>
</FONT>
</TD>
</TR>

Mr J
03-14-2005, 02:16 PM
From what you have posted I am assuming that you are going to use the script for each question, a total of 26 scripts.

If I have assumed wrong then I appologise but just in case I am right the same script can be used by all the questions.

The correct answer is passed to the function, 1 = correct, 0 = wrong

onclick="chk_me(this.id,1)"

onclick="chk_me(this.id,0)"

Try the following example


<script type="text/javascript">
<!--

images=new Array("graphics/homerjumping.gif","graphics/checkmark5s.jpg","graphics/try_again.gif","graphics/bk_04s.gif")

isclicked=0
correct=0
function chk_me(id,num){
if(num==1){
document.getElementById(id).src=images[0]
correct=1
}
else{
document.getElementById(id).src=images[2]
}
isclicked=1
}

function m_out(id){
if(isclicked==1){
if(correct==1){
document.getElementById(id).src=images[1]
}
else{
document.getElementById(id).src=images[3]
}

}
isclicked=0
correct=0
}

//-->
</script>

<P>Question One<BR>
Answer 1 <img src="graphics/bk_04s.gif" border=0 id="picA1" onclick="chk_me(this.id,1)" onmouseout="m_out(this.id)"><BR>
Answer 2 <img src="graphics/bk_04s.gif" border=0 id="picA2" onclick="chk_me(this.id,0)" onmouseout="m_out(this.id)"><BR>
Answer 3 <img src="graphics/bk_04s.gif" border=0 id="picA3" onclick="chk_me(this.id,0)" onmouseout="m_out(this.id)"><BR>

<P>Question Two<br>
Answer 1 <img src="graphics/bk_04s.gif" border=0 id="picB2" onclick="chk_me(this.id,0)" onmouseout="m_out(this.id)"><BR>
Answer 2 <img src="graphics/bk_04s.gif" border=0 id="picB3" onclick="chk_me(this.id,1)" onmouseout="m_out(this.id)"><BR>
Answer 3 <img src="graphics/bk_04s.gif" border=0 id="picB1" onclick="chk_me(this.id,0)" onmouseout="m_out(this.id)"><BR>

<P>Question Three<br>
Answer 1 <img src="graphics/bk_04s.gif" border=0 id="picC2" onclick="chk_me(this.id,0)" onmouseout="m_out(this.id)"><BR>
Answer 2 <img src="graphics/bk_04s.gif" border=0 id="picC1" onclick="chk_me(this.id,0)" onmouseout="m_out(this.id)"><BR>
Answer 3 <img src="graphics/bk_04s.gif" border=0 id="picC3" onclick="chk_me(this.id,1)" onmouseout="m_out(this.id)"><BR>

bllgb
03-14-2005, 11:48 PM
Your suggestion sure looks a lot cleaner than the 26 copies I made of the script. I'll try it next time. Thanks a lot. - Bill



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum