новостной блок аки на тут.бае...

laird · January 20, 2012

Какими способами можно реализовать такое же отображение новостного блока как на tut.by?

Edited January 20, 2012 by laird

Vombland · January 20, 2012

С помощью PHP b MySQL

laird · January 20, 2012

млин... видел скрипт... типа маппер.жс :facepalmxd: где была такая фича.. пхп и майсикуэл в топку :dash:

Sole · January 20, 2012

firebug вам в помощь, на tut.by js'ом навешивается класс current на активную строку с новостью, в стилях прописано что-то вроде:


img {
   display:none;
}
.current img {
   display:block;
}

laird · January 20, 2012

Sole благодарю... попробую, если справлюсь )) :rolleyes:

но хотелось бы найти ещё аналоги :rolleyes:

Softlink · January 20, 2012

но хотелось бы найти ещё аналоги

Почти аналог http://jsfiddle.net/Softlink/wvW7A/1/

laird · January 20, 2012

Softlink

ну это уже совсем другое дело!

свято-бешено благодарю!

Softlink · January 20, 2012

Softlink
ну это уже совсем другое дело!
свято-бешено благодарю!

Рано радуетесь, это все дело работает только в современных браузерах И работает только по ховеру. Т.е. как только мы уводим мышку с пункта, так слайд сбрасывается.

laird · January 21, 2012

ну если упростить задачу:

справа есть список, а слева картинка. При наведении курсора на пункт из списка справа, картинка слева меняется на другую :mellow:

это-то уж можно как-то реализовать без напрягов? :mellow:

buddah · January 21, 2012

Softlink
ну это уже совсем другое дело!
свято-бешено благодарю!
Рано радуетесь, это все дело работает только в современных браузерах И работает только по ховеру. Т.е. как только мы уводим мышку с пункта, так слайд сбрасывается.

Так твой второй пример по фокусу работает.

Softlink · January 21, 2012

ну если упростить задачу:
справа есть список, а слева картинка. При наведении курсора на пункт из списка справа, картинка слева меняется на другую
это-то уж можно как-то реализовать без напрягов?

Тогда можно сделать по принципу выпадающего меню. На ховере картинке устанавливать display:block.

Softlink
ну это уже совсем другое дело!
свято-бешено благодарю!
Рано радуетесь, это все дело работает только в современных браузерах И работает только по ховеру. Т.е. как только мы уводим мышку с пункта, так слайд сбрасывается.
Так твой второй пример по фокусу работает.

Да, работает. Дело в том, что автор привел пример, когда слайд срабатывает по ховеру и не пропадает до тех пор, пока не навели именно на следующий пункт. У меня же если только убираешь курсор, то слайд становится на исходную.

laird · January 21, 2012

Нашел ещё код для таких случаев - здесь хотя бы плавная смена...

И после убирания курсора остается та пикча, на которую навел :facepalmxd:

<html>
<head>
   <title>Мгновенная смена картинки при наведении курсора на ссылку</title>
   <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
   <script type="text/javascript">
      $(document).ready(function() {
         $('.img1_link').mouseenter(function(){ imgOn($(this).attr('pic'))}).click(function(){return false;});
      });
      var speed = 500;
      var timer = false;
      function imgOn(imgName) {
         $('#img1').fadeOut(speed);
         clearInterval(timer);
         timer = setInterval(function(){$('#img1').attr('src',imgName).fadeIn(speed)},speed);
      }
   </script>
</head>
<body bgcolor="000000" text="#00ff99" link="#00ff00" alink="#99ff00" vlink="#00cc00">
   <table>
      <tr>
         <td>
            <a class="img1_link" href="#" pic="gold468x60.gif">img 1</a><br>
            <a class="img1_link" href="#" pic="metal468x60.gif">img 2</a><br>
            <a class="img1_link" href="#" pic="metal-468x60.gif">img 3</a>
         </td>
         <td> 
            <img id="img1" src="gold468x60.gif" width="468" height="60" alt="" border="0">
         </td>
      </tr>
   </table>
</body>
</html>

Sign In

новостной блок аки на тут.бае...

Question

Link to comment

Share on other sites

11 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information