Forstørrelse af billede
Hej,Jeg har på http://www.vitro.dk/catalog/index.php?cPath=33_100_114_241_615 set en funktion, hvor billedet bliver forstørret ved mouse over.
Denne forsøger jeg så at genbruge, men kan bare ikke få det til at virke. Den viser ikke billedet ved mouse over og jeg får en fejl på siden, der siger tooltip is null
Nogen der kan fortælle mig, hvad fejlen er, hvorfor og hvordan jeg retter den?
Fejlen kommer ved følgende linje:
tipcss = tooltip.style;
Hele koden ser ud som følgende:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>[Ingen titel]</title>
<meta name="Generator" content="Stone's WebWriter 4">
<link rel="stylesheet" type="text/css" href="stylesheet.css">
<script language="javascript" type="text/javascript">
<!--
var dom = (document.getElementById) ? true : false;
var ns5 = ((navigator.userAgent.indexOf("Gecko")>-1) && dom) ? true: false;
var ie5 = ((navigator.userAgent.indexOf("MSIE")>-1) && dom) ? true : false;
var ns4 = (document.layers && !dom) ? true : false;
var ie4 = (document.all && !dom) ? true : false;
var nodyn = (!ns5 && !ns4 && !ie4 && !ie5) ? true : false;
var origWidth, origHeight;
if (nodyn) { event = "nope" }
var tipWidth= 510;
var offX= 20;
var offY= 12;
var tipFontFamily= "Verdana, arial, helvetica, sans-serif";
var tipFontSize= "8pt";
var tipFontColor= "#000000";
var tipBgColor= "#eeeeee"; // "#DDECFF";
var tipBorderColor= "#000000";
var tipBorderWidth= 3;
var tipBorderStyle= "ridge";
var tipPadding= 4;
var startStr = '<table class="infoBoxContents" width="' + tipWidth + '"><tr><td valign="top" align="left" width="100%"><img src="';
var midStr = '" border="0" align="right"></center>';
var endStr = '</td></tr></table>';
var tooltip, tipcss;
function initTip() {
if (nodyn) return;
tooltip = (ie4)? document.all['tipDiv']: (ie5||ns5)? document.getElementById('tipDiv'): null;
tipcss = tooltip.style;
if (ie4||ie5||ns5) {
tipcss.width = tipWidth+"px";
tipcss.fontFamily = tipFontFamily;
tipcss.fontSize = tipFontSize;
tipcss.color = tipFontColor;
tipcss.backgroundColor = tipBgColor;
tipcss.borderColor = tipBorderColor;
tipcss.borderWidth = tipBorderWidth+"px";
tipcss.padding = tipPadding+"px";
tipcss.borderStyle = tipBorderStyle;
}
if (tooltip) {
document.onmousemove = trackMouse;
}
}
window.onload = initTip;
var t1,t2;
var tipOn = false;
function doTooltip(evt,num,imgs,wimg,himg) {
if (!tooltip) return;
if (t1) clearTimeout(t1); if (t2) clearTimeout(t2);
tipOn = true;
curBgColor = tipBgColor;
curFontColor = tipFontColor;
if (ie4||ie5||ns5) {
var toolwidth = wimg + 10;
var startStr = '<table class="infoBoxContents" width="' + toolwidth + '"><tr><td valign="top" align="center" valign="center" width="100%"><center><img src="';
var tip = startStr + imgs + '" width="' + wimg + '" height="'+ himg + midStr + endStr;
tipcss.backgroundColor = curBgColor;
tipcss.width = toolwidth+"px";
tooltip.innerHTML = tip;
}
t1=setTimeout("tipcss.visibility='visible'",100);
}
var mouseX, mouseY;
function trackMouse(evt) {
mouseX = (ns5)? evt.pageX: window.event.clientX + document.body.scrollLeft;
mouseY = (ns5)? evt.pageY: window.event.clientY + document.body.scrollTop;
if (tipOn) positionTip(evt);
}
function positionTip(evt) {
var tpWd = (ie4||ie5)? tooltip.clientWidth: tooltip.offsetWidth;
var tpHt = (ie4||ie5)? tooltip.clientHeight: tooltip.offsetHeight;
var winWd = (ns5)? window.innerWidth-20+window.pageXOffset: document.body.clientWidth+document.body.scrollLeft;
var winHt = (ns5)? window.innerHeight-20+window.pageYOffset: document.body.clientHeight+document.body.scrollTop;
if ((mouseX+offX+tpWd)>winWd)
tipcss.left = mouseX-(tpWd+offX)+"px";
else tipcss.left = mouseX+offX+"px";
if ((mouseY+offY+tpHt)>winHt)
tipcss.top = winHt-(tpHt+offY)+"px";
else tipcss.top = mouseY+offY+"px";
}
function hideTip() {
if (!tooltip) return;
t2=setTimeout("tipcss.visibility='hidden'",100);
tipOn = false;
}
//-->
</script>
</head>
<body>
<table border="0" width="100%" cellspacing="0" cellpadding="2" class="productListing">
<tr class="productListing-odd">
<td align="center" class="productListing-data" valign="top"> <a onmouseover="doTooltip(event,0,'Images/Hjerte-11.gif',500,332)" onmouseout="hideTip()" href="http://www.google.dk"><img src="Images/Hjerte-11.gif" border="0" alt="Alt teksten" title="Titel teksten" width="200" height="160" class=shadow1></a> </td>
</tr></table>
</body>
</html>
mvh
simsen :-)
