SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Member
    Join Date
    Dec 2006
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Need an explination of a javascript

    I have been looking for this scipt for a long time. It is a mouse over script that displays a floating image above it. I must admit that I am a basic HTML novice but I get by. I am more of a PhotoShop guy that is just getting into building websites. With that out of the way I need someones help with this script. If it is the one I think it is it is the script that does this: http://www.istockphoto.com/file_sear...=cars&x=14&y=7

    If someone could explain it in very basic terms I would appreciative. You will notice my feeble attempt to make it work.

    Thanks
    Dan

    "The following is the authors notes"

    Here is the code for the "Floating Image".

    Copy/paste this code at the end of your html page,

    but BEFORE the </body> tag.

    This code is for using more than one floating image. Where you see "Name of Image", put the name of the floating image. Be sure to keep the "number" of that image in the code, in it's proper position.

    You can add or remove the "Image0=new Image();
    Image0.src=grphcs[0]="Name of Picture1 Here.gif";" to whatever number of floating images you are using.

    Here's the code:










    <script language="JavaScript">
    <!-- fall Script by kurt.grigg@virgin.net
    //Pre-load your image below!
    Image0=new Image();
    Image0.src="images/img_1.jpg";
    Image1=new Image();
    Image1.src="";
    Image2=new Image();
    Image2.src="";
    Image3=new Image();
    Image3.src="dl.gif";
    Image4=new Image();
    Image4.src="el.gif";
    Image5=new Image();
    Image5.src="fl.gif";

    grphcs=new Array(6)
    grphcs[0]="images/img_1.jpg"
    grphcs[1]=""
    grphcs[2]=""
    grphcs[3]="dl.gif"
    grphcs[4]="el.gif"
    grphcs[5]="fl.gif"



    Amount=10; //Smoothness depends on image file size, the smaller the size the more you can use!
    Ypos=new Array();
    Xpos=new Array();
    Speed=new Array();
    Step=new Array();
    Cstep=new Array();
    ns=(document.layers)?1:0;

    if (ns){
    for (i = 0; i < Amount; i++){
    var P=Math.floor(Math.random()*grphcs.length);
    rndPic=grphcs[P];
    document.write("<LAYER NAME='sn"+i+"' LEFT=0 TOP=0><img src="+rndPic+"></LAYER>");
    }
    }
    else{
    document.write('<div style="position:absolute;top:0px;left:0px"><div style="position:relative">');
    for (i = 0; i < Amount; i++){
    var P=Math.floor(Math.random()*grphcs.length);
    rndPic=grphcs[P];
    document.write('<img id="si" src="'+rndPic+'" style="position:absolute;top:0px;left:0px">');
    }
    document.write('</div></div>');
    }
    WinHeight=(document.layers)?window.innerHeight:window.document.body.clientHeight;
    WinWidth=(document.layers)?window.innerWidth:window.document.body.clientWidth;
    for (i=0; i < Amount; i++){
    Ypos[i] = Math.round(Math.random()*WinHeight);
    Xpos[i] = Math.round(Math.random()*WinWidth);
    Speed[i]= Math.random()*5+3;
    Cstep[i]=0;
    Step[i]=Math.random()*0.1+0.05;
    }
    function fall(){
    var WinHeight=(document.layers)?window.innerHeight:window.document.body.clientHeight;
    var WinWidth=(document.layers)?window.innerWidth:window.document.body.clientWidth;
    var hscrll=(document.layers)?window.pageYOffset:document.body.scrollTop;
    var wscrll=(document.layers)?window.pageXOffset:document.body.scrollLeft;
    for (i=0; i < Amount; i++){
    sy = Speed[i]*Math.sin(90*Math.PI/180);
    sx = Speed[i]*Math.cos(Cstep[i]);
    Ypos[i]+=sy;
    Xpos[i]+=sx;
    if (Ypos[i] > WinHeight){
    Ypos[i]=-60;
    Xpos[i]=Math.round(Math.random()*WinWidth);
    Speed[i]=Math.random()*5+3;
    }
    if (ns){
    document.layers['sn'+i].left=Xpos[i];
    document.layers['sn'+i].top=Ypos[i]+hscrll;
    }
    else{
    si[i].style.pixelLeft=Xpos[i];
    si[i].style.pixelTop=Ypos[i]+hscrll;
    }
    Cstep[i]+=Step[i];
    }
    setTimeout('fall()',10);
    }
    //-->
    </script>

  2. #2
    SitePoint Addict jtrelfa's Avatar
    Join Date
    Oct 2004
    Location
    Troy, Mi
    Posts
    231
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The code you've posted here is a bit outdated - where did you get it? It seems to make the assumption that your website visitors are either using Netscape 4 or IE - but kind of ignores anything else. Have you considered testing this out with Firefox? It has some great extensions for debugging, etc.


    You may also want to consider grabbing the code on istock and studying what it does to get an idea on how to handle it on your own.

  3. #3
    SitePoint Member
    Join Date
    Dec 2006
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yes I will look at I stocks script but I would rather purchase the script, find it in a book (I'm off to Borders this afternoon) or get help on forums like this. I do appreciate your post. BTW, in my post I did indicate that I am less than weak in Java but with some help I can get it to work on my site.
    Thanks
    Dan
    Last edited by majicmajic; Dec 8, 2006 at 11:56.

  4. #4
    American't awestmoreland's Avatar
    Join Date
    Sep 2002
    Location
    Grand Rapids, MI
    Posts
    1,168
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I haven't compared your code to mine, but I've seen the question asked about the iStock script a few times on SitePoint. Here's my version.

    Very basically, the larger image is in a hidden div. When the mouse hovers over the thumbnail the div is made visible, and hidden when the mouse moves off again. I haven't examined the code to understand how the large image follows the mouse. You don't need to if you know what inputs make the desired outputs


    Andy

    P.S.
    If I were you, I would edit your post above to remove your email address and do the same to your code. Unless you like spam
    From the English nation to a US location.


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
  •