Javascript-форум - Диначесеская подсветка ссылок

Javascript-форум (https://javascript.ru/forum/)

- Элементы интерфейса (https://javascript.ru/forum/dom-window/)

- - Диначесеская подсветка ссылок (https://javascript.ru/forum/dom-window/48399-dinacheseskaya-podsvetka-ssylok.html)

Диначесеская подсветка ссылок

Добрый день.

Подскажите пожалуйста как можно вот такую задачу решить: есть один заголовок и четыре миниатюры новостей, заголовок через определенный промежуток времени меняется (всего заголовков четыре как и картинок, но в каждый конкретный момент времени виден только один) и соответственно меняется подсветка миниатюр (подсвечивается та миниатюра, чей заголовок высветился). При наведении мыши действие ставится на паузу. Смена заголовков и картинок по очереди.

:write: вариант ...

<!DOCTYPE HTML>
<html>
  <head>
  <meta charset="utf-8">
  <style>
    #myUl{
      list-style: none;
      width: 120px;
      padding: 0;
      margin: 0;
      overflow: hidden;
    }
  	#myUl li{
      float: left;
      width: 50px;
      height: 50px;
      border: 2px solid #FFA000;
      margin-right: 5px;
      margin-bottom: 5px;
    }
    #myUl li.active{
      border: 2px solid #ff0000;
    }
  </style>
  </head>
  <body>
    <div id="myHead"></div>
	<ul id="myUl">
      <li head="Заг А.">A</li>
      <li head="Заг Б..">Б</li>
      <li head="Заг В...">В</li>
      <li head="Заг Г....">Г</li>
    </ul>
    <script>
      var myUl    = document.getElementById('myUl'),
          myHead  = document.getElementById('myHead'),
          UlInner = myUl.children,
          j       =  -1,
          elem,
          is;

	  function spt(e,el){
        elem && (elem.className = '');
        j = ++j % UlInner.length ;
        elem = el || UlInner[j];
        myHead.innerHTML = elem.getAttribute('head');
        elem.className = 'active';
        !el && (is = window.setTimeout(spt, 1000));

      }
      spt();
      myUl.onmousemove = function (e){  window.clearTimeout(is);
         var target = e && e.target || event.srcElement;
         if(target.tagName == 'LI') spt(e,target);
      }
      myUl.onmouseout = spt
    </script>

  </body>
</html>

Недостатки этих решений в том, что заголовки выпадают из индексирования. Если это важно для ТС, конечно :)

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

Цитата:

Сообщение от DerTrickster

наведении на картинку отображался соответствующий заголовок...

оно разве не так в 3 посте?

Извиняюсь, глупость написал. Смотрел на планшете первый раз просто не разглядел.

Извиняюсь, что снова поднимаю старую тему, но столкнулся с ошибкой: все корректно работает пока в <li> текст, но если вложить еще один <div> все сбивается. Как это можно исправить?

Цитата:

Сообщение от DerTrickster

Как это можно исправить?

54я строка