Sequence mouseover

**Denn** · 02-12-2012, 12:06 PM

Hi there.

I'm trying to make a little valentines website 'card' for my ladyfriend. I was going to be clever about it and use javascript, but as it turns out I'm really not that clever with it anymore. I need a single image to change into a different image on each following mouseover event. A planned 'route' of images, for exameple A -> B -> C -> D -> E -> A -> F - > B -> .. and so on.

I thought I could do this, but I'm getting nowhere. I did try to look for similar attempts to make this, but it's kind of hard to find since 'mouseover' is such a generic search term.

There's little point for me in posting my code so far.. it's just a long list of imagecodes and a little mouseover script that would probably make you laugh.

Thanks.

**djr33** · 02-12-2012, 12:41 PM

Here's a rough outline:
1. Create an array to store all of your images.
2. If necessary, create a second array if you want to reference them in an unpredictable order (not A, B, C, but something like A, B, A, C, ... as in your example above).
3. Add an onmouseover attribute to your image tag, with a javascript event that triggers a function.
4. Define that function to grab the next image from the array and display it, by changing the course of 'this' (the special keyword for the current image, as passed to the function). You might want to do this by storing a (global) variable to keep track of which item in the array you're currently using, or you could figure that out another way.

However, you might want to consider using onclick instead of onmouseover-- might be a better user experience.

Is that enough information for you to start? I don't have time at the moment to write out all of the code, but it sounds like with some more information you may be able to do it yourself. Let us know where you get stuck.

Perhaps a simpler alternative to all of this would be to use any slideshow you'd like and simply attach an onmouseover (or onclick) event to the slideshow (eg, the image or the div containing the image) so that it automatically skips to the next image on that event, rather than using a timer and/or manual buttons. The difficulty is that it would require you to modify an existing script, which can be difficult. But it's something you could try.
The only other problem is that you can't really go "out of order" with a slideshow like that (so you would only have the A, B, C option for ordering, not something more complicated.) But of course you can list the same image two times if you'd like. It's slightly less efficient, but not something to worry about for this project I don't think.

**Denn** · 02-12-2012, 12:52 PM

It is enough information actually, no need for further script. My javascript is quite rusty but I am finally getting somewhere now. Thank you very much.

**vwphillips** · 02-12-2012, 03:07 PM

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" xml:lang="en" lang="en">

<head>
  <title></title>
<style type="text/css">
/*<![CDATA[*/

#img {
  position:absolute;overflow:hidden;left:200px;top:100px;width:200px;height:150px;background-Color:#FFFFCC;border:solid red 1px;
}



/*]]>*/
</style></head>

<body>

 <div id="img" >
  <a href="#"><img class="card" src="http://www.vicsjavascripts.org.uk/StdImages/Egypt5.jpg" /></a>
  <img title="Egypt 6" class="card" src="http://www.vicsjavascripts.org.uk/StdImages/Egypt6.jpg" />
  <img title="Egypt 7" class="card" src="http://www.vicsjavascripts.org.uk/StdImages/Egypt7.jpg" />
  <img class="card" src="http://www.vicsjavascripts.org.uk/StdImages/Egypt8.jpg" />
 </div>



<script type="text/javascript">
/*<![CDATA[*/
// Flip Image (12-Febuary-2012)
// by Vic Phillips - http://www.vicsjavascripts.org.uk/


function zxcFlip(o){
 var oop=this,mde=o.Mode,mde=typeof(mde)=='string'&&mde.charAt(0).toUpperCase()=='V'?['top','height','offsetTop','offsetHeight']:['left','width','offsetLeft','offsetWidth'],obj=document.getElementById(o.ID),imgs=obj.getElementsByTagName('IMG'),src=[],ms=o.FlipDuration,sz=obj[mde[3]],ary=[],lgth,lk=document.createElement('A'),z0=0,z1=0;
 obj.appendChild(lk);
 for (;z0<imgs.length;z0++){
  ary[z0]=imgs[z0];
  src[z0]=[imgs[z0].src,imgs[z0].parentNode.href,imgs[z0].title];
 }
 lgth=ary.length;
 for (;z1<lgth;z1++){
  ary[z1].style.position='absolute';
  ary[z1].style.left=(z1>1?-3000:0)+'px';
  ary[z1].style.top='0px';
  ary[z1].style.width=obj.offsetWidth+'px';
  ary[z1].style.height=obj.offsetHeight+'px';
  ary[z1].style.borderWidth='0px';
  ary[z1].src=src[lgth-1][0];
  ary[z1].removeAttribute('title');
  lk.appendChild(ary[z1]);
 }
 ary[1].style[mde[1]]='0px';
 ary[1].style[mde[0]]=sz/2+'px';
 oop.obj=obj;
 oop.lk=lk;
 oop.mde=mde;
 oop.sz=sz;
 oop.ary=ary;
 oop.srcary=src;
 oop.cnt=lgth-1;
 oop.nu=1;
 oop.links();
 oop.ms=typeof(ms)=='number'?ms/2:500;
 oop.addevt(obj,'mouseover','next');
}

