Question

I am trying to adjust a CSS galley that I created to include an “onmouseover” to show a YouTube video as one of the galley options.

To be specific I am crafting an ebay template, that will include an onmouseover gallery that will show 3 image thumbnails, and will show the image (bigger) on mouse over.
I was requested to to change the 3’rd image so it will show a YouTube video instead, meaning that when I “onmouseover” the 3’rd thumbnail the bigger image will change to and YouTube object. (Image of the intended design)
Image URL: http://store07.backmeup.co.il/pavel/onmouseover.jpg

I created the following code for the gallery, but I have some issues with the YouTube feature.
When I pass the mouse over the YouTube thumbnail it shows the image as a different block, and is not part of the total design, meaning it is not changing back when I move to a different thumbnail, also it disappears when I move the mouse out of the thumbnail.

Here is the complete code of the gallery:

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

I’ve changed one of the thumbnails codding: (regular image code)

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>

To show and YouTube object instead of the image 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>

But I still have some issues with the matter, as the “youtube1” DIV is not merging properly with the rest of the gallery:

Image URL: http://store07.backmeup.co.il/pavel/onmouseover1.jpg

I am sure that the issue results from a wrong object definition in the code,
I would use a simple Iframe instead of the old object YouTube embed, but unfortunately ebay
doesn’t allow any iframe in their listings.

Answer 1

it sounds like you’ve two problems to solve here:

1) the “youtube1” DIV is not merging properly with the rest of the gallery

a css positioning issue. to attempt to fix this, set the youtube div to visible (display:block instead of display:none) and tweak the positioning until it’s correct.

2) [the youtube preview] disappears when i move the mouse out of the thumbnail

a javascript issue. actually i’m not entirely sure how the youtube div is appearing at all as i can’t see that this code would work to display the div

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

perhaps what you want to do is this:

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

and to hide the youtube div, try this:

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