By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
459,928 Members | 1,590 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 459,928 IT Pros & Developers. It's quick & easy.

Trouble with mouseover

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

Expand|Select|Wrap|Line Numbers
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "">
  2. <html xmlns="">
  3.   <head>
  4.     <title></title>
  5.     <script type="text/javascript" src="core.js"></script>
  6.     <script type="text/javascript">
  7.        function showMonkey()
  8.        {
  10.        }
  11.     </script>
  12.     <style>
  13.       .hidden{display: none}
  14.     </style>
  15.   </head>
  16.   <body>
  17.   <h2>Adding Event Listeners</h2>
  18.   <div>
  19.     <h2 style="margin-right:300px">Mouse Here To See Monkey</h2>
  20.     <img src="monkey.jpg" id="monkey" class="hidden" />
  21.   </div>
  22.   <script type="text/javascript">
  24. var image = document.getElementById('monkey');
  26.     if(document.attachEvent){
  27.         image.attachEvent('mouseover',showMonkey);
  28.     }
  29.     else if(document.removeEventListener) {
  30.         image.addEventListener('mouseover',showMonkey,false);
  31.     }
  33.  var class = Core.getElementsByClass('hidden');
  34. Core.removeClass(class[0],'hidden');
  37.   </script>
  38.   </body>
  39. </html>
If you have any questions please let me know..I have no idea what to add in the function.
Thanks in advance!
Nov 20 '09 #1
Share this Question
Share on Google+
13 Replies

Expert Mod 5K+
P: 8,639
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?
Nov 20 '09 #2

P: 7
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
Nov 20 '09 #3

Expert Mod 5K+
P: 8,639
find out, how you make it invisible (resp. what causes it to be invisible) and then do the opposite.

there are more ways to get an Element than itís ID. check out the DOM for it.
Nov 21 '09 #4

Expert Mod 15k+
P: 16,027
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.
Nov 21 '09 #5

P: 7
I can't change the code...that would be too easy :)..part of the assignment.
I tried this but got nothing:
var heading = document.getElementByTagName('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?

Nov 21 '09 #6

Expert Mod 5K+
P: 8,639
of course not, the function is called getElementsByTagName()

not necessarily (depends on what you want to do/test)
Nov 21 '09 #7

P: 7
ah of course....getElementsByTagName()
what I want the function to do is show the image when the second h2 heading is rolled over.
Nov 21 '09 #8

Expert Mod 5K+
P: 8,639
I donít see a problem there.
Nov 21 '09 #9

P: 7
well, when I put this code in the function:

document.images['monkey.jpg'].style.visibility = 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
Nov 21 '09 #10

Expert Mod 5K+
P: 8,639
then ask yourself, how you hide an element.
Nov 21 '09 #11

P: 7
It is already hidden:
.hidden{display: none}

that is why I am thinking I need an if statement in the function
Nov 21 '09 #12

Expert Mod 5K+
P: 8,639
your problem is, that youíre mixing up display and visibility.
Nov 21 '09 #13

P: 7
Figured it out!!!

Oh man I have a lot to learn...

Thanks for all the help
Nov 21 '09 #14

Post your reply

Sign in to post your reply or Sign up for a free account.