Example 5-1: view see code
Example 5-2: view see code
(122K)
Example 5-1
<html>
<head>
<title>Stitch Store</title>
<style type="text/css">
#header {position:absolute;left:25;top:28;}
#store {position:absolute;left:275;top:43;}
#blackLine {position:absolute;left:17;top:111;}
#home {position:absolute;left:660;top:12;}
#shirtsHd {position:absolute;left:21;top:161;}
#shirtGreen {position:absolute;left:136;top:161;}
#shirtOrange {position:absolute;left:232;top:161;}
#shirtPurp {position:absolute;left:328;top:161;}
#sweatshirtsHd {position:absolute;left:21;top:277;}
#sweatPurp {position:absolute;left:136;top:277;}
#sweatOrange {position:absolute;left:280;top:277;}
#stuffHd {position:absolute;left:21;top:387;}
#stuffCap {position:absolute;left:136;top:387;}
#stuffMug {position:absolute;left:251;top:387;}
#stuffMartini {position:absolute;left:328;top:387;}
#dragStuff {position:absolute;left:63;top:490;}
#cart {position:absolute;left:462;top:142;}
</style>
</head>
<body bgcolor="#FFFFFF" onLoad="init()" marginheight="0" marginwidth="0">
<div id="header">
<img src="images/stitch.gif" alt="Stitch" width="211" height="66">
</div>
<div id="store">
<img src="images/store.gif" alt="Store" width="198" height="75">
</div>
<div id="blackLine">
<img src="images/black_line.gif" alt="black line" width="700" height="1">
</div>
<div id="home">
<img src="images/home.gif" alt="home" width="54" height="26">
</div>
<div id="shirtsHd">
<img src="images/shirts.gif" alt="Shirts" width="115" height="39">
</div>
<div id="shirtGreen">
<img src="images/shirt_green.gif" alt="green shirt" width="96" height="78">
</div>
<div id="shirtOrange">
<img src="images/shirt_orange.gif" alt="orange shirt" width="96" height="78">
</div>
<div id="shirtPurp">
<img src="images/shirt_purple.gif" alt="purple shirt" width="97" height="78">
</div>
<div id="sweatshirtsHd">
<img src="images/sweatshirts.gif" alt="Sweatshirts" width="115" height="72">
</div>
<div id="sweatPurp">
<img src="images/sweat_purple.gif" alt="purple sweatshirt" width="144" height="72">
</div>
<div id="sweatOrange">
<img src="images/sweat_orange.gif" alt="orange sweatshirt" width="145" height="72">
</div>
<div id="stuffHd">
<img src="images/swellstuff.gif" alt="Swell Stuff" width="115" height="72">
</div>
<div id="stuffCap">
<img src="images/cap.gif" alt="Cap" width="115" height="72">
</div>
<div id="stuffMug">
<img src="images/mug.gif" alt="Mug" width="77" height="72">
</div>
<div id="stuffMartini">
<img src="images/martini.gif" alt="Martini" width="97" height="72">
</div>
<div id="dragStuff">
<img src="images/drag.gif" alt="Drag a product!" width="547" height="59">
</div>
<div id="cart">
<img src="images/cart.gif" alt="Your Shopping Cart" width="214" height="331">
</div>
</body>
</html>
Example 5-2
<html>
<head>
<title>Stitch Store</title>
<style type="text/css">
#header {position:absolute;left:25;top:28;}
#store {position:absolute;left:275;top:43;}
#blackLine {position:absolute;left:17;top:111;}
#home {position:absolute;left:660;top:12;}
#shirtsHd {position:absolute;left:21;top:161;}
#shirtGreen {position:absolute;left:136;top:161;}
#shirtOrange {position:absolute;left:232;top:161;}
#shirtPurp {position:absolute;left:328;top:161;}
#sweatshirtsHd {position:absolute;left:21;top:277;}
#sweatPurp {position:absolute;left:136;top:277;}
#sweatOrange {position:absolute;left:280;top:277;}
#stuffHd {position:absolute;left:21;top:387;}
#stuffCap {position:absolute;left:136;top:387;}
#stuffMug {position:absolute;left:251;top:387;}
#stuffMartini {position:absolute;left:328;top:387;}
#dragStuff {position:absolute;left:63;top:490;}
#cart {position:absolute;left:462;top:142;}
</style>
<script language="JavaScript">
/*
** Some needed global variables
*/
selectedProduct = null
layerNameArray = new Array("shirtGreen","shirtOrange","shirtPurp","sweatPurp","sweatOrange","stuffCap","stuffMug","stuffMartini");
/*
** still need to do a bit of browser checking
*/
browser = navigator.appName;
browserNum = parseInt(navigator.appVersion);
N4 = false;
N6 = false;
IE = false;
/*
** Decide which browser the user is using
*/
if ((browser == "Netscape") && (browserNum < 5)) N4 = true;
else if ((browser == "Netscape") && (browserNum >= 5)) N6 = true;
else IE = true;
// Set zIndex property
function setzIndex(product, zOrder)
{
if (N6)
{
product.style.zIndex = zOrder
}
else
{
product.zIndex = zOrder
}
}
// Position an object at a specific pixel coordinate
function shiftTo(product, x, y)
{
if (N4)
{
product.moveTo(x,y)
}
else if (N6)
{
product.style.left = x
product.style.top = y
}
else
{
product.pixelLeft = x
product.pixelTop = y
}
}
function setSelectedElem(e)
{
if (N4)
{
clickX = e.pageX
clickY = e.pageY
// start looking at all the layers on the page,
// from the top layer down
for (i=document.layers.length - 1; i >= 0; i--)
{
testObj = document.layers[i]
// see if user clicked on an appropriate layer or not
for(j=0;j<layerNameArray.length;j++)
{
if ((testObj.id == layerNameArray[j]) &&
(clickX > testObj.left) &&
(clickX < testObj.left + testObj.clip.width) &&
(clickY > testObj.top) &&
(clickY < testObj.top + testObj.clip.height))
{
selectedProduct = testObj
setzIndex(selectedProduct, 100)
return
}
}
}
}
else
{
imgObj = window.event.srcElement
testObj = imgObj.parentElement.style
// see if the user clicked on a valid layer or not
layerName = imgObj.parentElement.id
for(i=0;i<layerNameArray.length;i++)
{
if (layerName == layerNameArray[i] && testObj)
{
selectedProduct = testObj
setzIndex(selectedProduct,100)
return
}
}
}
}
function dragProduct(e)
{
if (selectedProduct)
{
if (IE)
{
x = window.event.clientX - offsetX
y = window.event.clientY - offsetY
}
else
{
x = e.pageX - offsetX
y = e.pageY - offsetY
}
shiftTo(selectedProduct,x,y)
// prevent further system response to dragging
return false
}
}
function grabProduct(e)
{
if (N6)
{
offsetX = e.layerX
offsetY = e.layerY
selectedProduct = this
setzIndex(selectedProduct,100)
}
else
{
setSelectedElem(e)
if (selectedProduct)
{
if (N4)
{
offsetX = e.pageX - selectedProduct.left
offsetY = e.pageY - selectedProduct.top
}
else
{
offsetX = window.event.offsetX
offsetY = window.event.offsetY
}
}
// prevent further processing of mouseDown event so
// that the Macintosh doesn't display the contextual
// menu and lets dragging work normally.
return false
}
}
function releaseProduct(e)
{
if (selectedProduct)
{
/*
** Here, we want to find out where the user let go
** of the mouse button and whether that point
** is on top of the shopping cart or not
*/
// Determine where user released mouse button
// and define the shopping cart object
if (IE)
{
releaseX = window.event.clientX
releaseY = window.event.clientY
// Have to hard-code this for IE - Windows
// For some reason, it doesn't see the "left" or "top"
// property until it's explicity set like this
document.all['cart'].style.left = 462
document.all['cart'].style.top = 142
cartObj = document.all["cart"].style
cartWidth = document.all["cart"].offsetWidth
cartHeight = document.all["cart"].offsetWidth
cartLeft = cartObj.pixelLeft
cartTop = cartObj.pixelTop
}
else
{
releaseX = e.pageX
releaseY = e.pageY
if (N6)
{
// have to hard-code this for Netscape 6
// For some reason, it doesn't see the "left" or "top"
// property until it's explicity set like this
document.getElementById("cart").style.left = 462
document.getElementById("cart").style.top = 142
cartObj = document.getElementById("cart").style
cartWidth = document.getElementById("cart").offsetWidth
cartHeight = document.getElementById("cart").offsetHeight
cartLeft = parseInt(document.getElementById("cart").style.left)
cartTop = parseInt(document.getElementById("cart").style.top)
}
else
{
cartObj = document.layers["cart"]
cartWidth = document.layers["cart"].clip.width
cartHeight = document.layers["cart"].clip.height
cartLeft = document.layers["cart"].left
cartTop = document.layers["cart"].top
}
}
// See if user released inside of cart object
if ((releaseX > cartLeft) &&
(releaseX < cartLeft + cartWidth) &&
(releaseY > cartTop) &&
(releaseY < cartTop + cartHeight))
{
alert("release in cart");
/*
** NOTE TO READER
** insert code here to go to add_to_cart.cgi
** that code would reload the page, which would result in
** a line inside the shopping cart and all the items
** would be in their original places
*/
}
// turn off product
setzIndex(selectedProduct, 0)
selectedProduct = null
}
}
function attachEvent(obj)
{
obj.addEventListener("mousedown",grabProduct,false)
obj.addEventListener("mouseup",releaseProduct,false)
}
function init()
{
if(N6)
{
/*
** need to specify objects and call DragManager
*/
shirtGreen = document.getElementById("shirtGreen")
shirtOrange = document.getElementById("shirtOrange")
shirtPurp = document.getElementById("shirtPurp")
sweatPurp = document.getElementById("sweatPurp")
sweatOrange = document.getElementById("sweatOrange")
stuffCap = document.getElementById("stuffCap")
stuffMug = document.getElementById("stuffMug")
stuffMartini = document.getElementById("stuffMartini")
attachEvent(shirtGreen)
attachEvent(shirtOrange)
attachEvent(shirtPurp)
attachEvent(sweatPurp)
attachEvent(sweatOrange)
attachEvent(stuffCap)
attachEvent(stuffMug)
attachEvent(stuffMartini)
window.onmousemove = dragProduct
}
else
{
if (N4) setNSEventCapture()
document.onmousedown = grabProduct
document.onmousemove = dragProduct
document.onmouseup = releaseProduct
}
}
// Set event capture for Navigator 4.x
function setNSEventCapture()
{
document.captureEvents(Event.MOUSEDOWN | Event.MOUSEMOVE | Event.MOUSEUP)
}
</script>
</head>
<body bgcolor="#FFFFFF" onLoad="init()" marginheight="0" marginwidth="0">
<div id="header">
<img src="images/stitch.gif" alt="Stitch" width="211" height="66">
</div>
<div id="store">
<img src="images/store.gif" alt="Store" width="198" height="75">
</div>
<div id="blackLine">
<img src="images/black_line.gif" alt="black line" width="700" height="1">
</div>
<div id="home">
<img src="images/home.gif" alt="home" width="54" height="26">
</div>
<div id="shirtsHd">
<img src="images/shirts.gif" alt="Shirts" width="115" height="39">
</div>
<div id="shirtGreen"><img src="images/shirt_green.gif" alt="green shirt" width="96" height="78"></div>
<div id="shirtOrange"><img src="images/shirt_orange.gif" alt="orange shirt" width="96" height="78"></div>
<div id="shirtPurp"><img src="images/shirt_purple.gif" alt="purple shirt" width="97" height="78"></div>
<div id="sweatshirtsHd">
<img src="images/sweatshirts.gif" alt="Sweatshirts" width="115" height="72">
</div>
<div id="sweatPurp">
<img src="images/sweat_purple.gif" alt="purple sweatshirt" width="144" height="72">
</div>
<div id="sweatOrange">
<img src="images/sweat_orange.gif" alt="orange sweatshirt" width="145" height="72">
</div>
<div id="stuffHd">
<img src="images/swellstuff.gif" alt="Swell Stuff" width="115" height="72">
</div>
<div id="stuffCap">
<img src="images/cap.gif" alt="Cap" width="115" height="72">
</div>
<div id="stuffMug">
<img src="images/mug.gif" alt="Mug" width="77" height="72">
</div>
<div id="stuffMartini">
<img src="images/martini.gif" alt="Martini" width="97" height="72">
</div>
<div id="dragStuff">
<img src="images/drag.gif" alt="Drag a product!" width="547" height="59">
</div>
<div id="cart">
<img src="images/cart.gif" alt="Your Shopping Cart" width="214" height="331">
</div>
</body>
</html>
Based on reader feedback from the first edition of this book, it has become clear that a few things mentioned in the book need to be brought clearly to light.
|
