Basic hover code question

Please support our JavaScript / DHTML / AJAX advertiser: PostgreSQL or MySQL? Compare and contrast the two most popular open source databases
Reply

Join Date: May 2005
Posts: 6
Reputation: willsteele is an unknown quantity at this point 
Solved Threads: 0
willsteele willsteele is offline Offline
Newbie Poster

Basic hover code question

 
0
  #1
Jun 3rd, 2005
I'm trying to create a hover box that appears over an entire table cell when onmouseover. I want to know if there is a way to have it go to another URL with onClick. If so, does it have to be done in the p tag or elsewhere.

Here's the snippet from the head:

<script language="JavaScript" fptype="dynamicanimation">
<!--
function dynAnimation() {}
function clickSwapImg() {}
//-->
</script>
<script language="JavaScript1.2" fptype="dynamicanimation" src="file:///C:/Program%20Files/Microsoft%20Office/Office10/fpclass/animate.js">
</script>

And the body code:

<p align="center" onmouseover="rollIn(this)" onmouseout="rollOut(this)" dynamicanimation="fpAnimformatRolloverFP1" fprolloverstyle="font-family: Verdana; color: #111111; text-transform: capitalize; border: 1px solid #666666; background-color: #C0C0C0" language="Javascript1.2">
<font color="#C0C0C0" size="2" face="Verdana, Arial, Helvetica, sans-serif"><strong>
Church</strong></font></p></td>
Reply With Quote Quick reply to this message  
Join Date: Dec 2004
Posts: 1,655
Reputation: tgreer is an unknown quantity at this point 
Solved Threads: 35
Team Colleague
tgreer tgreer is offline Offline
Made Her Cry

Re: Basic hover code question

 
0
  #2
Jun 7th, 2005
What is a "hover box"? When you say you "want it to go to another URL", what is the "it"?

What's wrong with a standard hyperlink?
Reply With Quote Quick reply to this message  
Join Date: May 2005
Posts: 6
Reputation: willsteele is an unknown quantity at this point 
Solved Threads: 0
willsteele willsteele is offline Offline
Newbie Poster

Re: Basic hover code question

 
0
  #3
Jun 7th, 2005
Go to microsoft. Place the cursor arrow over one of the main menu items. That's a hover box. I guess technically it looks like a table cell that enables onMouseOver.

The it is the box or cell. First, I want it to swap colors onmouseover, then, onclick, go to a url. It worked when I did it in frontpage and viewed it in IE, but in other browsers failed to function so I ended up getting rid of it in the page. On another note, I found out in a SEO class I'm taking that javascript is probably less helpful than I originally thought. Was just hoping for an SEO friendly way to do some interesting hyperlinking; nothing wrong with standard a href=... just liked the microsoft approach. It's clean but different.
Reply With Quote Quick reply to this message  
Join Date: Dec 2004
Posts: 1,655
Reputation: tgreer is an unknown quantity at this point 
Solved Threads: 35
Team Colleague
tgreer tgreer is offline Offline
Made Her Cry

Re: Basic hover code question

 
0
  #4
Jun 8th, 2005
First, you can enable a different color (and lots of other things), by using the :hover CSS psuedo tag. If you do so on a hyperlink, then you're all done: the CSS provides the hover effect, and the hyperlink takes care of clicking to a new URL. No Javascript required, I might note.

Example, this code makes anchor tags look like buttons:

JavaScript / DHTML / AJAX Syntax (Toggle Plain Text)
  1. <html>
  2. <head>
  3. <style type="text/css">
  4. a:link, a:visited
  5. {
  6. float: left;
  7. margin: 2px 5px 2px 5px;
  8. padding: 2px;
  9. width: 100px;
  10. border-top: 1px solid #cccccc;
  11. border-bottom: 1px solid black;
  12. border-left: 1px solid #cccccc;
  13. border-right: 1px solid black;
  14. background: #cccccc;
  15. text-align: center;
  16. text-decoration: none;
  17. font: normal 10px Verdana;
  18. color: black;
  19. }
  20.  
  21. a:hover
  22. {
  23. background: #eeeeee;
  24. }
  25.  
  26. a:active
  27. {
  28. border-bottom: 1px solid #eeeeee;
  29. border-top: 1px solid black;
  30. border-right: 1px solid #eeeeee;
  31. border-left: 1px solid black;
  32. }
  33. </style>
  34. </head>
  35. <body>
  36. <a href="#">Button 1</a><a href="#">Button 2</a><a href="#">Button 3</a>
  37. </body>
  38. </html>
Reply With Quote Quick reply to this message  
Reply

This thread is more than three months old.
Perhaps start a new thread instead?
Message:



Similar Threads
Other Threads in the JavaScript / DHTML / AJAX Forum
Thread Tools Search this Thread



About Us | Contact Us | Advertise | DaniWeb | Acceptable Use Policy | RSS Feed

©2003 - 2009 DaniWeb® LLC