的JavaScript的getElementById iframe的整合

-1

我承認新的JavaScript，因此恩典讚賞...的JavaScript的getElementById iframe的整合

答：我想申請的getelementbyId功能（我認爲）WITHOUT jQuery和

B.我想將它應用到整個桌子上，但每個元素都有不同的懸停圖像或狀態......任何幫助非常感謝！

<code> 
<article class="main_display"> 
<p style="text-align: center;"><iframe id="bigVideo" width="850" height="500" src="http://player.vimeo.com/video/45587075?rel=0&autoplay=0&modestbranding=1&wmode=Opaque" frameborder="0" allowfullscreen></iframe> 
<table width="142" cellspacing="1" cellpadding="2" id="mouseOvers"> 
    <tr> 
    <td><a href="#" onclick="$('#bigVideo').attr('src', 'http://player.vimeo.com/video/46124645?rel=0&autoplay=1&modestbranding=1&wmode=Opaque')" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image7','','http://s3.amazonaws.com/worship/graphics/worshipmadness/play_rollover.jpg',1)"><img src="http://s3.amazonaws.com/worship/graphics/worshipmadness/week1_vid.jpg" name="Image7" width="140" height="142" border="0" id="Image7" /></a></td> 
    <td><a href="#" onclick="$('#bigVideo').attr('src', 'http://player.vimeo.com/video/46117474?rel=0&autoplay=1&modestbranding=1&wmode=Opaque')" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image2','','http://s3.amazonaws.com/worship/graphics/worshipmadness/play_rollover.jpg',1)"><img src="http://s3.amazonaws.com/worship/graphics/worshipmadness/week2_vid.jpg" name="Image2" width="142" height="142" border="0" id="Image2" /></a></td> 
    <td><a href="#" onclick="$('#bigVideo').attr('src', 'http://player.vimeo.com/video/46117474?rel=0&autoplay=1&modestbranding=1&wmode=Opaque')" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image3','','http://s3.amazonaws.com/worship/graphics/worshipmadness/play_rollover.jpg',1)"><img src="http://s3.amazonaws.com/worship/graphics/worshipmadness/week3_vid.jpg" name="Image3" width="142" height="142" border="0" id="Image3" /></a></td> 
    <td><a href="#" onclick="$('#bigVideo').attr('src', 'http://player.vimeo.com/video/46119637?rel=0&autoplay=1&modestbranding=1&wmode=Opaque')" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image4','','http://s3.amazonaws.com/worship/graphics/worshipmadness/play_rollover.jpg',1)"><img src="http://s3.amazonaws.com/worship/graphics/worshipmadness/week4_vid.jpg" name="Image4" width="142" height="142" border="0" id="Image4" /></a></td> 
    <td><a href="#" onclick="$('#bigVideo').attr('src', 'http://player.vimeo.com/video/46121214?rel=0&autoplay=1&modestbranding=1&wmode=Opaque')" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image5','','http://s3.amazonaws.com/worship/graphics/worshipmadness/play_rollover.jpg',1)"><img src="http://s3.amazonaws.com/worship/graphics/worshipmadness/week5_vid.jpg" name="Image5" width="142" height="142" border="0" id="Image5" /></a></td> 
    <td><a href="#" onclick="$('#bigVideo').attr('src', 'http://player.vimeo.com/video/46123371?rel=0&autoplay=1&modestbranding=1&wmode=Opaque')" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image6','','http://s3.amazonaws.com/worship/graphics/worshipmadness/play_rollover.jpg',1)"><img src="http://s3.amazonaws.com/worship/graphics/worshipmadness/week6_vid.jpg" name="Image6" width="142" height="142" border="0" id="Image6" /></a></td> 
    </tr> 
</table> 
</p> 
</article> 
</code>

來源

2012-08-02 lsaintj

您必須更具體地瞭解您要完成的任務，並向我們展示您當前使用的代碼。兩者在獲得幫助方面都會有很長的路要走。 – jackwanders 2012-08-02 15:13:47

謝謝，對不起，代碼沒有正確發佈......但現在我們很好。 – lsaintj 2012-08-02 15:15:34

你期望getElementById做什麼？ – scrappedcola 2012-08-02 15:20:59

如果你的問題是：「你怎麼更換了jQuery在你的表是在onclick處理器與普通的JavaScript」，那麼你可以這樣做是這樣的：

<td><a href="#" onclick="document.getElementById('bigVideo').src = 'http://player.vimeo.com/video/46124645?rel=0&autoplay=1&modestbranding=1&wmode=Opaque')" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image7','','http://s3.amazonaws.com/worship/graphics/worshipmadness/play_rollover.jpg',1)"><img src="http://s3.amazonaws.com/worship/graphics/worshipmadness/week1_vid.jpg" name="Image7" width="140" height="142" border="0" id="Image7" /></a></td>

