ebay의 youtube 비디오가 포함 된 CSS onmouseover 갤러리

Question

나는 "onmouseover"가 갤리 옵션 중 하나로 유튜브 비디오를 보여주기 위해 만든 CSS 갤리를 조정하려고합니다.

구체적으로 나는 3 개의 이미지 축소판을 보여줄 onmouseover 갤러리를 포함하고, 마우스를 올려 놓을 때 이미지가 커지도록 이베이 템플릿을 제작하고 있습니다. 3'rd 이미지를 변경하여 YouTube 동영상을 대신 표시하도록 요청되었습니다. 즉, 3'rd 미리보기 이미지를 "onmouseover"하면 더 큰 이미지가 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> 

내가 축소판 codding 중 하나를 변경했습니다 : : 여기

갤러리의 전체 코드의 대신 (일반 이미지 코드)

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> 

보여주고 유튜브 객체 onMouseover와 이미지 :

<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의 난으로 갤러리의 나머지 부분과 제대로 통합되지 S :

이미지 URL : http://store07.backmeup.co.il/pavel/onmouseover1.jpg

내가 코드에 잘못된 개체 정의에서 문제 결과, 내가 이전 대신 간단한 Iframe에를 사용하는 것이라고 확신 object youtube embed하지만 불행히도 eBay 은 목록에 iframe을 허용하지 않습니다.

나는이 문제에 갇혀 있기 때문에 많은 도움을 주셔서 감사합니다. 충분한 지식이 없으므로 해결해드립니다. 대단히 감사합니다.

Answer 1

는 당신이 여기에 해결하는 두 가지 문제를 것 같은 소리 :

1) "youtube1"DIV는 갤러리

CSS를 위치 문제의 나머지 부분과 제대로 통합되지 않습니다. 이 문제를 해결하려면 youtube div를 표시로 설정하고 (display : none 대신 display : block) 정확한 때까지 위치를 조정합니다. 내가 썸네일

자바 스크립트 문제에서 마우스를 이동할 때

2 ) [유튜브 미리보기] 사라집니다.

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

: 실제로 나는이 코드는 사업부

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

을 표시하기 위해 노력 것이라고 볼 수 없습니다로 유튜브 사업부가 전혀 표시되는 방식을 완전히 확실하지 않다 아마도 싶은 것은 이것이다

와 유튜브 사업부를 숨기려면,이 시도 :

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