| | |
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 ajaxcode ajaxexample ajaxhelp ajaxjspservlets animate automatically beta box browser bug captchaformproblem checkbox close codes createrange() css cursor debugger decimal dependent disablefirebug dom download dropdown editor element engine enter error events explorer ext file form forms frameworks getselection google gwt gxt hiddenvalue highlightedword hint html htmlform ie7 ie8 iframe index internet java javascript javascripthelp2020 jawascriptruntimeerror jquery jsf jsfile jump listbox maps masterpage math media menu microsoft mp4 object onmouseoutdivproblem onreadystatechange paypal pdf php player position programming progressbar prototype redirect regex runtime safari scale scriptlets search security select size software sql text textarea unicode w3c window windowofwords windowsxp wysiwyg \n






