Развертывающийся баннер (CSS,JS)

Тема в разделе "Другие языки", создана пользователем MustangUA, 16 фев 2009.

Статус темы:
Закрыта.
Модераторы: Цукер
  1. MustangUA

    MustangUA Создатель

    Регистр.:
    9 май 2007
    Сообщения:
    22
    Симпатии:
    1
    Здравствуйте!

    Такая проблема:
    Нужно чтобы показывалась часть анимированного GIF-баннера, а при наведении на него он развертывался и показывался полностью.
    Баннер находится внутри абсолютного div'а.

    Если делать через CSS (img { height: 30px } img:hover { height: 90px }), то вначале показывается не часть баннера, а сжатый по высоте баннер.

    В JavaScript не понимаю ничего. Посоветуйте, пожалуйста, решение данной проблемы на CSS или JavaScript.

    Заранее благодарен
     
  2. dandandan

    dandandan

    Регистр.:
    7 авг 2008
    Сообщения:
    996
    Симпатии:
    268
    Ставишь для своего diva ява скрипт
    А затем в ява скрипте прописываешь нужные параметры для своего баннера после помещения мышки на баннер. Например так:
    где Block - это id div'a. А после знака равно - его параметры.
     
  3. ShadeSlider

    ShadeSlider Писатель

    Регистр.:
    25 июл 2008
    Сообщения:
    7
    Симпатии:
    2
    Почти без JS. Можно поиграть overflow дива.

    <div style="height: 30px; width: 200px; overflow: hidden" onmouseover="this.style.height='200px'" onmouseout="this.style.height='30px'">
    <img src="gif.gif">
    </div>
     
  4. serg_g

    serg_g Создатель

    Регистр.:
    31 окт 2008
    Сообщения:
    35
    Симпатии:
    9
    можно подключить jquery и сделать развертывание плавным
    НО!! - и эта проблема не связана с jquery....

    если див - то возникает прокрутка, когда мы часть картинки хотим показать.... и как ее убрать во всех популярных браузерах, я не знаю

    а вот усли iframe - то все красиво получается

    в примере и div и iframe

    HTML:
    <script type="text/javascript" src="jquery_min.js"></script>
    </head>
    <body>
      <div id="block" style="width:100px; height:50px; position: absolute; overflow: auto;" ><img src="shapka3.gif" alt="" width="355" height="319" border="0"></div>
    <br><br><br><br><br><br><br><br><br>
      <iframe SCROLLING="NO"  src="img.gif" id="iblock" style="width:100px; height:100px;" ></iframe>
    
    </body>
    <script>
      $(document).ready(function(){
          
        $("#block").hover(function(){
          $("#block").animate({ 
            width: "200",
    		height: "200"
          }, 1500 );
        },function(){
          $("#block").animate({ 
            width: "100",
    		height: "100"
          }, 1500 );
        }
    	);
    	
    	$("#iblock").hover(function(){
          $("#iblock").animate({ 
            width: "200",
    		height: "200"
          }, 1500 );
        },function(){
          $("#iblock").animate({ 
            width: "100",
    		height: "100"
          }, 1500 );
        }
    	);
    	
      });
      </script>
     
Статус темы:
Закрыта.