Trouble with mouseover

Collapse
X
 
  • Time
  • Show
Clear All
new posts
  • heapster123
    New Member
    • Nov 2009
    • 7

    Trouble with mouseover

    I am new to javascript and having a hard time. I have a class assignment that I have been working on for days...what has to happen is when the mouse rolls over the text an image is to appear. The code I have so far is as follows:

    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></title>
        <script type="text/javascript" src="core.js"></script>
    	<script type="text/javascript">
           function showMonkey()
    	   {
    
    	   }
        </script>
    	<style>
    	  .hidden{display: none}
    	</style>
      </head>
      <body>
      <h2>Adding Event Listeners</h2>
      <div>
        <h2 style="margin-right:300px">Mouse Here To See Monkey</h2>
        <img src="monkey.jpg" id="monkey" class="hidden" />
      </div>
      <script type="text/javascript">
    	
    var image = document.getElementById('monkey');
      
    	if(document.attachEvent){
    		image.attachEvent('mouseover',showMonkey);
    	}
    	else if(document.removeEventListener) {
    		image.addEventListener('mouseover',showMonkey,false);
    	}
    
     var class = Core.getElementsByClass('hidden');
    Core.removeClass(class[0],'hidden');
    
    	
      </script>
      </body>
    </html>
    If you have any questions please let me know..I have no idea what to add in the function.
    Thanks in advance!
    Last edited by Dormilich; Nov 20 '09, 09:26 PM. Reason: Please use [code] tags when posting code
  • Dormilich
    Recognized Expert Expert
    • Aug 2008
    • 8694

    #2
    Originally posted by heapster123
    I have no idea what to add in the function.
    well, obviously you have to make the image visible.

    (enough hints for now)

    btw. shouldn’t you mouse over the heading? or putting it that way: how to mouse over something that’s not there?

    Comment

    • heapster123
      New Member
      • Nov 2009
      • 7

      #3
      Yes, I know I have to make it visible but HOW..what is the code?? I have searched and I am pulling my hair out!!
      and another yes I want to mouse over the text but how do I use it if it has no ID...
      don't be a tease....LOL

      Comment

      • Dormilich
        Recognized Expert Expert
        • Aug 2008
        • 8694

        #4
        Originally posted by heapster123
        Yes, I know I have to make it visible but HOW
        find out, how you make it invisible (resp. what causes it to be invisible) and then do the opposite.

        Originally posted by heapster123
        I want to mouse over the text but how do I use it if it has no ID...
        there are more ways to get an Element than it’s ID. check out the DOM for it.

        Comment

        • acoder
          Recognized Expert MVP
          • Nov 2006
          • 16032

          #5
          Why not give it an ID?

          Also, you have the code to show, but it's in the wrong place - it needs to be in the function.

          Comment

          • heapster123
            New Member
            • Nov 2009
            • 7

            #6
            I can't change the code...that would be too easy :)..part of the assignment.
            I tried this but got nothing:
            var heading = document.getEle mentByTagName(' h2').item(1);

            Also if I move the if..if else to the function..I get nothing.

            Do I need an "if" statement in the function to make the image visible on mouseover?

            Thanks

            Comment

            • Dormilich
              Recognized Expert Expert
              • Aug 2008
              • 8694

              #7
              Originally posted by heapster123
              I tried this but got nothing:
              var heading = document.getEle mentByTagName(' h2').item(1);
              of course not, the function is called getElementsByTagName()

              Originally posted by heapster123
              Do I need an "if" statement in the function to make the image visible on mouseover?
              not necessarily (depends on what you want to do/test)

              Comment

              • heapster123
                New Member
                • Nov 2009
                • 7

                #8
                ah of course....getEl ementsByTagName ()
                what I want the function to do is show the image when the second h2 heading is rolled over.

                Comment

                • Dormilich
                  Recognized Expert Expert
                  • Aug 2008
                  • 8694

                  #9
                  Originally posted by heapster123
                  what I want the function to do is show the image when the second h2 heading is rolled over.
                  I don’t see a problem there.

                  Comment

                  • heapster123
                    New Member
                    • Nov 2009
                    • 7

                    #10
                    well, when I put this code in the function:

                    document.images['monkey.jpg'].style.visibili ty = visible;

                    the "monkey" is there. I need it to remain hidden until the heading is rolled over

                    You will be happy to hear I have ordered a beginners book from Amazon LOL

                    Comment

                    • Dormilich
                      Recognized Expert Expert
                      • Aug 2008
                      • 8694

                      #11
                      Originally posted by heapster123
                      I need it to remain hidden until the heading is rolled over
                      then ask yourself, how you hide an element.

                      Comment

                      • heapster123
                        New Member
                        • Nov 2009
                        • 7

                        #12
                        It is already hidden:
                        <style>
                        .hidden{display : none}
                        </style>

                        that is why I am thinking I need an if statement in the function

                        Comment

                        • Dormilich
                          Recognized Expert Expert
                          • Aug 2008
                          • 8694

                          #13
                          your problem is, that you’re mixing up display and visibility.

                          Comment

                          • heapster123
                            New Member
                            • Nov 2009
                            • 7

                            #14
                            Figured it out!!!

                            Oh man I have a lot to learn...

                            Thanks for all the help

                            Comment

                            Working...