爲YouTube的URL創建活動div不同的陰影

我有一個頁面，在頂部中間有一個大的YouTube播放器。在它下面有一堆可點擊的youtube縮略圖。點擊它們會將播放器視頻更改爲單擊的縮略圖。 youtube ID通過URL傳遞。爲YouTube的URL創建活動div不同的陰影

我想改變縮略圖背景的陰影，以使活動（「點擊」）縮略圖變成陰影。

下面的代碼生成鏈接的縮略圖：

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，如果他們匹配，並設置一個ID的縮略圖，可以在CSS中分配屬性...雖然我不知道如何做到這一點。有人可以幫忙嗎？

來源

2011-06-20 tnw

編輯：這種解釋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;禁用頁面加載（忽略href）。

該功能將更改iframe源，然後將一些自定義樣式添加到您單擊的鏈接以加載新視頻。

我甩在了鏈路ID爲「M」，因爲ID不能以數字開頭...

編輯：我的功能changeVid缺乏一些復位功能，刪除舊的縮略圖活躍狀態（簡單的方法來解決它：從所有縮略圖中刪除活動狀態，然後將活動狀態放在點擊縮略圖上。）

來源

2011-06-20 20:05:01 Kraz

不錯 - 比我的更好的例子是它。謝謝！ –

@Kraz但是，我不得不爲每一個youtube ID創建單獨的樣式。我希望爲活動縮略圖分配一次只分配給一個縮略圖的ID。這樣我可以使活動縮略圖變成不同的陰影。 – tnw

@Kraz此外，當我使用此代碼時，我的縮略圖中沒有任何顯示。 – tnw

在每個鏈接中，您可以放置一個onclick屬性來執行一些可以突出顯示的javascript。

來源

2011-06-20 19:50:50

@BZ你能詳細說明一下嗎？我對這個東西還是比較陌生的 – tnw

爲YouTube的URL創建活動div不同的陰影

回答

相關問題