Сделайте активным div для YouTube URL другого оттенка

Question

У меня есть страница, где в верхней средней части находится большой игрок на YouTube. Под ним есть несколько эскизов YouTube, которые можно нажимать. Нажатие на них меняет видео игрока на миниатюру, которая была нажата. Идентификатор YouTube передается через URL.

Я хотел изменить оттенок фона миниатюры, чтобы активный ("щелкнувший") эскиз был затемнен.

Следующий код генерирует связанные эскизы:

while ($row = mysql_fetch_array($result)) {
    $tubeID = $row['videoinfo'];
        echo
            '<div class="vid"><a href="videos.php?id=' . $tubeID . '"><img src="http://img.youtube.com/vi/' . $tubeID . '/0.jpg" width="225" height="175"/></a></div>';
}   

А в следующем коде для отображения видео используется нажатая миниатюра:

<iframe id="player" width="640" height="385" src="http://www.youtube.com/embed/<?php echo $_GET['id'] ?>" frameborder="0"></iframe>

Я знаю, что мне нужно сравнить URL-адрес миниатюры с текущим URL-адресом, и если они совпадают, и установить идентификатор для этого эскиза, которому можно назначить свойства в CSS ... хотя я не уверен, как это сделать. Может кто-нибудь помочь?

Answer 1

edit : эта сортировка объясняет, что предлагает BZ.

Я выкинул несколько php, чтобы сделать ответ более лаконичным. Не забудьте добавить его обратно.

<div class="vid">
  <a href="videos.php?id=$tubeID" id="m+$tubeID" onclick="changeVid(this);return false;">
    <img src="http://img.youtube.com/vi/01/0.jpg" width="225" height="175"/>
  </a>
</div>

<script type="text/javascript>
  function changeVid(obj) {
    document.getElementById('player').src = "videos.php?id="+ substr(obj.id,1)
    document.getElementById(obj.id).style.visibility='visible'; //or other style
document.getElementById(obj.id).setAttribute("class", newClass); //For Most Browsers
    document.getElementById(obj.id).setAttribute("className", newClass); //For IE; harmless to other browsers.
  }
</script>

конечно, мне было бы намного легче с JS-фреймворком ... (т.е. jquery)

Обычно, когда вы нажимаете на ссылку, вызывается функция, когда она завершается, return false; отключает загрузку страницы (игнорируя ссылку).

Функция изменит источник iframe, а затем добавит несколько пользовательских стилей к ссылке, по которой вы щелкнули, чтобы загрузить новое видео.

Я добавил «m» в идентификатор ссылки, потому что id не может начинаться с цифр ...

edit: моей функции changeVid не хватает какой-либо функции сброса для удаления старого активного состояния миниатюры (простой способ решить это: удалить активное состояние из всех миниатюр, а затем поместить активное состояние в миниатюру, по которой щелкнули).

Answer 2

В каждую ссылку вы можете поместить атрибут onclick, чтобы сделать некоторый JavaScript, который будет делать подсветку.