DaniWeb IT Discussion Community - Basic hover code question

DaniWeb IT Discussion Community (http://www.daniweb.com/forums/)

- JavaScript / DHTML / AJAX (http://www.daniweb.com/forums/forum117.html)

- - Basic hover code question (http://www.daniweb.com/forums/thread24944.html)

willsteele

Jun 3rd, 2005 7:49 pm

Basic hover code question

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">

</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>

tgreer

Jun 7th, 2005 9:02 am

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?

willsteele

Jun 7th, 2005 8:41 pm

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.

tgreer

Jun 8th, 2005 3:21 pm

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:

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

All times are GMT -4. The time now is 8:32 am.