-1

诚然，我是 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>
4

2 回答 2

0

我建议使用 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-用空的“div”标签替换“img”标签并将id传递给“a”标签。这允许我们使用背景图像进行 CSS 翻转。

2-创建一个函数来替换视频源，并在函数中保留所有不改变的数据，并将变化的变量传递给函数。

这会产生更清晰的 html。理想情况下，您希望尝试将 html css 和 javascript 分开。甚至您的表也具有可以传递给 css 的属性。

于 2012-08-02T16:50:46.917 回答
0

如果您的问题是：“如何onclick用纯 javascript 替换处理程序中的表中的 jQuery”，那么您可以这样做：

<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-02T15:19:03.617 回答