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 10 of 10
  1. #1
    New to the CF scene
    Join Date
    Mar 2005
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Making onMouseOut conditional on onClick?

    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>

  • #2
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,529
    Thanks
    3
    Thanked 511 Times in 498 Posts
    PHP Code:
    <!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

  • #3
    Senior Coder
    Join Date
    Aug 2002
    Location
    UK
    Posts
    2,789
    Thanks
    2
    Thanked 14 Times in 14 Posts
    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()">

    The silent one.

    The most dangerous thing in the world is an idea.
    The most dangerous person in the world is the one with an idea.

  • #4
    New to the CF scene
    Join Date
    Mar 2005
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Thanks for the help Mr J & vwphillips

    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

  • #5
    Senior Coder
    Join Date
    Aug 2002
    Location
    UK
    Posts
    2,789
    Thanks
    2
    Thanked 14 Times in 14 Posts
    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

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

    The most dangerous thing in the world is an idea.
    The most dangerous person in the world is the one with an idea.

  • #6
    New to the CF scene
    Join Date
    Mar 2005
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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

  • #7
    Senior Coder
    Join Date
    Aug 2002
    Location
    UK
    Posts
    2,789
    Thanks
    2
    Thanked 14 Times in 14 Posts
    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
    Last edited by Mr J; 03-14-2005 at 12:18 AM.
    The silent one.

    The most dangerous thing in the world is an idea.
    The most dangerous person in the world is the one with an idea.

  • #8
    New to the CF scene
    Join Date
    Mar 2005
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Reply to Mr J

    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>

  • #9
    Senior Coder
    Join Date
    Aug 2002
    Location
    UK
    Posts
    2,789
    Thanks
    2
    Thanked 14 Times in 14 Posts
    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>

    The silent one.

    The most dangerous thing in the world is an idea.
    The most dangerous person in the world is the one with an idea.

  • #10
    New to the CF scene
    Join Date
    Mar 2005
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    reply to Mr J

    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


  •  

    Posting Permissions

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