[thelist] Re:CSS Question
Ornstein, Ian
IanOrnstein at NC.SLR.com
Thu Mar 29 13:09:25 CST 2001
For an example of some impressive CSS work from
http://webfx.eae.net
Try this out:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Table Sorting (3/4) (WebFX)</title>
<link rel="STYLESHEET" type="text/css" href="webfx.css">
<script type="text/javascript" src="tablesort.js"></script>
</head>
<body>
<script type="text/javascript" src="includeHeading.js"></script>
<script type="text/javascript">
includeHeading("Table Sorting","tableSort.zip");
</script>
<h2>Sample</h2>
</body>
</html>
::includeHeading.js is below::
var localHeadingDownloadURL = "";
function includeHeading(title, url) {
dw = new Function("x", "document.write(x)");
if (url != null)
localHeadingDownloadURL = url;
if (document.all != null) {
dw('<style type="text/css">');
dw('<!--');
dw('#hdBox {position: relative;');
dw(' width: 300; height: 80;
padding-left: 20px; padding-right: 50px;');
dw(' border: 10 solid #eeeeee;
background: white; margin-right: -55;}');
dw('#hdCircle1 {position: relative; top:20; left: 0; width:
100; cursor: hand;');
dw(' font-family: webdings; font-size:
80;');
dw(' color: #eeeeee; margin-right:
-90;}');
dw('#hdCircle2 {position: relative; top: 10; left: 0;
width: 80; cursor: hand;');
dw(' font-family: webdings; font-size:
60;');
dw(' color: white; margin-right: -52;}');
dw('#hdTitle {position: relative; top: 0; left: 0;');
dw(' color: navy; font-family: arial
black; font-size: 40px;');
dw(' font-style: italic;}');
dw('#hdDl {position: relative; top: -12; left:
4;');
dw(' filter: gray(); cursor:
hand;}');
dw('-->');
dw('</style>');
dw('<div style="text-align: center; margin: 20px;
margin-left: 0; margin-right: 0; width: 500px;" nowrap>');
dw('<span id="hdBox">');
dw('<div id="hdTitle" nowrap>');
// Title inserted here
dw(title);
dw('</div>');
dw('</span>');
dw('<span id="hdCircle1" onmouseover="headDownloadHigh()"
onmouseout="headDownloadLow()" onclick="headDownload()">n</span>');
dw('<span id="hdCircle2" onmouseover="headDownloadHigh()"
onmouseout="headDownloadLow()" onclick="headDownload()">n</span>');
dw('<img id="hdDl" onmouseover="headDownloadHigh()"
onmouseout="headDownloadLow()" onclick="headDownload()"');
dw(' src="http://webfx.eae.net/images/downloadicon.gif"
width=16 height=16 border=0 alt="Download">');
dw('</div>');
// Include the custom Error Window
dw('<script src="http://webfx.eae.net/error.js"></script>');
}
else {
dw('<h1>' + title + '</h1>');
if (localHeadingDownloadURL != "")
dw('<p><a href="' + localHeadingDownloadURL +
'">Download</a></p>');
}
}
function headDownloadHigh() {
hdCircle1.style.color ="navy";
hdDl.style.filter ="";
window.status = "Download this sample";
}
function headDownloadLow() {
toEl = window.event.toElement;
if (toEl == null || toEl.id != "hdCircle1" && toEl.id != "hdCircle2"
&& toEl.id != "hdDl") {
hdCircle1.style.color ="#eeeeee";
hdDl.style.filter ="gray()";
window.status = "";
}
}
//URL inserted here
function headDownload() {
if (localHeadingDownloadURL != "")
window.open(localHeadingDownloadURL,'_top');
else
alert("There is currently no downloadable file for this
page");
}
I was impressed.
HTH
Ian Ornstein - Programmer and Web Developer
IBM Global Services, Global AMS Delivery
(704) 509-8022
More information about the thelist
mailing list