...

View Full Version : How can i create this?



sorlaker
12-12-2011, 11:43 AM
How can i create an image rotator just like in redtube.com.

When mouseenter it changes the img's src.
When mouseleave it returns the default src.


Ps: sorry abou the website font.hehe

Philip M
12-12-2011, 01:23 PM
Have you tried Google or the Search feature of this forum? Example:- http://odetocode.com/Blogs/scott/archive/2011/08/17/a-tale-of-backgrounds-absolutes-mouseleave-and-mouseenter.aspx

Do you mean "How do I go about writing the necessary code" or do you mean "I want someone to write the code for me"?

mouseenter and mouseleave are supported only by IE and Opera (but not Firefox or Chrome). And jQuery.


It is your responsibility to die() if necessary….. - PHP Manual

vwphillips
12-12-2011, 01:49 PM
<!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" xml:lang="en" lang="en">

<head>
<title></title>
<script type="text/javascript">
/*<![CDATA[*/

function Cycle(obj,ary,ms,cnt){
clearTimeout(obj.to);
if (!obj.lst){
obj.lst=obj.src;
}
if (ary){
cnt=cnt||0;
ms=ms||500;
obj.src=ary[cnt];
cnt=++cnt%ary.length;
obj.to=setTimeout(function(){ Cycle(obj,ary,ms,cnt); },ms);
}
else {
obj.src=obj.lst;
}
}


/*]]>*/
</script>
</head>

<body>
<img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt5.jpg"
onmouseover="Cycle(this,['http://www.vicsjavascripts.org.uk/StdImages/Egypt6.jpg','http://www.vicsjavascripts.org.uk/StdImages/Egypt7.jpg','http://www.vicsjavascripts.org.uk/StdImages/Egypt8.jpg'],1000);"
onmouseout="Cycle(this);"
/>
</body>

</html>

sorlaker
12-12-2011, 03:36 PM
Thanks its worked perfectly! But could u pls explain the code? I couldnt understand ****.

vwphillips
12-12-2011, 04:34 PM
<!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" xml:lang="en" lang="en">

<head>
<title></title>
<script type="text/javascript">
/*<![CDATA[*/

function Cycle(obj,ary,ms,cnt){
clearTimeout(obj.to); // stop the timeout of image object property .to
if (!obj.lst){ // save the original imgage src to the image object property .lst
obj.lst=obj.src;
}
if (ary){ // is an array has been passed
cnt=cnt||0; // start the count at 0
ms=ms||500; // the default ms argument is 500
obj.src=ary[cnt]; // change the image object src
cnt=++cnt%ary.length; // increment the count snd if it = ary.length set to 0
obj.to=setTimeout(function(){ Cycle(obj,ary,ms,cnt); },ms); // assign the timeout to the image object property.to and recall the function
}
else {
obj.src=obj.lst; // change the image object src to .lst
}
}


/*]]>*/
</script>
</head>

<body>
<img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt5.jpg"
onmouseover="Cycle(this,['http://www.vicsjavascripts.org.uk/StdImages/Egypt6.jpg','http://www.vicsjavascripts.org.uk/StdImages/Egypt7.jpg','http://www.vicsjavascripts.org.uk/StdImages/Egypt8.jpg'],1000);"
onmouseout="Cycle(this);"
/>
</body>

</html>

Krupski
12-12-2011, 05:02 PM
How can i create an image rotator just like in redtube.com.


You say "Let there be rotation".

Oh wait... only God can do that.

Nevermind. :)



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum