Figure 2
MapTarget.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">
<HTML>
<HEAD>
<TITLE>Bogus</TITLE>
<SCRIPT LANGUAGE="JavaScript">
// This code allows any absolutely positioned element
// with the custom attribute dragEnabled to be dragged.
var elDragged = null // Element to drag.
function doMouseMove() {
// Check whether mouse button is down and whether
// an element is being dragged.
if ((1 == event.button) && (elDragged != null)) {
// Move the element.
// Save mouse's position in the document
var intTop = event.clientY + document.body.scrollTop;
var intLeft = event.clientX + document.body.scrollLeft;
// Determine what element the mouse is really over.
var intLessTop = 0;
var intLessLeft = 0;
var elCurrent = elDragged.offsetParent;
while (elCurrent.offsetParent != null) {
intLessTop += elCurrent.offsetTop;
intLessLeft += elCurrent.offsetLeft;
elCurrent = elCurrent.offsetParent;
}
// Set new position.
elDragged.style.pixelTop =
intTop - intLessTop - elDragged.y;
elDragged.style.pixelLeft =
intLeft - intLessLeft - elDragged.x;
event.returnValue = false;
}
}
function checkDrag(elCheck) {
// Check whether the mouse is over an element
// that supports dragging.
while (elCheck != null) {
if (null != elCheck.getAttribute("dragEnabled"))
return elCheck;
elCheck = elCheck.parentElement;
}
return null;
}
function doMouseDown() {
// Store element to be dragged.
var elCurrent = checkDrag(event.srcElement);
if (null != elCurrent) {
elDragged = elCurrent;
// Determine where the mouse is in the element.
elDragged.x = event.offsetX;
elDragged.y = event.offsetY;
var op = event.srcElement;
// Find real location with respect to element being
// dragged.
if ((elDragged != op.offsetParent) &&
(elDragged != event.srcElement)) {
while (op != elDragged) {
elDragged.x += op.offsetLeft;
elDragged.y += op.offsetTop;
op = op.offsetParent;
}
}
}
}
function doSelectTest() {
// Don't start text selections in dragged elements.
return (null == checkDrag(event.srcElement) &&
(elDragged!=null));
}
// Hook up mouse event handlers.
document.onmousedown = doMouseDown;
document.onmousemove = doMouseMove;
// Reset element when mouse button is released.
document.onmouseup = new Function("elDragged = null;");
document.ondragstart = doSelectTest;
document.onselectstart = doSelectTest;
</SCRIPT>
<STYLE type="text/css">
BODY {
background-color: #cc6600;
}
.map
{
width:"1797";
height:"1073";
}
</STYLE>
</HEAD>
<BODY>
<div class="map">
<img dragEnabled src="NYC40percent.jpg"
STYLE="position:absolute; left: 0 pt;
top: 0 pt; z-index=1; cursor:move;"
width=1797
height=1073
alt="" >
</div>
</BODY>
</HTML>
Figure 3
ScrollingDemo.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">
<HTML>
<HEAD>
<TITLE>iFrame and Scrolling Tricks</TITLE>
<STYLE type="text/css">
BODY
{
background-color: #cc6600;
font-family: Arial;
margin-left: 3%;
margin-right:2%;
margin-top:4%;
}
.mapBox
{
position: absolute; left: 25px; top: 25px;
}
.bodyHeader
{
font-weight: bolder;
font-size: 150%;
margin-right: 25px;
position: absolute; left: 380px; top: 80px;
}
.mainBody
{
font-size: 90%;
width: 310px;
margin-right: 45px;
position: absolute; left: 380px; top: 130px
}
.mapLabelHead
{
font-size:110%;
font-weight:bold;
}
.mapLabel
{
font-size: 70%;
font-weight: light;
font-style: italic;
text-align:right;
width: 230px;
padding-right:12px;
border-right-width: thin;
border-right-style: inset;
border-right-color: black;
position: absolute; left: 108px; top: 230px;
}
.callOut
{
font-size: 60%;
font-weight: light;
color: darkgreen;
font-style: plain;
text-align:justify;
width: 225px;
height: 24px;
padding-right:12px;
padding-left:12px;
border-left-width: thin;
border-left-style: outset;
border-left-color: black;
border-right-width: thin;
border-right-style: outset;
border-right-color: black;
position: absolute; left: 114px;
}
</STYLE>
</HEAD>
<BODY>
<DIV CLASS="bodyHeader">
New York City, 1970
</DIV>
<DIV CLASS= "mapBox">
<iframe style= "padding:2%; border-style= ridge; border-width: thick;
border-color: darkred; width ="299"; height="179";" scrolling ="no"
src ="./MapTarget.html">The Map</iframe>
</DIV>
<DIV CLASS = "mapLabel">
<SPAN CLASS= "mapLabelHead">This map can be moved by dragging</SPAN> sit amet,
consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut
laoreet dolore magna aliquam erat volutpat.
</DIV>
<DIV CLASS=mainBody>
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit
lobortis nisl ut aliquip ex ea commodo consequat autem vel eum iriure dolor
in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu
feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui
blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla
facilisi.
<BR>
<BR>
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit
lobortis nisl ut aliquip ex ea commodo consequat autem vel eum iriure dolor
in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu
feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui
blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla
facilisi.
<BR>
<BR>
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit
lobortis nisl ut aliquip ex ea commodo consequat autem vel eum iriure dolor in
hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu
feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui
blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla
facilisi.
<BR>
<BR>
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit
lobortis nisl ut aliquip ex ea commodo consequat autem vel eum iriure dolor in
hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu
feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui
blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla
facilisi.
</DIV>
<DIV CLASS="callOut" style=" position: absolute; top: 360px" >
Points of interest in the New York City Area
</div>
</BODY>
</HTML>
Figure 5
BackgroundFun3.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">
<HTML>
<HEAD>
<TITLE>Untitled</TITLE>
<STYLE>
BODY
{
background-color: Black;
}
/* first pairing of picture and "empty" div for backcolor */
.flowerBack0
{
background-color: #ccccff;
width: 200 px;
height: 200 px;
position: absolute; top:65 px; left: 200 px;
}
.wildflower0
{
background-color: #ffcc00;
width: 200 px;
height: 200 px;
filter: FlipH Chroma(Color="#FFFFFF");
}
/* second pairing of picture and "empty" div for backcolor */
.flowerBack1
{
background-color: #ff66ff;
width: 200 px;
height: 200 px;
position: absolute; top:65 px; left: 400 px;
}
.wildflower1
{
background-color: #339900;
width: 200 px;
height: 200 px;
filter: Chroma(Color="#FFFFFF");
}
/* third pairing of picture and "empty" div for backcolor */
.flowerBack2
{
background-color: #330099;
width: 200 px;
height: 200 px;
position: absolute; top:265 px; left: 200 px;
}
.wildflower2
{
background-color: #9999ff;
width: 200 px;
height: 200 px;
filter: Chroma(Color="#FFFFFF");
}
/* fourth pairing of picture and "empty" div for backcolor */
.flowerBack3
{
background-color: #33cccc;
width: 200 px;
height: 200 px;
position: absolute; top:265 px; left: 400 px;
}
.wildflower3
{
background-color: #ff3300;
width: 200 px;
height: 200 px;
filter: Chroma(Color="#FFFFFF");
}
</STYLE>
</HEAD>
<BODY>
<!-- First pairing of flower image and div backdrop-->
<DIV CLASS= "flowerBack0">
<DIV CLASS= "wildflower0">
<img src="wflower4.gif" width=200 height=200 alt="" border="0">
</DIV>
</DIV>
<!-- Second pairing of flower image and div backdrop-->
<DIV CLASS= "flowerBack1">
<DIV CLASS= "wildflower1">
<img src="wflower4.gif" width=200 height=200 alt="" border="0">
</DIV>
</DIV>
<!-- Third pairing of flower image and div backdrop-->
<DIV CLASS= "flowerBack2">
<DIV CLASS= "wildflower2">
<img src="wflower4.gif" width=200 height=200 alt="" border="0">
</DIV>
</DIV>
<!-- Fourth pairing of flower image and div backdrop-->
<DIV CLASS= "flowerBack3">
<DIV CLASS= "wildflower3">
<img src="wflower4.gif" width=200 height=200 alt="" border="0">
</DIV>
</DIV>
</BODY>
</HTML>
Figure 8
funkytype4.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">
<HTML>
<HEAD>
<TITLE>Funky Type Stuff v.4</TITLE>
<STYLE type="text/css">
<!--
This is the rule that we use to import the font face from the server.
It's necessary to make an ".eot" file (Open Type) using the Microsoft
WEFT tool. This tool, and a lot of necessary documentation, is available
at "http://www.microsoft.com/typography/web/embedding/weft/".
What the rule does is temporarily download a file that containes font
information (not the entire font) to the client machine.
-->
@font-face consoleremix {src:url(http://208.230.240.71/CONSOLE0.eot);}
@font-face Flexure {src:url(http://208.230.240.71/FLEXURE0.eot);}
<!--
Nothing too fancy here; just setting the background color for the BODY
and its margins
-->
BODY {
background: URL(grid2.bmp) repeat;
margin-left: 3%;
margin-right:2%;
margin-top:4%;
margin-bottom:4%;
}
<!--
Okay, now we get into the meatier stuff. First, we call the font-family
so that we can make use of the .eot file we downloaded. By the way,
nothing happens automatically to font display; you need to call each
font as you would normally.
We encounter filters here, which are called through CSS now as opposed
to being called through the OBJECT tag.
One thing to note: when calling a filter on an element, you must give
that element width and height parameters or the filter will not work.
DIVs and IMG elements are therefore the primary elements where filters
are used.
In terms of postion, we've chosen to make it "absolute" as we want this
DIV to stay put.
The z-Index rule with a value of one is used to ensure that this
element appears as the first element behind all other elements on the
page. In essence this is how we make "layers" out of any element,
which can be ordered numerically in anyway we choose.
-->
.headline
{
font-family: "consoleremix";
width: 400pt;
height: 60pt;
font-size: 420%;
filter: Glow(color="#990000", Strength="3");
position: absolute; top:13pt; left: 15pt;
color:"#FFFFFF" ;
z-Index:-1;
}
.robot
{
width: 301;
height:376;
filter: FlipH Chroma(Color="#FFFFFF"),
Glow(color="#ccff99", Strength="20");
position: absolute; top: 90pt; left: 55pt;
float: left;
}
.robotMask
{
width: 301;
height:376;
filter: FlipH Chroma(Color="#FFFFFF") Mask(color="#ccff00")
Alpha(Opacity=65, FinishOpacity=0, Style=2);
position: absolute; top: 90pt; left: 55pt;
float: left;
z-index:-1;
}
.roboinfo
{
color:#009900;
font-family: "Flexure";
font-size: 105%;
font-weight:200;
width: 342;
height:192;
padding: 7pt;
Glow(color="#ffff99", Strength="16");
position: absolute; top:90pt; left=301pt;
}
.glowBack
{
background-color:#33ff66;
filter:Alpha(Opacity=5, FinishOpacity=55, Style=1);"
width: 575;
height:202;
position:absolute; top:110;left:94pt;
z-index:-1;
}
.glowBack2
{
background-color:#99ff00;
filter:Alpha(Opacity=5, FinishOpacity=55, Style=1);"
width: 575;
height:202;
position:absolute; top:110;left:94pt;
z-index:-1;
}
.roboName
{
color:#ff6633;
font-size:140%;
font-weight: 900;
}
.roboStats
{
color:#006600;
font-size:105%;
font-weight: 600;
}
.roboStatsSmallPrint
{
color:#669966;
font-size:80%;
font-weight: 200;
}
</STYLE>
</HEAD>
<BODY>
<DIV CLASS="headline">
RoboShop!
</DIV>
<DIV CLASS="robot">
<img src="Robot_32.gif" width=250 height=305 alt="" border="0" >
</DIV>
<DIV CLASS="robotMask">
<img src="Robot_32.gif" width=250 height=305 alt="" border="0" >
</DIV>
<DIV CLASS="roboinfo">
<SPAN CLASS="roboName"><< Avenger >></span>
<BR>
<SPAN CLASS="roboStats">class </span>- Nemesis
<BR>
<SPAN CLASS="roboStats">cpu </span>- Nanaimo/Sensei
<SPAN CLASS="roboStatsSmallPrint">3 Ghz*</span>
<BR>
<SPAN CLASS="roboStats">height </span>- 3 meters
<BR>
<SPAN CLASS="roboStats">shields </span>- Heavy
<BR>
<SPAN CLASS="roboStats">weapons </span>- Nukes, Gattlin gun
<BR>
<SPAN CLASS="roboStats">special skill </span>- Raptor jump
<BR>
</div>
<DIV CLASS="glowback">
<!-- a blank div for the "ghosted" background behind the product info-->
</div>
<DIV CLASS="glowback2">
<!-- a blank div for the "ghosted" background behind the product info-->
</div>
</BODY>
</HTML>