2

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

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

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

这是画廊的完整代码：

<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。

4

1 回答 1

1

听起来您在这里要解决两个问题：

1) "youtube1" DIV 没有与画廊的其他部分正确合并

css定位问题。要尝试解决此问题，请将 youtube div 设置为可见（显示：块而不是显示：无）并调整定位直到它正确。

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"
于 2012-10-04T11:43:57.717 回答