Hmm, tror ikke det vil ændre på det, at koden ligger et andet sted.
Har rodet lidt mere med det, men jeg synes du skal holde dig fra "forstørring"
Her er en div til nedtone billeder.
Og et billede som "billedholder" til forstørring.
Men der er lige lidt bøf.
I FF, hvis man klikker tilbageknappen, vises siden som ved mouseover.
Og i IE "smutter" placering for "billedholder" på billederne til venstre ?
Og hvis man er "hurtig" med musen, bliver "billedholder" og div til nedtoning ved med at være synlig.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "
http://www.w3.org/TR/html4/loose.dtd"> <html><head><title>Js/php gallery</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<style type="text/css">
.img_solid {
border: solid black;
border-width: 1px;
width: 160px;
height: 231px;
cursor: pointer;
}
.tekstbox {
visibility: hidden;
display: none;
font-size: 1.2em;
font-weight: bold;
margin-top: 16px;
padding: 8px;
text-align: center;
}
.maindiv {
margin: 0px auto;
padding: 16px;
width: 400px;
min-height: 460px;
text-align: center;
}
#smoothdiv {
visibility: hidden;
display: none;
position: absolute;
top: 0px;
left: 0px;
filter: alpha(opacity=75);
-moz-opacity: 0.75;
opacity: 0.75;
background-color: white;
width: 400px;
min-height: 460px;
z-index: 5;
}
#img_holder {
visibility: hidden;
display: none;
position: absolute;
top: 0px;
left: 0px;
background-color: yellow;
border: solid black;
border-width: 1px;
cursor: pointer;
z-index: 6;
}
</style>
<script type="text/javascript">
var links = new Array();
links[1] = '/';
links[2] = '/js/exp/';
links[3] = '/js/';
links[4] = '/php/';
function get_id(idref) {
<!-- exp.dk -->
if (document.all && document.getElementById) {
return document.all(idref);
} else if (!document.all && document.getElementById) {
return document.getElementById(idref);
} else {
return false;
}
}
function getPos(o) {
<!--
http://www.eksperten.dk/spm/796670 -->
for(var _x=_y=0;o!=null;_x+=o.offsetLeft,_y+=o.offsetTop,o=o.offsetParent);
return {x:_x,y:_y}
}
function main_XY() {
var divref = get_id('mainbox');
if(divref && topdiv) {
xw = divref.offsetWidth;
yw = divref.offsetHeight;
var oP = getPos(divref);
var smoothcss = topdiv.style;
smoothcss.top = oP.y+'px';
smoothcss.left = oP.x+'px';
smoothcss.width = xw+'px';
smoothcss.height = yw+'px';
}
}
function show(idref) {
var textref = get_id('tekst_'+idref);
var allways = get_id('tekst_0');
var img_ref = get_id('img_'+idref);
if(img_ref && textref && allways && spacegif && topdiv) {
topdiv.style.display = 'block';
topdiv.style.visibility = 'visible';
textref.style.display = 'block';
textref.style.visibility = 'visible';
allways.style.display = 'none';
allways.style.visibility = 'hidden';
var pic = "image_"+idref+ ".jpg";
spacegif.getElementsByTagName("img")[0].setAttribute("src", pic);
var oP = getPos(img_ref);
var imgcss = spacegif.style;
imgcss.display = 'block';
imgcss.visibility = 'visible';
imgcss.top = (oP.y-6)+'px';
imgcss.left = (oP.x-4)+'px';
url_id = idref;
}
}
function go_url() {
if(links[url_id]) {
document.location.href=links[url_id];
}
}
function hide() {
if(spacegif && topdiv && url_id) {
var textref = get_id('tekst_'+url_id);
var allways = get_id('tekst_0');
textref.style.display = 'none';
textref.style.visibility = 'hidden';
allways.style.display = 'block';
allways.style.visibility = 'visible';
var imgcss = spacegif.style;
imgcss.display = 'none';
imgcss.visibility = 'hidden';
var divcss = topdiv.style;
divcss.display = 'none';
divcss.visibility = 'hidden';
}
}
window.onload = Function('main_XY()');
window.onresize = Function('main_XY()');
</script>
</head>
<body>
<div class="maindiv" id="mainbox">
<div style="float: left;">
<img src="image_1.jpg" id="img_1" class="img_solid" onmouseover="show(1);">
</div>
<div style="float: right;">
<img src="image_2.jpg" id="img_2" class="img_solid" onmouseover="show(2);">
</div>
<div style="clear: both;"> </div>
<div style="float: left;">
<img src="image_3.jpg" id="img_3" class="img_solid" onmouseover="show(3);">
</div>
<div style="float: right;">
<img src="image_4.jpg" id="img_4" class="img_solid" onmouseover="show(4);">
</div>
<div style="clear: both;"> </div>
</div>
<div class="tekstbox" style="visibility: visible; display: block;" id="tekst_0">Hold musen over et billede</div>
<div class="tekstbox" id="tekst_1">Tekst til billede 1</div>
<div class="tekstbox" id="tekst_2">Noget tekst til billede 2<br />Og et linieskift</div>
<div class="tekstbox" id="tekst_3">Billede 3</div>
<div class="tekstbox" id="tekst_4"><img src="image_4.jpg" width="60" align="top" style="margin: 8px;">Billede til 4 tekst</div>
<div id="smoothdiv"> </div>
<div id="img_holder"><img src="spacer.gif" width="170" height="245" border="0" onmouseout="hide();" onclick="hide();go_url();"></div>
<script type="text/javascript">
var topdiv = get_id('smoothdiv');
var spacegif = get_id('img_holder');
var url_id = false;
</script>
</body></html>
