| | |
Basic hover code question
Please support our JavaScript / DHTML / AJAX advertiser: PostgreSQL or MySQL? Compare and contrast the two most popular open source databases
![]() |
•
•
Join Date: May 2005
Posts: 6
Reputation:
Solved Threads: 0
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>
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>
•
•
Join Date: May 2005
Posts: 6
Reputation:
Solved Threads: 0
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.
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.
•
•
Join Date: Dec 2004
Posts: 1,655
Reputation:
Solved Threads: 35
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:
Example, this code makes anchor tags look like buttons:
JavaScript / DHTML / AJAX Syntax (Toggle Plain Text)
<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>
![]() |
Similar Threads
- Bad Code question (C++)
- windows code question? (Existing Scripts)
- basic file i/o (Java)
- C# Code Question (C#)
- hover over text tips (JavaScript / DHTML / AJAX)
- Encrypting a Visual Basic application (Visual Basic 4 / 5 / 6)
Other Threads in the JavaScript / DHTML / AJAX Forum
- Previous Thread: Instant Quote Form
- Next Thread: Seeking help on js popup repositioning behaviour
| Thread Tools | Search this Thread |
acid2 ajax ajaxexample ajaxjspservlets array browser bug captchaformproblem cart checkbox child class close codes createrange() css cursor date debugger decimal dependent design disablefirebug dom dropdown editor element embed engine enter error events explorer ext file firefox focus form forms frameworks getselection google gxt hiddenvalue highlightedword hint html ie7 ie8 iframe images index internet java javascript javascripthelp2020 jquery jsf jsfile jsp jump libcurl listbox maps masterpage math media menu mp4 object onmouseoutdivproblem onmouseover onreadystatechange parent paypal pdf php position post problem programming progressbar prototype redirect runtime safari scale scriptlets scroll search security shopping size software toggle unicode w3c web wysiwyg \n






