How to make image rollover?

Dose someone know how to make image rollover when you put your mouse over the image.
Like youporn and xhamsrer.

not 100% sure, but I think you can do it by using using the standard javascript rollover syntax.

Something like:

Code:

---


<script language="Javascript">



if (document.images) {
    thumb1 = new Image
    thumb2 = new Image

    thumb1.src = '{$tmburl}/1_{$recent[i].VID}.jpg'
    thumb2.src = '{$tmburl}/2_{$recent[i].VID}.jpg'
 }

</script>

---

Then call it within the IF statement:

Code:

---

<a href="{$baseurl}/view/{$recent[i].VID}/{$recent[i].seo_name}/"  onmouseover="document.rollover.src=thumb2.src" onmouseout="document.rollover.src=thumb1.src">
[img]{$tmburl}/1_{$recent[i].VID}.jpg[/img]

{$recent[i].title|truncate:30:"...":true}</a>

---

I don't really know if this is 100% working or not, but it should give you an idea of where to start. It's early and I'm tired.
I'll try to test it out later and post a tested code.

xhamster.com based with vshare and they make it with this code

Java script

Code:

---

var thumbs=new Array();
var stat=new Array();
var thumb=new Array();

function rotatethumb(i,str)
{ var loop=0;

        if (stat[str])
        {
                while ((thumbs[str][i]==0 || i>=3) && loop<100)
                { if (i>=3) { i=0; }
                        else
                        { i++;
                        }
                        loop++;
                }

                if (thumb[str][i].complete)
                {        document.getElementById(str).src=thumb[str][i].src;
                        setTimeout("rotatethumb("+(i+1)+",'"+str+"')",500);
                }
                else
                {        setTimeout("rotatethumb("+i+",'"+str+"')",20);
                }
        }


}

function loadthumb(url,str,j)
{        if (stat[str]) { thumb[str][j].src=url; }
}

function startr(str,ta,te)
{        stat[str]=1;
        var num;
        var first=1;

        for(var j=0;j<3;j++)
        { if (thumbs[str][j]==1)
                { thumb[str][j]=new Image();
                        num=j+1;
                        if (first) { first=0; loadthumb(ta+num+te,str,j); }
                        else { setTimeout("loadthumb('"+ta+num+te+"','"+str+"',"+j+")",j*50); }
                }
        }
        rotatethumb(0,str);
}

function endr(str)
{        stat[str]=0;
}

---

and the template code is like this

Code:

---

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

---

But do not work :(

I asked to afunnysite but i didnt' receive an answer yet... It's gonna be a secret like RSS working on IE7?? :(
Let's see...

it works... :P

Post the working code, pls! ;)

just look into xhammster source code. I simply copied from there.

Quote:

---

Originally Posted by Whitenoise

just look into xhammster source code. I simply copied from there.

---

Not helping at all!

Mistake, sorry.

I mean, from that you can understand and copy the external JS but not the right code for thumbnail in Vshare.

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

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

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.

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:

Code:

---

/***** 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:

Code:

---

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

---

---Add below that:

Code:

---

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

---

---Save and close header.tpl

---Open templates/index.tpl

---Look for:

Code:

---

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

---

---Replace with:

Code:

---

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

---

---Add below that:

Code:

---

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

Code:

---

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

---

---Replace with:

Code:

---

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

---

---Add below that:

Code:

---

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

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

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

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.

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.

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

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.

Can you post here? went to your site, live support is off-line what do I need to do to contact you on your site?

did you try the "leave a message?"

It's 4AM where I am right now, I'm not on the live help at this hour, sorry. Just email me, there is also a link for "contact me". Thanks! :D

Sent you my email.

thanks,

Thanks, I'm going to bed after I hit "submit". I'll check on it first thing tomorrow afternoon when I drag myself out of bed. :D

Hey, grynmoors

Any ETA when you will share your imageswap code?

Hotmail blocked the .JS file please resend

Maybe it me but it does not work, do you leave the other javascript in the index.tpl

Hi,
i have added all your code from your website but i carn't get it to work i can get the code fro here to work on my first thumnail but not the rest and the code from your website won't work am i doing something wrong? :D

No, aparantly the original code only works in FireFox as reported by another user in this thread (please read through all the posts). I will update my original post.

IE BLOWS! GET FIREFOX!

Got this to work on all pages front and back, used a new thumbchange.js and new <img tag code> for all pages that have <img src="{$tmburl}/1_

Can you explain it exactly how do fix it on all pages?

can you provide me help on changing the player code I have been tring to add preview image at the end of each video recommend. videos

l1some said

Quote:

---

Got this to work on all pages front and back, used a new thumbchange.js and new <img tag code> for all pages that have <img src="{$tmburl}/1_

---

Sweet, please share. Either email me the js you used or post link to where you got it so we can copy and paste. Thanks. :D :D

For the question about the player, please either do a forum search or start a new thread since that doesn't really relate to this topic Thanks again!!!!!!!!!!!!

I will post .js and "how to" info.
Player change, just tring to pick a brain. already done.

That would be awesome!!!!! Looking forward to it. When you post the code, please use the BBcode for "CODE" around the posted code (sometimes ppl forget to use this).

any updates on this yet??

I was wondering the same thing. What's the URL of the site that this is currently working on, anybody know?

it is currently working on http://afunnysite.com/

I want to know what's the URL of the one that l1some got this to work on...

Quote:

---

Originally Posted by bizpro

any updates on this yet??

---

I was wondering the same thing. afunnysite.com thumbs look good.