使youtube网址的活动div具有不同的阴影

Question

I have a page where in the top middle there is a large youtube player. Below it there are a bunch of youtube thumbnails which are clickable. Clicking them changes the player video to the thumbnail that was clicked. The youtube ID is passed thru the URL.

I wanted to change the shade of the thumbnail background so that the active ("clicked") thumbnail was shaded.

The following code generates the linked thumbnails:

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>';
}   

And the following code uses the clicked thumbnail to display the video:

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

I know I need to compare the thumbnail URL to the current URL and if they match and set an ID to that thumbnail which can be assigned properties in CSS... though I'm not sure how to do so. Can someone help?

Answer 1

edit : this sorta explain what BZ suggested.

I kicked out some php to make the answer more concise. Don't forget to add it back.

<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>

of course, I'd be a lot easier with a JS framework... (ie jquery)

Basically, when you click a link, the function is called, when it's done, return false; disable the page loading (ignoring the href).

The function will change the iframe source and then will add some custom styling to the link you clicked to load the new video.

I've thrown a "m" in the link ID, because id can't start with numbers...

edit : my function changeVid lack some reset function to remove the old thumbnail active state (easy way to solve it : remove the active state from all thumbnail then put the active state on the clicked thumbnail.)