javascript - Javascript getelementbyId iframe 統合

Question

私は確かにJavascriptに慣れていないので、恵みをいただければ幸いです...

A. JQueryを使用せずに関数を適用したいgetelementbyId(と思います) 。

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>

score 0 · Accepted Answer

ロールオーバーには 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」タグを空の「div」タグに置き換え、ID を「a」タグに渡しました。これにより、css を使用したロールオーバーに背景画像を使用できます。

2- ビデオソースを置き換える関数を作成し、変化しないすべてのデータを関数内に保持して、変化する変数を関数に渡します。

これにより、よりクリーンな html が生成されます。理想的には、html css と javascript を分離したままにしておくことをお勧めします。テーブルにも css に渡すことができる属性があります。

score 0 · Accepted Answer

あなたの質問が「onclickハンドラーにあるテーブルの jQuery をプレーンな 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/

別の質問をするつもりだった場合は、何を達成しようとしているのかを明確にしてください。

javascript - Javascript getelementbyId iframe 統合

2 に答える 2

Related

Reference