How to make image rollover?

[tubescrape]

you may also want to check out http://www.tubescrape.com

[l1some]

Please provide info on how to add this to vshare I have tried but nothing!! what code will be added to tpl file?

[grynmoors]

I know how to do this, I'll be posting a complete tutorial in a few minutes, I will also be making this available for download for free at webgeek-design.com.

[grynmoors]

THIS ONLY WORKS WITH FIREFOX!
But will give you a good idea of how this kind of thing works. See if you can find a better one that works in FF and IE and let us know!

---Copy and paste this code into a txt document:

/***** M U L T I S W A P ***** scripterlative.com modified for vShare by webgeek-design.com ** DO NOT EDIT BELOW HERE OR REMOVE PROGRAMMER CREDITS***/

function ImageSwap(imgRef, period) 
{
 this.period=period;  
 this.timer=null;
 this.index=0;
 this.theElem=document.getElementById(imgRef);
 this.defSrc=this.theElem.src;
 this.imgData=[];

 for(var i=2,j=0; i<arguments.length; i++,j++)
 {
  this.imgData[j]=new Image();
  this.imgData[j].src=arguments[i];
 }

 this.trigElem = (this.theElem.parentNode.tagName=='A' ? this.theElem.parentNode : this.theElem);

 this.trigElem.onmouseout=this.trigElem.onblur=(function(obj){ return function()
 { clearInterval(obj.timer);
   obj.theElem.src=obj.defSrc; 
   obj.index=0;
 }})(this);

 this.trigElem.onmouseover=this.trigElem.onfocus=(function(obj){return function()
 {
  obj.trigElem.onmouseout();
  obj.timer=setInterval( (function(inst){return function(){inst.swap()}})(obj), obj.period);
 }})(this);

 this.swap=function(/*73637269707465726C61746976652E636F6D*/)
 {
  if(this.index==this.imgData.length)
   this.index=0;  
  this.theElem.src=this.imgData[ this.index++ ].src;
 }
}

/** End **/

---Save as ImageSwap.js and close. Make sure the extention is .js and not something else. If it says .txt on it, rename it so that it says ImageSwap.js!

---Open templates/header.tpl

---Look for:

<script language="JavaScript" type="text/javascript" src="{$baseurl}/js/myjavascriptajax.js"></script>

---Add below that:

<script language="JavaScript" type="text/javascript" src="{$baseurl}/js/ImageSwap.js"></script>

---Save and close header.tpl

---Open templates/index.tpl

---Look for:

[img]{$tmburl}/1_{$new_video[i].VID}.jpg[/img]

---Replace with:

[img]{$tmburl}/1_{$new_video[i].VID}.jpg[/img]

---Add below that:

<script type='text/javascript'>
new ImageSwap ('new', 800, '{$tmburl}/2_{$new_video[i].VID}.jpg','{$tmburl}/3_{$new_video[i].VID}.jpg','{$tmburl}/1_{$new_video[i].VID}.jpg');
</script>

---Look for:

[img]{$tmburl}/1_{$recent[i].VID}.jpg[/img]

---Replace with:

[img]{$tmburl}/1_{$recent[i].VID}.jpg[/img]

---Add below that:

<script type='text/javascript'>
new ImageSwap ('recent', 800, '{$tmburl}/2_{$recent[i].VID}.jpg','{$tmburl}/3_{$recent[i].VID}.jpg','{$tmburl}/1_{$recent[i].VID}.jpg');
</script>

---Save and close your index.tpl

---Upload ImageSwap.js to the js directory

---Upload header.tpl and index.tpl to the templates directory

---Done! Visit your vShare site and see that it works.

AS ALWAYS, RENAME YOUR ORIGINAL FILES BEFORE UPLOADING SO THAT IF THIS DOESN'T WORK LIKE YOU EXPECTED YOU CAN REVERT BACK TO YOUR ORIGINAL FILES!

Now, you'll notice the number 800 in this code...that is the timer for the image cycle. You can speed it up or slow it down...the higher the number, the slower the images will cycle eg:to make it go really fast, set it to 100.

Enjoy!

[l1some]

Thanks for your help, vshare community is the best!!

[l1some]

It only work with firefox, explore will only do first thumb, will not swap the rest of the thumbs previews.

[grynmoors]

Yeah, my bad, I totally forgot to test this in IE (IE BLOWS!!!). But at least it gives you an idea of how this image thing works. Maybe someone can give us a better piece of code.

In the meantime, I'll see if I can fix it.

[grynmoors]

I discovered what works comes from Yahoo! UI Library. You need 2 pieces of javascript and have to tweak the stuff in the <img> tags a little.

I got it to rotate the thumbs on the front page (new, recent and featured) in both IE and FireFox, but haven't been able to get it to work on the virtual pages (need to tweak the <img> tags that are generated for that but since it's virtual, I don't know how to do it). Still trying to figure that one out.

If anybody knows, please share! In the meantime, I'll keep plugging away at it.

[l1some]

Can you please tell me what you did to get it to work with IE on the front page.

[grynmoors]

Please conact me via my website (see my sig) and I'll send you the files. There's 2 pieces of javascript code you'll need and instructions for changing the <img> tags. I don't have instructions for this yet, I'm still working on it. I'm trying to get it so that it also works with the virtual subdirectories. Right now it only works on the front page thumbs.