I.m browsing Google from 3-4 days ago, but I can't find how to do this. I have 8 images and I want when i have onMouseOver to show video on each. Ok I found how to do that, but now the second problem is that I don't know how to put diferent video for each picture.Here is my HTML:\[code\]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Test</title><script type="text/javascript" src="http://stackoverflow.com/questions/15757346/trailbox2.js"></script><script type="text/javascript" src="http://stackoverflow.com/questions/15757346/flowplayer/flowplayer-3.2.12.min.js"></script></head><body background="body.jpg" > <center> <table width="1200" border="0" align="center" bgcolor="#e1e1e1"> <tr> <td width="120" id="tab0"> <img src = "http://stackoverflow.com/questions/15757346/img1.png" onMouseOver = "showtrail()" onMouseOut = "hidetrail()" /> </td> <td width="120" id="tab1"> <img src = "http://stackoverflow.com/questions/15757346/img2.png" onMouseOver = "showtrail();" onMouseOut = "hidetrail()"> </td> <td width="120" id="tab2"> <img src = "http://stackoverflow.com/questions/15757346/img3.png" onMouseOver = "showtrail();" onMouseOut = "hidetrail()"> </td> <td width="120" id="tab3"> <img src = "http://stackoverflow.com/questions/15757346/img4.png" onMouseOver = "showtrail()" onMouseOut = "hidetrail()"> </td> <td width="120" id="tab4"> <img src = "http://stackoverflow.com/questions/15757346/img5.png" onMouseOver = "showtrail()" onMouseOut = "hidetrail()"> </td> <td width="120" id="tab5"> <img src = "http://stackoverflow.com/questions/15757346/img6.png" onMouseOver = "showtrail()" onMouseOut = "hidetrail()"> </td> <td width="120" id="tab6"> <img src = "http://stackoverflow.com/questions/15757346/img7.png" onMouseOver = "showtrail()" onMouseOut = "hidetrail()"> </td> <td width="120" id="tab7"> <img src = "http://stackoverflow.com/questions/15757346/img8.png" onMouseOver = "showtrail()" onMouseOut = "hidetrail()"> </td> </tr> </table></center> <script> for(i=0;i<sizeof(arrayName);i++){ document.write(' "" + "" ') } </script> <script language="JavaScript"> flowplayer("player", "flowplayer/flowplayer-3.2.16.swf" ,{ plugins: { // disable autoloading of the controlbar plugin controls: null }, // disable the "overlay play button" play: null, // prevent pausing onBeforePause: function() { return true; }, // make the video loop onBeforeFinish: function() { return false; } }); </script> </body></html>\[/code\]and here is the JavaScript that I'm useing:\[code\]var trackdata="" //image path, plus width and heightvar offsetfrommouse=[10,-20] //image x,y offsets from cursor position in pixels. Enter 0,0 for no offsetvar displayduration=0 //duration in seconds image should remain visible. 0 for always.if (document.getElementById || document.all)document.write('<div id="trackdataid" style="position:absolute;visibility:visible;border-style:solid;padding:5px 5px;margin:5px auto;border-width:1px;border-color:rgb(250,250,250);background:rgba(10,10,10,0.6);text-align:center;color:rgb(230,230,230);font-family:Verdana;"><a href="http://stackoverflow.com/questions/15757346/94.flv" style="display:block;width:267px;height:150px;" id="player"></a></div> ')function gettrailobj(){if (document.getElementById)return document.getElementById("trackdataid").styleelse if (document.all)return document.all.trackdataid.style}function truebody(){return (!window.opera && document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body}function showtrail(){gettrailobj().visibility="visible"document.onmousemove=followmouse}function hidetrail(){gettrailobj().visibility="hidden"document.onmousemove=""}function followmouse(e){var xcoord=offsetfrommouse[0]var ycoord=offsetfrommouse[1]if (typeof e != "undefined"){xcoord+=e.pageXycoord+=e.pageY}else if (typeof window.event !="undefined"){xcoord+=truebody().scrollLeft+event.clientXycoord+=truebody().scrollTop+event.clientY}var docwidth=document.all? truebody().scrollLeft+truebody().clientWidth : pageXOffset+window.innerWidth-15var docheight=document.all? Math.max(truebody().scrollHeight, truebody().clientHeight) : Math.max(document.body.offsetHeight, window.innerHeight)if (xcoord+trackdata[1]+3>docwidth || ycoord+trackdata[2]> docheight)gettrailobj().display="none"else gettrailobj().display=""gettrailobj().left=xcoord+"px"gettrailobj().top=ycoord+"px"}//document.onmousemove=followmousegettrailobj().visibility="hidden"document.onmousemove=""if (displayduration>0)setTimeout("hidetrail()", displayduration*1000)\[/code\]I can write 8 document.write tags, but how to change the id in function gettrailobj for each picture in the HTML i need diferent id... or there is another way?Thanks for help!
Change document.write content by id?
- Thread starter poronga
- Start date