Forum Moderators: open
I have a big problem...
I want to make a page like...
when i move the mouse over a layer then it fade in....
when i move the mouse off the layer, that layer will fade out....
Hope someone can help me... URGENT!
Thanks a lot!
and a warm welcome to these forums. ;)
Have a look at this example...
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<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><script type="text/javascript">
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)
}
</script></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></div>
</body>
</html>
birdbrain
Oh... this nice! thx so much!
No problem, you're welcome. ;)
