Möglichkeit 1:
Die Links (Betonsockel,Gitterzaum) plazierst du über deinem Bild.
setmarkerto(75,130,270,175) mußt du auf die Stelle setzen, die aufleuchten soll.
<HTML><HEAD><TITLE>Hervorhebung</TITLE>
<LINK href="style.css" type=text/css rel=STYLESHEET>
</HEAD>
<BODY onload=initiate()>
<SCRIPT language=javaScript>
<!-- Beginning of JavaScript -
var imgurl="../pics/zaun0.jpg"
// horizontal position of the image (distance to the left margin of the window, pixels)
var x_imgposition=270
// vertical position of the image (distance to the top margin of the window, pixels)
var y_imgposition=150
// maximum width of the animated border
var maxborderwidth=4
// color of the animated border
var border_color="#DD7427"
// speed of the marker-animation. A higher value will slow down the animation
var speed=100
// do not edit the variables below
var preloadimgurl=new Image()
preloadimgurl.src=imgurl
var clipleft,clipright,cliptop,clipbottom,x_marker,y_m arker,tableheight,tablewidth,timer,contentmarker
var borderwidth=0
var step=1
var marker_is_on=false
var isloaded=false
function initiate() {
if(document.all) {
yourimage.innerHTML="<img src="+imgurl+">"
document.all.yourimage.style.posLeft=x_imgposition
document.all.yourimage.style.posTop=y_imgposition
isloaded=true
}
if(document.layers) {
document.yourimage.document.write("<img src="+imgurl+">")
document.yourimage.document.close()
document.yourimage.left=x_imgposition
document.yourimage.top=y_imgposition
isloaded=true
}
}
function setmarkerto(clpleft,clptop,clpright,clpbottom) {
marker_is_on=true
clipleft=eval(clpleft)
clipright=eval(clpright)
cliptop=eval(clptop)
clipbottom=eval(clpbottom)
tablewidth=clipright-clipleft
tableheight=clipbottom-cliptop
x_marker=eval(x_imgposition)+eval(clipleft)
y_marker=eval(y_imgposition)+eval(cliptop)
if(document.all && isloaded) {
document.all.marker.style.posLeft=x_marker
document.all.marker.style.posTop=y_marker
animatemarker()
}
if(document.layers && isloaded) {
document.marker.left=x_marker
document.marker.top=y_marker
animatemarker()
}
}
function animatemarker() {
if (marker_is_on) {
getcontentmarker()
borderwidth+=step
if (borderwidth>maxborderwidth) {step=step*(-1)}
else if (borderwidth<0) {borderwidth=step=step*(-1)}
if(document.all) {
marker.innerHTML=contentmarker
document.all.marker.style.visibility="visible"
timer=setTimeout("animatemarker()",speed)
}
if(document.layers) {
document.marker.document.write(contentmarker)
document.marker.document.close()
document.marker.visibility="visible"
timer=setTimeout("animatemarker()",speed)
}
}
else {
clearTimeout(timer)
}
}
function hidemarker() {
marker_is_on=false
if (document.all) {
document.all.marker.style.visibility="hidden"
}
if (document.layers) {
document.marker.visibility="hidden"
}
}
function getcontentmarker() {
contentmarker="<table cellpadding=0 cellspacing=0 width="+tablewidth+" height="+tableheight+" border="+borderwidth+" bordercolor="+border_color+"><tr><td> </td></tr></table>"
}
// - End of JavaScript - -->
</SCRIPT>
<DIV id=yourimage style="Z-INDEX: 1; LEFT: 0px; POSITION: absolute; TOP: 0px"></DIV>
<DIV id=marker style="Z-INDEX: 2; LEFT: 0px; POSITION: absolute; TOP: 0px"></DIV>
<A onmouseover=setmarkerto(75,130,270,175) onmouseout=hidemarker() href="#">Betonsockel</A>
<A onmouseover=setmarkerto(120,58,270,153) onmouseout=hidemarker() href="#">Gitterzäune</A>
<A onmouseover=setmarkerto(0,48,130,150) onmouseout=hidemarker() href="#">Zäune</A>
</BODY>
</HTML>