PDA

View Full Version : How do they do this?



davidjovan
09-27-2007, 03:07 AM
I was browsing Buy.com on this page:

www.buy.com/retail/searchresults.asp?search_store=1&querytype=comp&qu=acer&loc=101&qxt=comp&display=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
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>
<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>