Her er et eksempel, det er ikke helt perfekt (en del overflødig kode), men det virker! Du skal så bare lave et en lille halvgennemsigtig gif, som du bruger som bg i div'et istedet for den nuværende #F0F0F0 farve
<html>
<head>
<title></title>
<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 ;
background-color : #F0F0F0 ;
display : none ;
}
</style>
<script type="text/javascript" language="JavaScript">
var ns4 = (document.layers) ? 1 : 0;
var dom = (document.getElementById) ? 1 : 0;
var ie = (document.all) ? 1 : 0;
// Function to return position of element
function getXYcoord ( htmlElemObj ) {
if ( ns4 ) return htmlElemObj ;
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 to find text-layer
function findLag ( navn ) {
if ( ns4 ) {
document[ navn ].style = document[ navn ] ;
return document[ navn ] ;
}
if ( dom ) return document.getElementById( navn ) ;
if ( ie ) return document.all[ navn ] ;
}
function placeText() {
var fromTop = 1 ; // The position of the text from the top of image
var fromLeft = 1 ; // 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 ) {
txtObj.style.top = (imgPos.y + fromTop) + "px";
txtObj.style.left = (imgPos.x + fromLeft) + "px";
txtObj.style.width = imgObj.width + "px" ;
txtObj.style.height = imgObj.height + "px" ;
txtObj.style.display = "block" ;
} else {
txtObj.style.top = imgPos.y + fromTop ;
txtObj.style.left = imgPos.x + fromLeft ;
txtObj.style.width = imgObj.width + "px" ;
txtObj.style.height = imgObj.height + "px" ;
txtObj.style.display = "block" ;
}
}
function hideText() {
var fromTop = 1 ; // The position of the text from the top of image
var fromLeft = 1 ; // 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 ) {
txtObj.style.top = (imgPos.y + fromTop) + "px";
txtObj.style.left = (imgPos.x + fromLeft) + "px";
txtObj.style.width = imgObj.width + "px" ;
txtObj.style.height = imgObj.height + "px" ;
txtObj.style.display = "none" ;
} else {
txtObj.style.top = imgPos.y + fromTop ;
txtObj.style.left = imgPos.x + fromLeft ;
txtObj.style.width = imgObj.width + "px" ;
txtObj.style.height = imgObj.height + "px" ;
txtObj.style.display = "none" ;
}
}
// -->
</script>
</head>
<body>
<a href="#" onClick="placeText()">Vis boks</a><br><br>
<a href="#" onClick="hideText()">Skjul boks</a><br><br>
<img src="image.gif" alt="" class="image" id="theImage" name="theImage">
<div class="text" id="theText" name="theText">
This is the box
</div>
</body>
</html>
