•
•
•
•
What is DaniWeb IT Discussion Community?
You're currently browsing the JavaScript / DHTML / AJAX section within the Web Development category of DaniWeb, a massive community of 375,245 software developers, web developers, Internet marketers, and tech gurus who are all enthusiastic about making contacts, networking, and learning from each other. In fact, there are 2,168 IT professionals currently interacting right now! Registration is free, only takes a minute and lets you enjoy all of the interactive features of the site.
Please support our JavaScript / DHTML / AJAX advertiser: Lunarpages Web Hosting
Views: 10270 | Replies: 3
 |
•
•
Join Date: May 2005
Posts: 6
Reputation: 
Rep Power: 0
Solved Threads: 0
Newbie Poster
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: Dec 2004
Posts: 1,589
Reputation:
Rep Power: 7
Solved Threads: 34
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?
What's wrong with a standard hyperlink?
•
•
Join Date: May 2005
Posts: 6
Reputation:
Rep Power: 0
Solved Threads: 0
Newbie Poster
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,589
Reputation:
Rep Power: 7
Solved Threads: 34
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:
<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>
|
•
•
•
•
Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)
•
•
•
•
•
•
•
•
DaniWeb JavaScript / DHTML / AJAX Marketplace
Linear Mode
•
•
•
•
access activation ajax api asp blogger blogging blogs code combo dani daniweb data debugging developer development dreamweaver dropdownlist firefox gdata google gpl home html innovation internet javascript key linux microsoft module msdn net news office openbsd product programming reuse rss serial site software source sql tags vista web wysiwyg xml
- 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
