Question

<div class="video">
  <span class="videoNewIcon"><img src="somenewicon.gif"  width="26" height="11" /></span>        
  <a class="videoThumb" href="somevideoname.aspx">
    <img src="http://somesite.com/someimagename.jpg"  alt="description" longdesc="rtmp://somertmp.com/someapplication/mp4:somevide.f4v"/>
  </a>
  <span class="videoTitle">some title</span>
  <span class="videoInfo videoInfoViews"><strong>some views</strong></span>
  <span class="videoInfo videoInfoUpTime"><strong>some up time </strong></span>
  <span class="videoInfo videoInfoCategory"><strong><a href="some category.aspx">some category</a></strong></span>
  <span class="videoInfo videoInfoDuration"><strong>some duration</strong></span>
</div>

$(document).ready(function () {
  $(".video").hover(
    function () {
      $(this).oneTime(1000, "hide", function () {
        $(".videoThumb").children("img").show();
        $("object").remove();
        $(this).children(".videoThumb").children("img").hide();
        var href = $(this).children(".videoThumb").attr("href");
        var longdesc = $(this).children(".videoThumb").children("img").attr("longdesc");
        $("<object classid='clsid:d27cdb6e-ae6d-11cf-96b8-444553540000' width='180' height='135' id='videoHolder' align='middle'><param name='movie' value='videoHolder.swf?vid=" + longdesc + "&url=" + href + "' /><param name='quality' value='high' /><param name='bgcolor' value='#000000' /><param name='play' value='true' /><param name='loop' value='true' /><param name='wmode' value='window' /><param name='scale' value='showall' /><param name='menu' value='true' /><param name='devicefont' value='false' /><param name='salign' value='' /><param name='allowScriptAccess' value='sameDomain' /><!--[if !IE]>--><object type='application/x-shockwave-flash' data='videoHolder.swf?vid=" + longdesc + "&url=" + href + "' width='180' height='135'><param name='movie' value='videoHolder.swf' /><param name='quality' value='high' /><param name='bgcolor' value='#000000' /><param name='play' value='true' /><param name='loop' value='true' /><param name='wmode' value='window' /><param name='scale' value='showall' /><param name='menu' value='true' /><param name='devicefont' value='false' /><param name='salign' value='' /><param name='allowScriptAccess' value='sameDomain' /><!--<![endif]--><a href='http://www.adobe.com/go/getflash'><img src='http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif' alt='Get Adobe Flash player' /></a><!--[if !IE]>--></object><!--<![endif]--></object>").appendTo($(this).children(".videoThumb"));
      });
    },
    function () {
      $(this).stopTime("hide");
      $("object").remove();
      $(this).children(".videoThumb").children("img").show();
    }
  );
});

Basically what I have is a <div class="video">, onhover of which I replace <a class="videoThumb"> with an image to a flash player with movie preview. I inserted a jQuery timer to create a delay so once I hover over div.video‘s first one will stop playing before the second one starts.

Answer 1

I would use a jquery template in this instance.

Check out my answer here How to prepend a big DIV? for an example usage.