似乎在這個演示中使用你的HTML /代碼在這裏爲我工作：http://jsfiddle.net/jfriend00/5cqgj/

如果你打算問一些不同的東西，請說明你正在努力完成什麼。

來源

2012-08-02 15:19:03 jfriend00

謝謝，但我在Chrome中，並沒有工作。當我點擊時，沒有任何反應。 – lsaintj 2012-08-02 15:37:38

@lsaintj - 當您響應重複的呼叫來準確描述您要完成的工作時，我們可能會更好地爲您提供幫助。當你說「什麼都沒有發生」時，你是否在錯誤控制檯中查看是否報告了任何錯誤？ – jfriend00 2012-08-02 15:45:27

@lsaintj - 我的代碼建議似乎適用於我在Chrome中的這個jsFiddle演示：http://jsfiddle.net/jfriend00/5cqgj/。 – jfriend00 2012-08-02 16:24:03

我建議使用CSS翻車：

<style> 
     #Image2 div, #Image3 div, #Image4 div, #Image5 div, #Image6 div, #Image7 div { width:142px; height:142px; } 
     #Image7 div { width:140px; } /*is it suppose to have a different width than the others? and is the id suppose to be "Image7" and not "Image1" ?*/ 
     #Image2 div { background:url(http://s3.amazonaws.com/worship/graphics/worshipmadness/week2_vid.jpg); } 
     #Image3 div { background:url(http://s3.amazonaws.com/worship/graphics/worshipmadness/week3_vid.jpg); } 
     #Image4 div { background:url(http://s3.amazonaws.com/worship/graphics/worshipmadness/week4_vid.jpg); } 
     #Image5 div { background:url(http://s3.amazonaws.com/worship/graphics/worshipmadness/week5_vid.jpg); } 
     #Image6 div { background:url(http://s3.amazonaws.com/worship/graphics/worshipmadness/week6_vid.jpg); } 
     #Image7 div { background:url(http://s3.amazonaws.com/worship/graphics/worshipmadness/week1_vid.jpg); }  
     #Image2 div:hover, #Image3 div:hover, #Image4 div:hover, #Image5 div:hover, #Image6 div:hover, #Image7 div:hover { background:url(http://s3.amazonaws.com/worship/graphics/worshipmadness/play_rollover.jpg); } 
</style>

爲您的視頻轉換器創建一個函數：

<script type="text/javascript"> 
    function bigVideo(src) { // this is regular javascript no JQuery 
     var url  = 'http://player.vimeo.com/video/'; 
     var settings = '?rel=0&autoplay=1&modestbranding=1&wmode=Opaque'; 
     document.getElementById('bigVideo').src = url + src + settings; 
    } 
</script>

這樣做可以清理你的HTML不少。

<article class="main_display"> 
    <p style="text-align: center;"> 
    <iframe id="bigVideo" width="850" height="500" src="http://player.vimeo.com/video/45587075?rel=0&autoplay=0&modestbranding=1&wmode=Opaque" frameborder="0" allowfullscreen></iframe> 

    <table width="142" cellspacing="1" cellpadding="2" id="mouseOvers"> 
     <tr> 
     <td><a id="Image7" href="#" onclick="bigVideo('46124645');"><div></div></a></td> 

     <td><a id="Image2" href="#" onclick="bigVideo('46117474');"><div></div></a></td> 

     <td><a id="Image3" href="#" onclick="bigVideo('46117474');"><div></div></a></td> 

     <td><a id="Image4" href="#" onclick="bigVideo('46119637');"><div></div></a></td> 

     <td><a id="Image5" href="#" onclick="bigVideo('46121214');"><div></div></a></td> 

     <td><a id="Image6" href="#" onclick="bigVideo('46123371');"><div></div></a></td> 
     </tr> 
    </table> 

    </p> 
    </article>

回顧：

1 - 空「格」標籤替換「IMG」標籤，並通過ID爲「A」的標籤。這使我們可以使用背景圖像進行css翻轉。

2-創建一個函數來替換視頻源，並在函數中保留所有不變的數據，並將變量變量傳遞給該函數。

這會導致更清晰的html。理想情況下，你想盡量保持你的HTML CSS和JavaScript分開。即使你的表具有可以傳遞給CSS的屬性。

來源

2012-08-02 16:50:46 Damian

太棒了，這完全是我所需要的。非常感謝。我知道這是超級基本的，但我可以看到你是如何做到的，哪些是岩石！謝謝@Damian – lsaintj 2012-08-02 17:49:43

@Isaintj - 您的歡迎;）很高興我能幫上忙。 – Damian 2012-08-02 17:54:07

@Isaintj - 我的代碼中有一個函數調用「bigVideo」的輸入錯誤，只是注意到「設置」需要設置。 – Damian 2012-08-02 18:17:53

的JavaScript的getElementById iframe的整合

回答

相關問題