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" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3.   <head>
  4.     <title></title>
  5.     <script type="text/javascript" src="core.js"></script>
  6.     <script type="text/javascript">
  7.        function showMonkey()
  8.        {
  9.  
  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">
  23.  
  24. var image = document.getElementById('monkey');
  25.  
  26.     if(document.attachEvent){
  27.         image.attachEvent('mouseover',showMonkey);
  28.     }
  29.     else if(document.removeEventListener) {
  30.         image.addEventListener('mouseover',showMonkey,false);
  31.     }
  32.  
  33.  var class = Core.getElementsByClass('hidden');
  34. Core.removeClass(class[0],'hidden');
  35.  
  36.  
  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


Dormilich
Expert Mod 5K+
P: 8,639
@heapster123
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

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

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

acoder
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?

Thanks
Nov 21 '09 #6

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

@heapster123
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

Dormilich
Expert Mod 5K+
P: 8,639
@heapster123
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

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

P: 7
It is already hidden:
<style>
.hidden{display: none}
</style>

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

Dormilich
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.