944,189 Members | Top Members by Rank

Web Development > JavaScript / DHTML / AJAX > Basic hover code question
Ad:
Permalink
Jun 3rd, 2005
0

Basic hover code question

Expand Post »
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>
Similar Threads
Reputation Points: 10
Solved Threads: 0
Newbie Poster
willsteele is offline Offline
6 posts
since May 2005
Permalink
Jun 7th, 2005
0

Re: Basic hover code question

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?
Team Colleague
Reputation Points: 227
Solved Threads: 37
Made Her Cry
tgreer is offline Offline
1,697 posts
since Dec 2004
Permalink
Jun 7th, 2005
0

Re: Basic hover code question

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.
Reputation Points: 10
Solved Threads: 0
Newbie Poster
willsteele is offline Offline
6 posts
since May 2005
Permalink
Jun 8th, 2005
0

Re: Basic hover code question

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>
Team Colleague
Reputation Points: 227
Solved Threads: 37
Made Her Cry
tgreer is offline Offline
1,697 posts
since Dec 2004

This thread is more than three months old

No one has posted to this discussion for at least three months. Please let old threads die and do not reply to them unless you feel you have something new and valuable to contribute that absolutely must be added to make the discussion complete. Otherwise, please start a new thread in this forum instead.
Message:
Previous Thread in JavaScript / DHTML / AJAX Forum Timeline: Javascript Problem with Firefox
Next Thread in JavaScript / DHTML / AJAX Forum Timeline: Seeking help on js popup repositioning behaviour





About Us | Contact Us | Advertise | Acceptable Use Policy
Forum Index | Build Custom RSS Feed


Follow us on Twitter


© 2011 DaniWeb® LLC