2

ゲラ オプションの 1 つとして YouTube ビデオを表示する「onmouseover」を含めるように作成した CSS ゲラを調整しようとしています。

具体的に言うと、私は eBay テンプレートを作成しています。これには、3 つの画像のサムネイルを表示する onmouseover ギャラリーが含まれ、マウスオーバーで画像 (大きい) が表示されます。3 番目の画像を変更して、代わりに YouTube ビデオを表示するように要求されました。つまり、3 番目のサムネイルを「マウスオーバー」すると、大きな画像が 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>

サムネイルのコーディングの 1 つを変更しました: (通常の画像コード)

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 がギャラリーの残りの部分と適切にマージされていないため、まだ問題がいくつかあります。

画像URL：http ://store07.backmeup.co.il/pavel/onmouseover1.jpg

この問題は、コード内のオブジェクト定義が間違っていることが原因であると確信しています。YouTube に埋め込まれた古いオブジェクトの代わりに単純な iframe を使用しますが、残念ながら eBay はリストに iframe を許可していません。

4

1 に答える 1

1

ここで解決すべき2つの問題があるようです：

1) 「youtube1」DIV がギャラリーの残りの部分と適切にマージされていません

css の配置の問題。これを修正するには、YouTube の div を表示 (display:none ではなく display:block) に設定し、正しくなるまで位置を微調整します。

2) サムネイルの外にマウスを移動すると、[YouTube のプレビュー] が消えます。

JavaScriptの問題。実際には、このコードがdivを表示するために機能することがわからないため、YouTube 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 に答える