dynamic image slideshow

spire_bt

I need some scripts(java) who can be modified
The script should be for 3 - 4 images witch will change on mouse-over and stop changing when mouse is not over the image
If anyone has any idea how to do this pls help me
thx.

spire_bt

So nobody knows any javascript example abouth onMouseOver and onMouseOut for more than 3 images???

coldwerturkey

like on the popular porn sites?

if so I've had this one on my machine for a while, don't remember where its from.

<script type='text/javascript'>
function MultiSwap(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;
 }
}
</script>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<title></title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
</head>

<body>
<p>
 <a href='#' ><img src='img1.png' id='link1'></a>
</p>
<script type='text/javascript'>
 new MultiSwap('link1', 500, 'img1.png','img2.png','img3.png');
</script>

</body>
</html>

spire_bt

Ok it's like this
i have
<html>
<head>
<script type="text/javascript">
function mouseOver()
{
document.b1.src ="b_blue.gif";
}
function mouseOut()
{
document.b1.src ="b_pink.gif";
}
</script>
</head>

and i have to implement it in
function template_files_most_popular() {
global $settings, $lang;

if ($settings['most_popular_list'] == '1') {
	echo '
  <div class="content_box_header">
    '. $lang['most_popular'] . '
  </div>'
	;
}
	echo '

<div class="content_box_popular">
<table width="100%" border="0">
<body><tr>
<td>
';
$b=0;
foreach (most_popular() as $popular) {$b++;
if($b!=7){
echo '
<div class="most_popular">
<a href="'. fileurl($popular['id'],$popular['title']) .'"><img src="'.'//',$_SERVER['HTTP_HOST'],'/project/files/image/', $popular['image'] .'" width="'. $settings['image_width'] .'" height="'. $settings['image_height'] .'" title="'. $popular['title'] .'" alt="'. $popular['title'] .'" border="0" /></a>

	    <a href="'. fileurl($popular['id'],$popular['title']) .'" class="file_link">'. $popular['title'] .'</a><br />
		</div>';
	}
	}
	echo ' 
  </td>
 </tr>
</body></table>

</div>';
}
the only problem is that i don't know how to make it for 3 - 4 images not only for 2
pls someone give me some idea for counter to swap images or something

spire_bt

i cant use your script it is to complicated pls review my code post

coldwerturkey

mines not to complicated, its simple. Give it a try.