How do they do this?

**davidjovan** · 09-27-2007, 03:07 AM

I was browsing Buy.com on this page:

http://www.buy.com/retail/searchresu...y=col&dclksa=1

and thought this was a pretty cool script. When you put the mouse on an object, it pops out at you. Is a script like this available on dynamicdrive.com?

I use the Carousel Slideshow II script on my site, but it would be cool if someone could incorporate the code so that the pic pops out at you like at buy.com.

**Jack** · 09-27-2007, 03:44 AM

I don't remember ever seeing this script on DD.
Maybe you can write the webmaster at buy.com (Fantastic domain name) and ask him/her about it.

You'll never know unless you ask.
- Unknown

**gavinv3** · 09-29-2007, 04:18 PM

Hey Mate!
Thats very simple to do - if you are using dreamweaver - All you have to do is use a layer - and then pop it into a timeline - give it frames 1 to 10
- in the first frame set the actual size that appears when the page loads - Then at the 10th keyframe increase the size of the layer [For this you need to add the layer as an object to the time line] - after all is done you need to give it a behaviour - Onmouse over to go to frame 10 - Voila and there you go - try it out

Chao

**djr33** · 09-29-2007, 06:04 PM

Since what version has dreamweaver had a timeline?
Sure you're not talking about flash?

I'm a bit skeptical about DW writing such complex code anyway.

**gavinv3** · 09-29-2007, 06:32 PM

Dreamweaver 4 has a timeline - go to the menu 'Window' -> Timelines

Try it out your will achieve it I have tried it myself

**gavinv3** · 09-30-2007, 05:01 AM

Originally Posted by gavinv3

Dreamweaver 4 has a timeline - go to the menu 'Window' -> Timelines

Try it out your will achieve it I have tried it myself - Pls place a file where you save this as .html file by the name urgent.jpg

HTML Code:

<html>
<head>
<title>Untitled Document</title>

<script language="JavaScript">
<!--
<!--
function MM_reloadPage(init) {  //reloads the window if Nav4 resized
  if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
    document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
  else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
}
MM_reloadPage(true);
// -->

function MM_timelinePlay(tmLnName, myID) { //v1.2
  //Copyright 1997 Macromedia, Inc. All rights reserved.
  var i,j,tmLn,props,keyFrm,sprite,numKeyFr,firstKeyFr,propNum,theObj,firstTime=false;
  if (document.MM_Time == null) MM_initTimelines(); //if *very* 1st time
  tmLn = document.MM_Time[tmLnName];
  if (myID == null) { myID = ++tmLn.ID; firstTime=true;}//if new call, incr ID
  if (myID == tmLn.ID) { //if Im newest
    setTimeout('MM_timelinePlay("'+tmLnName+'",'+myID+')',tmLn.delay);
    fNew = ++tmLn.curFrame;
    for (i=0; i<tmLn.length; i++) {
      sprite = tmLn[i];
      if (sprite.charAt(0) == 's') {
        if (sprite.obj) {
          numKeyFr = sprite.keyFrames.length; firstKeyFr = sprite.keyFrames[0];
          if (fNew >= firstKeyFr && fNew <= sprite.keyFrames[numKeyFr-1]) {//in range
            keyFrm=1;
            for (j=0; j<sprite.values.length; j++) {
              props = sprite.values[j]; 
              if (numKeyFr != props.length) {
                if (props.prop2 == null) sprite.obj[props.prop] = props[fNew-firstKeyFr];
                else        sprite.obj[props.prop2][props.prop] = props[fNew-firstKeyFr];
              } else {
                while (keyFrm<numKeyFr && fNew>=sprite.keyFrames[keyFrm]) keyFrm++;
                if (firstTime || fNew==sprite.keyFrames[keyFrm-1]) {
                  if (props.prop2 == null) sprite.obj[props.prop] = props[keyFrm-1];
                  else        sprite.obj[props.prop2][props.prop] = props[keyFrm-1];
        } } } } }
      } else if (sprite.charAt(0)=='b' && fNew == sprite.frame) eval(sprite.value);
      if (fNew > tmLn.lastFrame) tmLn.ID = 0;
  } }
}

