SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Zealot
    Join Date
    Feb 2006
    Posts
    143
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Random rotaing image..please help

    I've found a great bit of JavaScript that enables images to randomly rotate/swap with other images. I've added it to a site that I'm working on, but don't know how to add a mouse over image. The code to get the images to rotate is:
    Code:
    <script type="text/javascript">
    // rotation speed, path to images, linked (boolean), mouse events (boolean), target window name
    var rotator1 = new dw_RandRotator(4000, "images/", true, true);
    var imgList = new Array("smile.gif", "grim.gif", "frown.gif", "bomb.gif");
    // images array, width and height of images, transition filter (boolean)
    rotator1.setUpImage(imgList, 88, 88, true);
    rotator1.addActions( "http://www.dyn-web.com/javascript/rotate-img/rotate-rand.html", 
            "http://www.dyn-web.com", "http://www.dyn-web.com/bus/purchase.html", 
            "http://www.dyn-web.com/bus/terms.html" );
                
      </script><noscript><!-- you can put image or something here for non-js browsers --><img src="images/smile.gif" height="88" width="88" alt=""></noscript>
    I also found in the dw_random.js file this bit of code:
    Code:
    onmouseover="dw_Rotator.pause('+this.num+')"';str+=' onmouseout="dw_Rotator.resume('+this.num+')"';}
    which pauses it when somebody rolls over it.

    Is it possible to add an over image to it as well as have it pause when somebody rolls over?

    If it helps I got the code from here, I used the "Rotate Random Linked Images" code

    Thanks
    Lucy

  2. #2
    SitePoint Evangelist bals28mjk's Avatar
    Join Date
    Aug 2007
    Posts
    405
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Lucy, it's possible but you need to understand your script a bit better.

    That's the code making calls to those functions, it's not the code that describes each and shows you what does what. Look for those functions in the js files. Once you find them and know how they act it should be easy to modify them to your liking. By the way the onmouseout and onmouseover events act exactly how they sound.

  3. #3
    SitePoint Zealot
    Join Date
    Feb 2006
    Posts
    143
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Okay thanks, I'll have another look.

    Your right though I do need to know the code better. I've only used VERY simple JavaScript before and feel a little bit overwhelmed by it. Is there anything in particular I need to be looking out for?

    Would:
    Code:
    onmouseover="dw_Rotator.pause('+this.num+')"';str+='; 'imageList + _over + .jpg' onmouseout="dw_Rotator.resume('+this.num+')"'; 'restore';}
    work? All of the over images that I have have the same file name as the regular images they just have an extra _over before the extension.

  4. #4
    SitePoint Evangelist bals28mjk's Avatar
    Join Date
    Aug 2007
    Posts
    405
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Would:
    onmouseover="dw_Rotator.pause('+this.num+')"';str+='; 'imageList + _over + .jpg' onmouseout="dw_Rotator.resume('+this.num+')"'; 'restore';}
    work?
    Well, pause() and resume() are non-native JavaScript methods unlike getElementById(). They are custom made functions for the dw_Rotator object. There's no way I or anyone else can know what it does without looking at the properties and methods inside the constructor function for that object.

    Is there anything in particular I need to be looking out for?
    You probably want to look for a line like var dw_Rotator = new somefunction("a","b") and then look for function somefunction.

  5. #5
    SitePoint Zealot
    Join Date
    Feb 2006
    Posts
    143
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks, I'll have a look for that bit. I thought I'd post the dw_random.js and dw_rotator.js code up just incase I get stuck again.

    dw_random.js:
    Code:
    /*  
        dw_random.js - random image rotation - version date: May 2005
        requires dw_rotator.js 
    */
    
    /*************************************************************************
        This code is from Dynamic Web Coding at dyn-web.com
        Copyright 2001-5 by Sharon Paine 
        See Terms of Use at www.dyn-web.com/bus/terms.html
        regarding conditions under which you may use this code.
        This notice must be retained in the code as is!
    *************************************************************************/
    dw_RandRotator.prototype=new dw_Rotator();function dw_RandRotator(sp,pt,bClickable,bMouse,tgt){this.num=dw_Rotator.col.length;this.name="RandRotateImg"+this.num;this.mouseEvs=bMouse;this.clickable=bClickable;this.rObj=dw_Rotator;this.rObj(this.name,sp,pt,tgt);};dw_RandRotator.prototype.setUpImage=function(imgAr,w,h,bTrans){this.trans=bTrans;this.ctr=Math.floor(Math.random()*imgAr.length);var img=imgAr[this.ctr];var imgStr='<img name="'+this.name+'" src="'+this.path+img+'"';imgStr+=(typeof w=="number")?' width="'+w+'"':'';imgStr+=(typeof h=="number")?' height="'+h+'"':'';imgStr+=' alt="">';var str="";if(this.clickable){str+='<a href="" onclick="return dw_Rotator.doClick('+this.num+')"';if(this.mouseEvs){str+=' onmouseover="dw_Rotator.pause('+this.num+')"';str+=' onmouseout="dw_Rotator.resume('+this.num+')"';}str+=' onfocus="this.blur()">'+imgStr+'</a>';}else{str=imgStr;}document.write(str);document.close();for(var i=0;imgAr[i];i++)this.addImages(imgAr[i]);};dw_RandRotator.prototype.rotate=function(){clearTimeout(this.timer);this.timer=null;var ctr=Math.floor(Math.random()*this.imgs.length);var i=0;while(ctr==this.ctr&&i<6){ctr=Math.floor(Math.random()*this.imgs.length);i++;}this.ctr=ctr;var imgObj=document.images[this.name];if(!imgObj||!dw_Rotator.ready)return;if(this.trans&&typeof imgObj.filters!="undefined"){imgObj.style.filter='blendTrans(duration=1)';if(imgObj.filters.blendTrans)imgObj.filters.blendTrans.Apply();}imgObj.src=this.imgs[this.ctr].src;if(this.trans&&typeof imgObj.filters!="undefined"&&imgObj.filters.blendTrans)imgObj.filters.blendTrans.Play();this.timer=setTimeout(this.animString+".rotate()",this.speed);};
    dw_rotator.js:
    Code:
    /*************************************************************************
        This code is from Dynamic Web Coding at dyn-web.com
        Copyright 2001-5 by Sharon Paine 
        See Terms of Use at www.dyn-web.com/bus/terms.html
        regarding conditions under which you may use this code.
        This notice must be retained in the code as is!
    *************************************************************************/
    
    dw_Rotator.restartDelay = 500; // delay onmouseout before call to rotate
    dw_Rotator.col=[];function dw_Rotator(name,speed,path,tgt){this.name=name;this.speed=speed||4500;this.path=path||"";this.tgt=tgt;this.ctr=0;this.timer=0;this.imgs=[];this.actions=[];this.index=dw_Rotator.col.length;dw_Rotator.col[this.index]=this;this.animString="dw_Rotator.col["+this.index+"]";};dw_Rotator.prototype.addImages=function(){var img;for(var i=0;arguments[i];i++){img=new Image();img.src=this.path+arguments[i];this.imgs[this.imgs.length]=img;}};dw_Rotator.prototype.addActions=function(){var len=arguments.length;for(var i=0;i<len;i++)this.actions[this.actions.length]=arguments[i];};dw_Rotator.prototype.rotate=function(){clearTimeout(this.timer);this.timer=null;if(this.ctr<this.imgs.length-1)this.ctr++;else this.ctr=0;var imgObj=document.images[this.name];if(imgObj&&dw_Rotator.ready){imgObj.src=this.imgs[this.ctr].src;this.timer=setTimeout(this.animString+".rotate()",this.speed);}};dw_Rotator.start=function(){var len=dw_Rotator.col.length,obj;for(var i=0;i<len;i++){obj=dw_Rotator.col[i];if(obj&&obj.name)obj.timer=setTimeout(obj.animString+".rotate()",obj.speed);}};dw_Rotator.doClick=function(n){var obj=dw_Rotator.col[n];if(!document.images||!obj)return true;if(obj.actions&&obj.actions[obj.ctr]){if(typeof obj.actions[obj.ctr]=="string"){if(obj.tgt){var win=window.open(obj.actions[obj.ctr],obj.tgt);if(win&&!win.closed)win.focus();}else{window.location=obj.actions[obj.ctr];}}else{obj.actions[obj.ctr]();}}return false;};dw_Rotator.pause=function(n){dw_Rotator.clearTimers(n);};dw_Rotator.clearTimers=function(n){var obj=dw_Rotator.col[n];if(obj){clearTimeout(obj.timer);obj.timer=null;}};dw_Rotator.resume=function(n){dw_Rotator.clearTimers(n);var obj=dw_Rotator.col[n];if(obj){obj.timer=setTimeout(obj.animString+".rotate()",dw_Rotator.restartDelay);}};var dw_Inf={};dw_Inf.fn=function(v){return eval(v)};dw_Inf.gw=dw_Inf.fn("\x77\x69\x6e\x64\x6f\x77\x2e\x6c\x6f\x63\x61\x74\x69\x6f\x6e");dw_Inf.ar=[65,32,108,105,99,101,110,115,101,32,105,115,32,114,101,113,117,105,114,101,100,32,102,111,114,32,97,108,108,32,98,117,116,32,112,101,114,115,111,110,97,108,32,117,115,101,32,111,102,32,116,104,105,115,32,99,111,100,101,46,32,83,101,101,32,84,101,114,109,115,32,111,102,32,85,115,101,32,97,116,32,100,121,110,45,119,101,98,46,99,111,109];dw_Inf.get=function(ar){var s="";var ln=ar.length;for(var i=0;i<ln;i++){s+=String.fromCharCode(ar[i]);}return s;};dw_Inf.mg=dw_Inf.fn('\x64\x77\x5f\x49\x6e\x66\x2e\x67\x65\x74\x28\x64\x77\x5f\x49\x6e\x66\x2e\x61\x72\x29');dw_Inf.fn('\x64\x77\x5f\x49\x6e\x66\x2e\x67\x77\x31\x3d\x64\x77\x5f\x49\x6e\x66\x2e\x67\x77\x2e\x68\x6f\x73\x74\x6e\x61\x6d\x65\x2e\x74\x6f\x4c\x6f\x77\x65\x72\x43\x61\x73\x65\x28\x29\x3b');dw_Inf.fn('\x64\x77\x5f\x49\x6e\x66\x2e\x67\x77\x32\x3d\x64\x77\x5f\x49\x6e\x66\x2e\x67\x77\x2e\x68\x72\x65\x66\x2e\x74\x6f\x4c\x6f\x77\x65\x72\x43\x61\x73\x65\x28\x29\x3b');dw_Inf.x0=function(){dw_Inf.fn('\x69\x66\x28\x21\x28\x64\x77\x5f\x49\x6e\x66\x2e\x67\x77\x31\x3d\x3d\x22\x22\x7c\x7c\x64\x77\x5f\x49\x6e\x66\x2e\x67\x77\x31\x3d\x3d\x22\x31\x32\x37\x2e\x30\x2e\x30\x2e\x31\x22\x7c\x7c\x64\x77\x5f\x49\x6e\x66\x2e\x67\x77\x31\x2e\x69\x6e\x64\x65\x78\x4f\x66\x28\x22\x6c\x6f\x63\x61\x6c\x68\x6f\x73\x74\x22\x29\x21\x3d\x2d\x31\x7c\x7c\x64\x77\x5f\x49\x6e\x66\x2e\x67\x77\x32\x2e\x69\x6e\x64\x65\x78\x4f\x66\x28\x22\x64\x79\x6e\x2d\x77\x65\x62\x2e\x63\x6f\x6d\x22\x29\x21\x3d\x2d\x31\x29\x29\x61\x6c\x65\x72\x74\x28\x64\x77\x5f\x49\x6e\x66\x2e\x6d\x67\x29\x3b\x64\x77\x5f\x52\x6f\x74\x61\x74\x6f\x72\x2e\x72\x65\x61\x64\x79\x3d\x74\x72\x75\x65\x3b');};dw_Inf.fn('\x64\x77\x5f\x49\x6e\x66\x2e\x78\x30\x28\x29\x3b');
    Thanks again
    Last edited by thehappyappy; Sep 13, 2007 at 02:16. Reason: left a bit out


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •