PDA

View Full Version : Adding hover/onMouseOver event

Jim7283
04-09-2007, 09:20 AM
Hi All,

I've been searching for a way to add both an onMouseOver/hover event and an anchor to a <div> tag. The goal here is to turn an entire block of content into an <a> with a visual cue to let the user know this.

Last week I posed this question in the HTML forum, and was told to simply use an <a> tag with display:block. Unfortunately this is not a browser-friendly solution (IE doesn't like this) and I find it to be logically incorrect - an <a> should not be a container - right?

So, it seems that the best solution will be to use some JavaScript to handle both the event and the link. From what I have read, I should be able to target and manipulate any element in the document under the DOM - but unfortunately I do not know JS at all! Can anyone assist in either directing me to a tutorial or some other resource on this topic? I must not be the only person who has ever wanted to achieve this... Thanks in advance!
BonRouge
04-09-2007, 10:00 AM
Is this good enough? <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Quick example</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style type="text/css">
* {
margin:0;
padding:0;
}
body {
background:#fff;
}
#box {
margin:3em;
border:1px solid red;
height:5em;
text-align:center;
cursor:pointer;
}
</style>
<script type="text/javascript">
function bigLink(box) {
var theBox=document.getElementById(box);
theBox.onclick=function() {window.location=theBox.getElementsByTagName('a')[0].href;}
}
window.onload=function() {bigLink('box');}
</script>
</head>
<body>
<div id="box">
<p><a href="http://bonrouge.com">bonrouge</a></p>
</div>
</body>
</html>
¥åßßå
04-09-2007, 10:13 AM
var theBox=document.getElementById('box');

A few extraneous characters? ;)

¥
BonRouge
04-09-2007, 10:15 AM
Well spotted. (*fixed*)
Jim7283
04-11-2007, 01:39 PM
Thank you Bon Rogue! Your example handles the first piece of what I would like to accomplish - turning the entire div into a link.

The second piece is to add an onmouseover event to that <div> to provide a visual cue to the user. My idea is something like:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Quick example</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style type="text/css">
* {
margin:0;
padding:0;
}
body {
background:#fff;
}
#box {
margin:3em;
border:1px solid red;
height:5em;
text-align:center;
cursor:pointer;
}
#boxgreen {
border:1px solid green;
}
</style>
<script type="text/javascript">
function bigLink(box) {
var theBox=document.getElementById(box);
theBox.onclick=function() {window.location=theBox.getElementsByTagName('a')[0].href;}
}
window.onload=function() {bigLink('box');}

</script>
</head>
<body>
<div id="box">
<p><a href="http://bonrouge.com" onmouseover=this.ClassName='boxgreen'>bonrouge</a></p>
</div>
</body>
</html>


Though the syntax is incorrect, I think you will see what I am trying to do - change the class when the user mouses over. In my mind, this will be more effective that using CSS hackery to get the :hover property working right. What do you think?
BonRouge
04-11-2007, 01:53 PM
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Quick example</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style type="text/css">
* {
margin:0;
padding:0;
}
body {
background:#fff;
}
#box {
margin:3em;
border:1px solid red;
height:5em;
text-align:center;
cursor:pointer;
}

#box.over {
border:1px solid green;
}
</style>
<script type="text/javascript">
function bigLink(box) {
var theBox=document.getElementById(box);
theBox.onclick=function() {window.location=theBox.getElementsByTagName('a')[0].href;}
theBox.onmouseover=function() {this.className="over"}
theBox.onmouseout=function() {this.className=""}
}
window.onload=function() {bigLink('box');}

</script>
</head>
<body>
<div id="box">
<p><a href="http://bonrouge.com">bonrouge</a></p>
</div>
</body>
</html>
Jim7283
04-11-2007, 03:47 PM
It's a beautiful thing! Thank you again Bon Rouge!
Jim7283
04-11-2007, 04:15 PM
The plot thickens...

What I realized soon after my last post is that they fix you provided is only works for the first <div> instance. The reason is because we are targeting the element by it's ID, and what I truly need is to target the element by its Class.

To provide a bit of background on the project, I am attempting to style the output of an SQL query. Essentially, each record is being placed in its own <div>, and there can be anywhere from 5-20 <div>'s per page.

Per W3C spec, I cannot use ID's for these, thus I must use a class to style the numerous <div>'s consistently.

I researched the 'getElementBy' property and found that there is a type called 'getElementByClassName' but when I tried to use this in place of 'getElementById' it broke the script.

Is it possible to acheive what I am trying to do? I hate to keep bothering you for fixes to this script, so please feel free to direct me somewhere else (article, tutorial, etc.) that could help educate me on this. Thanks!
RysChwith
04-11-2007, 04:32 PM
If I'm remembering correctly, support for getElementByClassName is spotty at best. You can try something like this instead:var divs = getElementsByTagName( "div" );

for( var i = 0; i < divs.length; i++ ) {
if( divs[ i ].className.indexOf( "nameOfClass" ) > -1 ) {
//code to execute if div is of desired class
}
}Perhaps not quite as tidy, but it should do the trick.

Rys