denne duer nedtil IE4 og NS4, men test om stadig ok i IE5.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Text on Image</title>
<META NAME="Generator" CONTENT="Stone's WebWriter 3">
<style type="text/css">
body {
font-family : Verdana, Arial, Sans-Serif ;
font-size : 11px ;
}
.image {
z-index : 0 ;
border : 1px solid black ;
}
.text {
position : absolute ;
z-index : 2 ;
font-family : Verdana, Arial, Sans-Serif ;
font-size : 11px ;
font-weight : bold ;
color : red ;
}
</style>
<script type="text/javascript" language="JavaScript"> <!-- //>
var ns4 = (document.layers) ? 1 : 0; // 3 linier tilføjet
var dom = (document.getElementById) ? 1 : 0;
var ie = (document.all) ? 1 : 0;
// Function to return position of element, thanks to Jakob Aggernæs (
www.jakoba.dk)
function getXYcoord ( htmlElemObj ) {
if ( ns4 ) return htmlElemObj; // 1 linie tilføjet
var elm = htmlElemObj ;
var rd = { x:0 ,y:0 } ;
do {
rd.x += parseInt( elm.offsetLeft ) ;
rd.y += parseInt( elm.offsetTop ) ;
elm = elm.offsetParent ;
} while ( elm ) ;
return rd ;
}
function findLag ( navn ) { // funktion tilføjet
if ( ns4 ) {
document[ navn ].style = document[ navn ];
return document[ navn ];
}
if ( dom ) return document.getElementById( navn );
if ( ie ) return document.all[ navn ];
}; //end findLag ( string ) -> html div element
// Function to place the text on image
function placeText() {
var fromTop = 150 ; // The position of the text from the top of image
var fromLeft = 40 ; // The position of the text from the left of image
var imgObj = document.images[ "theImage" ] ;
var txtObj = findLag( "theText" ) ;
var imgPos = getXYcoord( imgObj ) ;
if ( dom ) { // dom situation tilføjet (check om ok i IE5+)
txtObj.style.top = (imgPos.y + fromTop) +"px";
txtObj.style.left = (imgPos.x + fromLeft) +"px";
} else {
txtObj.style.top = imgPos.y + fromTop ;
txtObj.style.left = imgPos.x + fromLeft ;
}
}
// --> </script>
</head>
<body onLoad="placeText()" onResize="placeText()">
<h2 align="center">Text on Image Script</h2>
<center>
<img src="angel.jpg" alt="" class="image" id="theImage" name='theImage'>
<!-- tilføjet name= attribut (for ns4) -->
</center>
<div class="text" id="theText" name='theText'>
<!-- tilføjet name= attribut (for ns4) -->
This text is placed over the image
</div>
<!-- WebWriter AutoDato -->Opdateret: 24.8.2002<!-- WW -->
</body>
</html>