function MM_timelineGoto(tmLnName, fNew, numGotos) { //v2.0
  //Copyright 1997 Macromedia, Inc. All rights reserved.
  var i,j,tmLn,props,keyFrm,sprite,numKeyFr,firstKeyFr,lastKeyFr,propNum,theObj;
  if (document.MM_Time == null) MM_initTimelines(); //if *very* 1st time
  tmLn = document.MM_Time[tmLnName];
  if (numGotos != null)
    if (tmLn.gotoCount == null) tmLn.gotoCount = 1;
    else if (tmLn.gotoCount++ >= numGotos) {tmLn.gotoCount=0; return}
  jmpFwd = (fNew > tmLn.curFrame);
  for (i = 0; i < tmLn.length; i++) {
    sprite = (jmpFwd)? tmLn[i] : tmLn[(tmLn.length-1)-i]; //count bkwds if jumping back
    if (sprite.charAt(0) == "s") {
      numKeyFr = sprite.keyFrames.length;
      firstKeyFr = sprite.keyFrames[0];
      lastKeyFr = sprite.keyFrames[numKeyFr - 1];
      if ((jmpFwd && fNew<firstKeyFr) || (!jmpFwd && lastKeyFr<fNew)) continue; //skip if untouchd
      for (keyFrm=1; keyFrm<numKeyFr && fNew>=sprite.keyFrames[keyFrm]; keyFrm++);
      for (j=0; j<sprite.values.length; j++) {
        props = sprite.values[j];
        if (numKeyFr == props.length) propNum = keyFrm-1 //keyframes only
        else propNum = Math.min(Math.max(0,fNew-firstKeyFr),props.length-1); //or keep in legal range
        if (sprite.obj != null) {
          if (props.prop2 == null) sprite.obj[props.prop] = props[propNum];
          else        sprite.obj[props.prop2][props.prop] = props[propNum];
      } }
    } else if (sprite.charAt(0)=='b' && fNew == sprite.frame) eval(sprite.value);
  }
  tmLn.curFrame = fNew;
  if (tmLn.ID == 0) eval('MM_timelinePlay(tmLnName)');
}

function MM_timelineStop(tmLnName) { //v1.2
  //Copyright 1997 Macromedia, Inc. All rights reserved.
  if (document.MM_Time == null) MM_initTimelines(); //if *very* 1st time
  if (tmLnName == null)  //stop all
    for (var i=0; i<document.MM_Time.length; i++) document.MM_Time[i].ID = null;
  else document.MM_Time[tmLnName].ID = null; //stop one
}

function MM_initTimelines() { //v4.0
    //MM_initTimelines() Copyright 1997 Macromedia, Inc. All rights reserved.
    var ns = navigator.appName == "Netscape";
    var ns4 = (ns && parseInt(navigator.appVersion) == 4);
    var ns5 = (ns && parseInt(navigator.appVersion) > 4);
    document.MM_Time = new Array(1);
    document.MM_Time[0] = new Array(2);
    document.MM_Time["Timeline1"] = document.MM_Time[0];
    document.MM_Time[0].MM_Name = "Timeline1";
    document.MM_Time[0].fps = 15;
    document.MM_Time[0][0] = new String("sprite");
    document.MM_Time[0][0].slot = 1;
    if (ns4)
        document.MM_Time[0][0].obj = document["Layer1"];
    else if (ns5)
        document.MM_Time[0][0].obj = document.getElementById("Layer1");
    else
        document.MM_Time[0][0].obj = document.all ? document.all["Layer1"] : null;
    document.MM_Time[0][0].keyFrames = new Array(1, 15);
    document.MM_Time[0][0].values = new Array(2);
    if (ns5)
        document.MM_Time[0][0].values[0] = new Array("126px", "133px", "141px", "149px", "156px", "164px", "172px", "180px", "187px", "195px", "203px", "210px", "218px", "226px", "234px");
    else
        document.MM_Time[0][0].values[0] = new Array(126,133,141,149,156,164,172,180,187,195,203,210,218,226,234);
    document.MM_Time[0][0].values[0].prop = "width";
    if (!ns4)
        document.MM_Time[0][0].values[0].prop2 = "style";
    if (ns5)
        document.MM_Time[0][0].values[1] = new Array("66px", "81px", "96px", "111px", "126px", "141px", "156px", "172px", "187px", "202px", "217px", "232px", "247px", "262px", "278px");
    else
        document.MM_Time[0][0].values[1] = new Array(66,81,96,111,126,141,156,172,187,202,217,232,247,262,278);
    document.MM_Time[0][0].values[1].prop = "height";
    if (!ns4)
        document.MM_Time[0][0].values[1].prop2 = "style";
    document.MM_Time[0][1] = new String("behavior");
    document.MM_Time[0][1].frame = 1;
    document.MM_Time[0][1].value = "MM_timelineStop()";
    document.MM_Time[0].lastFrame = 15;
    for (i=0; i<document.MM_Time.length; i++) {
        document.MM_Time[i].ID = null;
        document.MM_Time[i].curFrame = 0;
        document.MM_Time[i].delay = 1000/document.MM_Time[i].fps;
    }
}
//-->
</script>
</head>

<body bgcolor="#FFFFFF" text="#000000">
<div id="Layer1" style="position:absolute; width:126px; height:66px; z-index:1; left: 25px; top: 11px"> 
  <table width="100%" border="3" cellspacing="0" cellpadding="0" height="100%">
    <tr>
      <td align="left" valign="top"><img src="images/urgent.jpg" width="100%" height="100%" name="Image1" usemap="#Image1Map" border="0"></td>
    </tr>
  </table>
</div>

<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<map name="Image1Map"> 
  <area shape="rect" coords="0,1,106,91" href="#" onMouseOver="MM_timelinePlay('Timeline1')" onMouseOut="MM_timelineGoto('Timeline1','1')">
</map>
</body>
</html>

Thread: How do they do this?

Thread Tools

Search Thread

How do they do this?

Bookmarks

Bookmarks

Posting Permissions