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

MustangUA · 16 Фев 2009

Здравствуйте!

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

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

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

Заранее благодарен

dandandan · 16 Фев 2009

Ставишь для своего diva ява скрипт

onmouseover="javascript: pop();"

А затем в ява скрипте прописываешь нужные параметры для своего баннера после помещения мышки на баннер. Например так:

function pop() {
document.all["Block"].style.position='absolute';
document.all["Block"].style.overflow='auto';
document.all["Block"].style.width='400px';
document.all["Block"].style.height='200px';
document.all["Block"].style.left='50%';
document.all["Block"].style.top='50%';
document.all["Block"].style.opacity='-200px';
document.all["Block"].style.opacity='-100px'; */
document.all["Block"].style.display='block';

где Block - это id div'a. А после знака равно - его параметры.

ShadeSlider · 19 Фев 2009

Почти без JS. Можно поиграть overflow дива.

Для просмотра скрытого содержимого вы должны войти или зарегистрироваться.

serg_g · 30 Мар 2009

можно подключить 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>

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

MustangUA

Создатель

dandandan

Мой дом здесь!

ShadeSlider

Писатель

serg_g

Создатель