Несвязанный ролловер исчезает в изображении

Я работаю над макетом страницы, где текстовая ссылка внизу страницы будет управлять эффектом опрокидывания в отдельном DIV. Код, который у меня есть в настоящее время, позволяет мне плавно переходить в текст (в области DIV), когда я перемещаю текстовую ссылку внизу страницы. Этот эффект "Разорванный ролловер" идеально подходит для страницы, которую я разрабатываю, - он имеет приятные плавные переходы. Однако я хотел бы добавить изображение PNG в области DIV вместо текста, и существующие сценарии не позволяют мне этого делать. Когда я пытаюсь заменить текст изображением, эффект переворачивания больше не работает. Есть ли способ легко изменить существующий код для достижения этой цели? Любая помощь будет принята с благодарностью и заранее спасибо за вашу помощь!

Текущая 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>
Источник

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>
Источник
Другие вопросы по тегам