Just about any script that goes in the body can be made to work from the head, and the other way around. But modification of the code is often required. For instance, in the example that you gave (which is a bit of a special case because it is an IE only script), of the spotlight script, this (red, key parts also background highlighted) could go in the head:
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<!--[if gte IE 5.5]>
<link rel="stylesheet" href="spot.css" type="text/css">
<script type="text/javascript" src="spot.js" defer>
//Image spotlight effect- By Erik F (die_schlampe@hotmail.com)
//Code enhancements by Dynamicdrive.com
//Visit http://www.dynamicdrive.com for this script
</script>
<![endif]-->
</head>
<body>
<img id="myimage" src="theimage.jpg">
</body>
</html>
The if/endif makes sure that only filter capable versions of IE even try this, and the defer attribute is an IE only way of making sure that the browser parses the body before running the script (in others it only means that browser may wait). The defer bit in IE is almost too easy, with scripts that include other browsers, and that need to go in the body after some bit of HTML markup, generally some kind of onload event would need to be added to the script code itself.
Notice that the image tag, which all along was ordinary HTML, still needs to go in the body. But, that could be dealt with in another way too.
OK, here is (unmodified except for removing the style and comment tags) spot.css:
Code:
#myimage {
filter:light
}
and spot.js, all I did was remove the script tags:
Code:
//Image spotlight effect- By Erik F (die_schlampe@hotmail.com)
//Code enhancements by Dynamicdrive.com
//Visit http://www.dynamicdrive.com for this script
s = 50; // the size of the spotlight
vp = 10; // the visibility percent of the picture
startx = 0; // the top position of your sportlight into the image (on start)
starty = 0; // the left position of your spotlight into the image (on start)
//////////////////////////////////////////////////////////////////
// No need to edit below this line //
//////////////////////////////////////////////////////////////////
var IE = document.all?true:false
function moveL()
{
xv = tempX;
yv = tempY;
myimage.filters.light.MoveLight(1,xv,yv,s,true);
}
if (IE&&myimage.filters)
document.all.myimage.onmousemove = getMouseXY;
var tempX = 0
var tempY = 0
function getMouseXY(e) {
tempX = event.offsetX
tempY = event.offsetY
if (tempX < 0){tempX = 0}
if (tempY < 0){tempY = 0}
if (t)
{
moveL();
}
return true
}
var xv = startx;
var yv = starty;
var t= true;
if (IE&&myimage.filters){
myimage.style.cursor="hand";
myimage.filters.light.addAmbient(255,255,255,vp)
myimage.filters.light.addPoint(startx,starty,s,255,255,255,255)
}
But, using the same external files, and being able to mark the page up as desired (to duplicate where the code would have been with the external calls that bring it), one could do this and let the script itself worry about which browser is being used, and that requires no modification of the script or style code other than removing their tags (just like with a head script):
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" href="spot.css" type="text/css">
</head>
<body>
<img id="myimage" src="theimage.jpg">
<script type="text/javascript" src="spot.js">
//Image spotlight effect- By Erik F (die_schlampe@hotmail.com)
//Code enhancements by Dynamicdrive.com
//Visit http://www.dynamicdrive.com for this script
</script>
</body>
</html>
Note: This script, as do many others, also includes a stylesheet. That could have remained on the page in the head, but style (regardless of whether it is used by a script or not) may always be made external using the link tag.
inserting a body script on an external link
Bookmarks