Создать форум бесплатно: ixbb.ru :: Календарь на Апрель 2024 года: calendar2008.ru/2024/aprel/

  Reply to this topicStart new topicStart Poll

Плавный переход от одной картинки к другой

, при наведении мышки. Реально ли?
Подписка на тему | Сообщить другу | Версия для печати
Anastasie
Отправлено: Aug 5 2007, 10:21 PM
Quote Post


  Солдат
*

Группа: Members
Сообщений: 7
Пользователь №: 1075
Регистрация:
5-August 07
Дано: 2 картинки: img1 и img2.
Хочется получить: при загрузке сайта видна img1, при наведении на неё мышкой должна появляться img2, но не сразу, как при обычном ролловере, а первая картинка должна исчезнуть плавно (затуманиться), а потом появляется вторая картинка.
На сайте aceweb.ru нашла два скрипта, выполняющие эти действия по отдельности - один скрипт по наведении мышки заменяет картинку на другую, а второй скрипт при наведении мышки затуманивает (или растуманивает) картинку.
Пыталась объединить в один скрипт, всю голову сломала, ничего не получается. Это вообще реально? или может, эти два действия принципиально несовместимы в одном скрипте?
Заранее спасибо.
PMEmail Poster
Top
Ilidan
Отправлено: Aug 5 2007, 10:59 PM
Quote Post


  Команда ЭйсВэб
*

Группа: Super moderator
Сообщений: 940
Пользователь №: 508
Регистрация:
30-March 07
Скинь код сюды, посмотрим и возможно совместим


--------------------
;-)
PMEmail PosterICQAOL
Top
Anastasie
Отправлено: Aug 6 2007, 10:40 AM
Quote Post


  Солдат
*

Группа: Members
Сообщений: 7
Пользователь №: 1075
Регистрация:
5-August 07
Поочередная смена картинок с затуханием:
CODE

<!-- HEAD START HERE -->

<style type="text/css">
#img1 {position:absolute; width:300px; height:100px; left:100px; top:10px; z-index:1; visibility:hidden;}
#img2 {position:absolute; width:300px; height:100px; left:100px; top:10px; z-index:2}
</style>

<script LANGUAGE="JavaScript">
var ie5=(document.getElementById && document.all);
var ns6=(document.getElementById && !document.all);

nPlus = 5   //the % of fading for each step
speed = 50  //the speed

// You don't have to edit below this line
nOpac = 100
function FadeImg(){
   if(document.getElementById){
       document.getElementById('img1').style.visibility="visible";
       imgs = document.getElementById('img2');
opacity = nOpac+nPlus;
nOpac = opacity;
setTimeout('FadeImg()',speed);
   if(opacity>100 || opacity<0){
       nPlus=-nPlus;
   }
   if(ie5){
       imgs.style.filter="alpha(opacity=0)";
imgs.filters.alpha.opacity = opacity;
   }
   if(ns6){
       imgs.style.MozOpacity = 0 + '%';
imgs.style.MozOpacity = opacity + '%';
   }
 }
}
onload=FadeImg;
//  End -->
</script>

<!-- HEAD END HERE -->
</head>
<body bgcolor="#EDEDED" text="#000000" link="#000000" topmargin="0" leftmargin="0">
<center>

<!-- BODY START HERE -->

<div id="img1">
 <img src="img1.gif" border=0 width=300 height=100>
</div>
<div id="img2">
 <img src="img2.gif" border=0 width=300 height=100>
</div>

<!-- BODY END HERE -->

<p>&nbsp;</p>
<p align="center">&nbsp;</p>
<div align="center">
 <center>
<table border="0" cellspacing="0" cellpadding="0">
 <tr>
   <td width="100%">
     <p align="center"><!--#exec cgi="/cgi-bin/inside/ads/ads.cgi" -->
     </td>
 </tr>
</table>

 </center>
</div>
<br>
<center><a href=http://aceweb.ru/><img src=ace.gif width= 88 height= 31 border= 0></a></center>

</body>
</html>


Скрипт смены картинок по наведении мышки

CODE

<script language="JavaScript">

<!--
if (document.images) {
 image1on = new Image();
 image1on.src = "2.gif";
 image1off = new Image();
 image1off.src = "1.gif";
}
function changeImages() {
 if (document.images) {
   for (var i=0; i<changeImages.arguments.length; i+=2) {
     document[changeImages.arguments[i]].src = eval(changeImages.arguments[i+1] + ".src");
   }
 }
}
// -->

</script>

<!-- HEAD END HERE -->

</head>
<body bgcolor="#EDEDED" text="#000000" link="#000000" topmargin="0" leftmargin="0">
<center>

<!-- BODY START HERE -->

<table border="0" cellpadding="0" cellspacing="0">
 <tr>
   <td><p onmouseout="changeImages('image1', 'image1off')"
   onmouseover="changeImages('image1', 'image1on')"><a href="http://www.aceweb.ru"><img
   alt="Главная страница" border="0" name="image1" src="1.gif" width="97"
   height="50"></a></td>
 </tr>
</table>

<!-- BODY END HERE -->
PMEmail Poster
Top
« Предыдущая тема | Все о javascript | Следующая тема »

Topic Options Reply to this topicStart new topicStart Poll

 



[ Script Execution time: 0.0398 ]   [ 10 queries used ]   [ GZIP выключен ]

Powered by Invision Power Board 1.3 (U) © 2003  IPS, Inc.