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 language="JavaScript1.2" fptype="dynamicanimation" src="file:///C:/Program%20Files/Microsoft%20Office/Office10/fpclass/animate.js">

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>

Edited by happygeek: fixed formatting

11 Years
Discussion Span
Last Post by tgreer

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?


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.


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:

<style type="text/css">
a:link, a:visited
  float: left;
  margin: 2px 5px 2px 5px;
  padding: 2px;
  width: 100px;
  border-top: 1px solid #cccccc;
  border-bottom: 1px solid black;
  border-left: 1px solid #cccccc;
  border-right: 1px solid black;
  background: #cccccc;
  text-align: center;
  text-decoration: none;
  font: normal 10px Verdana;
  color: black;

  background: #eeeeee;

  border-bottom: 1px solid #eeeeee;
  border-top: 1px solid black;
  border-right: 1px solid #eeeeee;
  border-left: 1px solid black;
<a href="#">Button 1</a><a href="#">Button 2</a><a href="#">Button 3</a>
This article has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.