Member Avatar for willsteele

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>
Edited by happygeek because: fixed formatting
  • 2 Contributors
  • 3 Replies
  • 188 Views
  • 5 Days Discussion Span
  • Latest Post Latest Post by tgreer
Member Avatar for 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?

Member Avatar for willsteele

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.

Member Avatar for tgreer

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:

<html>
<head>
<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;
}

a:hover
{
  background: #eeeeee;
}

a:active
{
  border-bottom: 1px solid #eeeeee;
  border-top: 1px solid black;
  border-right: 1px solid #eeeeee;
  border-left: 1px solid black;
}
</style>
</head>
<body>
<a href="#">Button 1</a><a href="#">Button 2</a><a href="#">Button 3</a>
</body>
</html>
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.