Disjointed Fading rollover with javascript

**rmagnes** · 12-16-2007, 09:13 AM

I am trying to create a link in a list that will trigger a separate div to fade-in/fade-out when you rollover it. I have managed to get the div to fade-in/fade-out when you rollover it but I can't seem to get it to trigger when I rollover a separate link. I'm no javascript expert and I would really appreciate some help, this is pretty frustrating.

HTML Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<script type="text/javascript" src="fade.js"></script>
<title>fade in, fade out</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<style type="text/css">
#container {
width:324px;
height:200px;
border:3px double #000;
margin:auto;
}
#fader {
height:176px;
padding:12px;
filter:alpha(opacity=0);
opacity:0;
font-family:verdana,arial,helvetica,sans-serif;
font-size:14px;
text-align:justify;
}
</style>

</head>
<body>

<div id="container">

<div id="fader">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin massa. Nam vehicula.
Morbi velit nisi, mollis id, ultrices luctus, adipiscing sit amet, lectus. Nunc rhoncus
nisl ac enim. Maecenas vestibulum dolor ut velit. Maecenas condimentum pulvinar purus.
Pellentesque ac ipsum. Curabitur sodales, elit vel molestie hendrerit, elit odio rhoncus tellus,
nec gravida enim urna id velit. Donec nec tellus.Vestibulum nulla.
</div>


<ul>
<li><a href="#">My Big Important Link</a>


</ul>



</body>
</html>

The Javascript:

Code:

var c=0;
var obj;
var speed=50;

window.onload=function() {
obj=document.getElementById('fader');

obj.onmouseover=function() {
fadeinOut('in');
}
obj.onmouseout=function() {
fadeinOut('out');
}
}

function fadeinOut(dir){
if(obj.filters) {
obj.style.filter='alpha(opacity='+c+')';
}
else {
obj.style.opacity=c/100;
}
if(dir=='in') {
dir1='in'
c++;
}
else {
dir1='out';
c--;
}
if(c>100){
c=100;
return;
}
if(c<0){
c=0;
return;
}
setTimeout('fadeinOut(dir1)',speed)
}

**jscheuer1** · 12-16-2007, 01:41 PM

On your page:

Code:

<a id="mylink" href="#">My Big Important Link</a>

In your script:

Code:

window.onload=function() {
obj=document.getElementById('fader');
var l=document.getElementById('mylink');
l.onmouseover=obj.onmouseover=function() {
fadeinOut('in');
}
l.onmouseout=obj.onmouseout=function() {
fadeinOut('out');
}
}

If you want only the link to trigger this behavior, get rid of:

obj.onmouseover=

and:

obj.onmouseout=

Thread: Disjointed Fading rollover with javascript

Thread Tools

Search Thread

Disjointed Fading rollover with javascript

Bookmarks

Bookmarks

Posting Permissions