Форум

Boris777 · #1 (**permalink**) 06.12.2012, 22:08

Скажу честно, в JS пока очень слаб, но было очень нужно и нарыл таки в инете скрипт с помощью которого, при клике на данном элементе списка, в отдельном окне, выводится нужное изображение патента. Однако, помимо этого, крайне необходимо, чтоб после клика мышью, происходило выделение (например - голубым) фоном того элемента списка на котором был сделан клик, а с предыдущего элемента списка выделение исчезало. Очевидно, что данный скрипт, после очередного клика/щелчка, выделение (фон) на новую строку не переместит и с предыдущей строки фон так же не удалит.

Вот скрипт:
<script language="JavaScript" type="text/javascript">
function l_image (a) {
document.example_img.src=a;
}
</script>

<body>
......
<div id="imagebody">
<ul>
<li><a href="javascript:l_image ('patents/2256.jpg');" onclick="this.style.backgroundColor='blue';">1. Patent #2347 A, UI20090059, 2012.</a></li>
<li><a href="javascript:l_image ('patents/2311.jpg')">2. Patent #2343 A, UI20090061, 2011.</a></li>
<li><a href="javascript:l_image ('patents/2318.jpg')">3. Patent #2318 A, UI20090060, 2010.</a></li>
</ul>
</div>
........
<div id="winwrapper">
<div id="imagewrapper"><img src="patents/2256.jpg" width="302" name="example_img" alt="image" />
</div>
</div>
..........
</body>

Товарищи спецы в этом деле! Помогите пожалуйста привести скрипт в соответствие с требованиями, описанными выше!!

lord2kim · #2 (**permalink**) 06.12.2012, 23:46

Boris777,

<script>
window.onload = function () {
    document.getElementById("imagebody").onclick = function (e) {
         e = e || event;
         target = e.target || e.srcElement;
         imgs = document.getElementById("imagebody").getElementsByTagName("a");
         if (target.tagName == "A") {
             for (i = 0; i < imgs.length; i++) {
                 imgs[i].style.backgroundColor = "white";
              }
              target.style.backgroundColor = "blue";
              document.example_img.src = "patents/"+target.href.split("#")[1]+".jpg";
         }
    }
}
</script>
<body>
......
<div id="imagebody">
<ul>
<li><a href="#2256">1. Patent #2347 A, UI20090059, 2012.</a></li>
<li><a href="#2311">2. Patent #2343 A, UI20090061, 2011.</a></li>
<li><a href="#2318">3. Patent #2318 A, UI20090060, 2010.</a></li>
</ul>
</div>
........
<div id="winwrapper">
<div id="imagewrapper"><img src="patents/2256.jpg" width="302" name="example_img" alt="image" />
</div>
</div>
..........
</body>

Форум

Справочник

Discord чат

Курсы javascript