zxcFlip.prototype={

 next:function(e){
  if (this.ckevt(e)){
   this.flip(this.nu==0?1:0,true);
  }
 },

 flip:function(nu,auto){
  var oop=this,mde=oop.mde,ary=oop.ary,sz=oop.sz,max=Math.max(ary[0][mde[3]],ary[1][mde[3]]),ms=oop.ms*max/sz;
  clearTimeout(oop.to1);
  clearTimeout(oop.to2);
   oop.nu=nu;
   oop.lk.removeAttribute('title');
   oop.animate(mde[1],ary,nu,ary[nu][mde[3]],0,new Date(),ms,'to1',false);
   oop.animate(mde[0],ary,nu,ary[nu][mde[2]],sz/2,new Date(),ms,'to2',true);
 },

 animate:function(mde,ary,nu,f,t,srt,mS,to,ud){
  var oop=this,srcary=oop.srcary,ms=new Date().getTime()-srt,now=(t-f)/mS*ms+f;
  if (isFinite(now)){
   ary[nu].style[mde]=Math.max(now,0)+'px';
  }
  if (ms<mS){
    oop[to]=setTimeout(function(){ oop.animate(mde,ary,nu,f,t,srt,mS,to,ud); },10);
  }
  else {
   ary[nu].style[mde]=t+'px';
   if (ud){
    nu=nu==0?1:0;
    mde=oop.mde;
    oop.cnt=++oop.cnt%srcary.length;
    ary[nu].src=srcary[oop.cnt][0];
    oop.links();
    oop.animate(mde[1],ary,nu,0,oop.sz,new Date(),mS,'to1',false);
    oop.animate(mde[0],ary,nu,oop.sz/2,0,new Date(),mS,'to2',false);
   }
  }
 },

 ckevt:function(e){
  e.cancelBubble=true;
  if (e.stopPropagation){
   e.stopPropagation();
  }
  var eobj=e.target?e.target:e.srcElement;
  if (eobj.nodeType==3){
   eobj=eobj.parentNode;
  }
  eobj=(e.relatedTarget)?e.relatedTarget:(e.type=='mouseout')?e.toElement:e.fromElement;
  if (!eobj||eobj==this.obj){
   return false;
  }
  while (eobj.parentNode){
   if (eobj==this.obj){
    return false;
   }
   eobj=eobj.parentNode;
  }
  return true;
 },

 addevt:function(o,t,f,p){
  var oop=this;
  if (o.addEventListener) o.addEventListener(t,function(e){ return oop[f](e,p);}, false);
  else if (o.attachEvent) o.attachEvent('on'+t,function(e){ return oop[f](e,p); });
 },

 links:function(){
  var oop=this,srcary=oop.srcary,cnt=oop.cnt;
  oop.obj.removeAttribute('title');
  oop.lk.removeAttribute('href');
  if (srcary[cnt][1]){
   oop.lk.href=srcary[cnt][1];
  }
  if (srcary[cnt][2]){
   oop.obj.title=srcary[cnt][2];
  }
 }

}

new zxcFlip({
 ID:'img',          // the unique ID name of the parent node.                   (string)
 Mode:'horizontal', //(optional) mode of execution, 'horizontal' or 'vertical'. (number, default = 'horizontal')
 FlipDuration:1200   //(optional) the flip duration in milli seconds.            (number, default = 1000)
});

//new zxcFlip({
// ID:'img2',
// Mode:'vertical'
//});
/*]]>*/
</script>

</body>

</html>

Thread: Sequence mouseover

Thread Tools

Search Thread

Sequence mouseover

Bookmarks

Bookmarks

Posting Permissions