0

ページの下部にあるテキストリンクが別のDIVのフェードインロールオーバー効果を制御するページレイアウトに取り組んでいます。私が現在持っているコードでは、ページの下部にあるテキストリンクをロールオーバーすると、（DIV領域内の）テキストをフェードインできます。このばらばらのロールオーバー効果は、私がデザインしているページに最適です。フェードインとフェードアウトが優れています。ただし、テキストではなくDIV領域内のPNG画像をフェードインしたいのですが、既存のスクリプトではこれを実行できないようです。テキストを画像に置き換えようとすると、ロールオーバー効果が機能しなくなります。これを実現するために既存のコードを簡単に変更する方法はありますか？どんな助けでも大歓迎です、そしてあなたの援助に前もって感謝します！

私が持っている現在のHTMLページは以下のとおりです。

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<script type="text/javascript">
var c=0;
var obj;
var speed=20;
window.onload=function() {
obj=document.getElementById('fader');
var l=document.getElementById('mylink');
l.onmouseover=function() {
fadeinOut('in');
}
l.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>
<title></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,
</div>

<a href="#" id="mylink">My Link Will Go Here</a>
</div>
</body>
</html>
4

1 に答える 1

1

ここでjQueryをお勧めします。あなたのJavaScriptがどれほどシンプルか見てください！また、jQueryはブラウザ間の不透明度を処理します。

<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>

<script type="text/javascript">
$( function(){
  $('#mylink').mouseenter( function(){
    $('#fader').stop().animate({opacity:1});
  }).mouseleave( function(){
    $('#fader').stop().animate({opacity:0});
  })
});
</script>

<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<style type="text/css">
#container {
border:3px double #000;
margin:auto;
}
#fader {
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">
<img src='http://4.bp.blogspot.com/--owXoE04D_k/T-3epqrKyLI/AAAAAAAAANA/HLRMp2I9T4U/s1600/facebook-smiley-face.jpg'/>
</div>

<a href="#" id="mylink">My Link Will Go Here</a>
</div>
</body>
</html>
于 2012-07-09T07:52:44.123 に答える