javascript - 带有 eB YouTube 视频的画廊

Question

我正在尝试调整我创建的 CSS 条样以包含“onmouseover”以将 YouTube 视频显示为条样选项之一。

具体来说，我正在制作一个 ebay 模板，它将包括一个 onmouseover 画廊，它将显示 3 个图像缩略图，并在鼠标悬停时显示图像(更大)。 我被要求更改第 3 个图像，以便它显示 YouTube 视频，这意味着当我“鼠标悬停”第 3 个缩略图时，较大的图像将变为 YouTube 对象。 (预期设计的图像) 图片网址:http://store07.backmeup.co.il/pavel/onmouseover.jpg

我为画廊创建了以下代码，但我在使用 YouTube 功能时遇到了一些问题。 当我将鼠标移到 YouTube 缩略图上时，它会将图像显示为不同的 block ，并且不是整体设计的一部分，这意味着当我移至不同的缩略图时它不会变回，当我将鼠标移出时它也会消失缩略图。

这里是图库的完整代码:

<div class="content">

<table border="0">
<tbody>
<tr>
<td><div id="myPicturesInsert"><!-- myPicturesCode -->
<table id="MOEtable" style="width: 570px;padding-right:0px;" cellspacing="0" cellpadding="0" align="center">
<tbody>
<tr>
<td align="center">
<table style="height: 310px; width: 570px;padding-right:0px;" cellspacing="0" cellpadding="0" align="center">
<tbody>
<tr>
<td style="padding-bottom: 28px; padding-left: 0px; padding-top:2px;" title="MouseOver Enlarge" valign="top" height="320">

<a class="415x314" style="display: inline-block; margin: 5px; margin-bottom: 10px; width: 120;" onclick="return false;" onmouseover="return FF2MOE.show(this);" href="{{IMAGE(ITEMIMAGEURL1)}}" target="_blank">
<img style="border: 1px solid #d6d6d6 ; border-radius: 10px; width: 100px; height: 88px; margin-left: 0px; margin-right: 0px;" title="" src="{{IMAGE(ITEMIMAGEURL1)}}" alt="" /></a>

<a class="415x314" style="display: inline-block; margin: 5px; margin-bottom: 10px; width: 120;" onclick="return false;" onmouseover="return FF2MOE.show(this);" href="{{IMAGE(ITEMIMAGEURL2)}}" target="_blank">
<img style="border: 1px solid #d6d6d6; border-radius: 10px; width: 100px; height: 88px; margin-left: 0px; margin-right: 0px; padding-top: 8px;" title="" src="{{IMAGE(ITEMIMAGEURL2)}}" alt="" /></a>

<a class="415x314" style="display: inline-block; margin: 5px; margin-bottom: 10px; width: 120;" onclick="return false;" onmouseover="document.getElementById('youtube1').style.display=(document.getElementById('youtube1'))" href="" target="_blank">

<img style="border: 1px solid #d6d6d6; border-radius: 10px; width: 100px; height: 88px; margin-left: 0px; margin-right: 0px; padding-top: 8px;" title="" src="{{IMAGE(ITEMIMAGEURL3)}}" alt="" /></a>

<!-- Custom youtube element -->

<div id='youtube1' style='display: none;'>

<div  style="position:absolute; left:500px; top:330px;">
<object width="415" height="314"><param name="movie" value="http://www.youtube.com/v/JoV6_2rWV-s?version=3&amp;hl=en_US&amp;rel=0"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/JoV6_2rWV-s?version=3&amp;hl=en_US&amp;rel=0" type="application/x-shockwave-flash" width="415" height="314" allowscriptaccess="always" allowfullscreen="true"></embed></object>
</div>
</div>




<td style="padding: 10px; padding-top: 6px; background-image: url('http://freeform2.robshelp.com/textures/processing.gif'); background-repeat: no-repeat; background-position: center 15px;" align="center" valign="top" width="500"><img style="border: 1px solid #d6d6d6; border-radius: 10px; margin-left: -14px;margin-right:3px; width: 415px; height: 314px;" src="{{IMAGE(ITEMIMAGEURL2)}}" alt="" name="FF2MOEP" /></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<script type="text/javascript" language="JavaScript">// <![CDATA[
var FFPparms = "MOE:94:540:1:420";var FF2MOE=new Object;FF2MOE.show = function(obj) {    var widthxheight=obj.className;    var pfp=document.images["FF2MOEP"];    pfp.src="http://freeform2.robshelp.com/textures/transparent.gif";    if (widthxheight && widthxheight.indexOf("x")>0) {        var pw = +widthxheight.substring(0,widthxheight.indexOf("x"));        var ph = +widthxheight.substring(widthxheight.indexOf("x")+1);        pfp.style.width=pw+"px";        pfp.style.height=ph+"px";        pfp.src=obj.href;    }    else pfp.style.backgroundImage="url(" + obj.href + ")";};
// ]]></script><!-- myPicturesCode -->






</div>

我更改了其中一个缩略图编码:(常规图像代码)

a class="415x314" style="display: inline-block; margin: 5px; margin-bottom: 10px; width: 120;" onclick="return false;" onmouseover="return FF2MOE.show(this);" href="{{IMAGE(ITEMIMAGEURL2)}}" target="_blank">
<img style="border: 1px solid #d6d6d6; border-radius: 10px; width: 100px; height: 88px; margin-left: 0px; margin-right: 0px; padding-top: 8px;" title="" src="{{IMAGE(ITEMIMAGEURL2)}}" alt="" /></a>

在鼠标悬停时显示和 YouTube 对象而不是图像:

<a class="415x314" style="display: inline-block; margin: 5px; margin-bottom: 10px; width: 120;" onclick="return false;" onmouseover="document.getElementById('youtube1').style.display=(document.getElementById('youtube1'))" href="" target="_blank">

<img style="border: 1px solid #d6d6d6; border-radius: 10px; width: 100px; height: 88px; margin-left: 0px; margin-right: 0px; padding-top: 8px;" title="" src="{{IMAGE(ITEMIMAGEURL3)}}" alt="" /></a>

但我对此事仍有一些疑问，因为“youtube1”DIV 未与画廊的其余部分正确合并:

图片网址:http://store07.backmeup.co.il/pavel/onmouseover1.jpg

我确定问题是由代码中错误的对象定义引起的， 我会使用简单的 Iframe 而不是 YouTube 嵌入的旧对象，但不幸的是 ebay 不允许在他们的列表中使用任何 iframe。

Answer 1

听起来你有两个问题需要解决:

1) “youtube1” DIV 没有与画廊的其余部分正确合并

CSS 定位问题。要尝试解决此问题，请将 youtube div 设置为可见(display:block 而不是 display:none)并调整定位直到正确为止。

2) 当我将鼠标移出缩略图时 [youtube 预览] 消失

javascript 问题。实际上我不完全确定 youtube div 是如何出现的，因为我看不到这段代码可以显示 div

onmouseover="document.getElementById('youtube1').style.display=(document.getElementById('youtube1'))"

也许你想做的是:

onmouseover="document.getElementById('youtube1').style.display=block"

要隐藏 youtube div，试试这个:

onmouseout="document.getElementById('youtube1').style.display=none"