Menu
Hi All,
i created one tooltippopup window which will show the products Discription with product image. It is working properly in Mozilla ,safari and firefox except Internet Explorer . In IE this popup window is becoming transparent to selectboxes. which is there in main window.Here is the javascript code i used
<script type=”text/javascript”>
writeDrag.handleId = “handle”;
writeDrag.writeId = “cntnt”;
// required arg’s: event, image path and file name (as this.href)
// important but optional arg’s: width of image, height of image
// other optional arg’s: txt, layer width, offx, offy
function wrapContent(e, img, pname, pdesc, w, h, txt, wd, offx, offy) {
var imgStr, cntnt, win, str, imgStr1;
imgStr = ‘<img src=”‘ + img + ‘”‘ + (w? ‘ width=”‘ + w + ‘”‘: “”) + (h? ‘ height=”‘ + h + ‘”‘: “”) + ‘>’;
//imgStr = ‘<img src=”‘ + img + ‘” >’;
imgStr1 ='<img src=”<%=contextPath%>/images/homeimages1/02_our_products8_034_03.gif” >’;
imgStr2 ='<img src=”<%=contextPath%>/images/ovacado.jpg”>’;
if ( dragObj.supported && typeof document.body.innerHTML != “undefined”) {
cntnt ='<table BORDER=0 CELLPADDING=0 CELLSPACING=0 cellpadding=”0″ class=”” width=”100″ height=”300″>’;
cntnt+='<tr><td>’;
cntnt+='<div>’ + imgStr1 + ‘</div>’;
cntnt+='</td>’;
cntnt+='<td>’;
cntnt+='<table cellpadding=”0″ cellspacing=”5″ bgcolor=”#F5F5D4″ class=”” width=”400″ height=”300″ >’;
cntnt+='<tr><td>’;
cntnt+='<div class=”img”>’ + imgStr + ‘</div>’;
cntnt+='</td><td><table cellpadding=”0″ cellspacing=”5″ >’;
cntnt+='<tr><td hieght=”50″><font size=”5″ color=”#A7A825″ ><b>’+ pdesc +'</b></font></td></tr>’;
cntnt+='<tr><td></td></tr>’;
cntnt+='<tr><td hieght=”100″><font>’+ pname +'</font></td></tr>’;
cntnt+='<tr><td>’;
cntnt+='<div class=”img”>’ + imgStr2 + ‘</div>’;
cntnt+='</td></tr>’;
cntnt+='</table></td></tr>’;
cntnt+='<tr><td></td>’;
cntnt+='<td align=”right”>’;
cntnt+='<div id=”handle”><a href=”javascript: void writeDrag.hide()”><img class=”xBox” src=”images/bx.gif” width=”12″ height=”12″ alt=”close box” border=”0″>Close Window</a></div>’;
cntnt+='</td></tr></table></td></tr></table>’;
cntnt+='</td></tr></table>’;
if (txt) cntnt += ‘<div class=”msg”>’ + txt + ‘</div>’;
// if (!wd) wd = w;
writeDrag.set(e, cntnt, wd, offx, offy);
} else { // non-capable browsers will open sub window
w = w+80 || wd || 250; h = h+80 || 250; // size
win = window.open(”, ‘subwin’, ‘resizable,width=’+w+’,height=’+h+’,left=100,top=100′,);
if (win && !win.closed) win.resizeTo(w,h);
str = ‘<html><head><title>Image Display</title></head>’;
str += ‘<body style=”text-align:center”>’;
str += imgStr + (txt? ‘<p>’ + txt + ‘</p>’:””);
str += ‘</body></html>’
win.document.write(str);
win.document.close();
if (win && !win.closed) win.focus();
}
return false;
}
</script>
…….
<img src=”<%=contextPath%>/images/payment/02_our_products_06.jpg” onclick=”return wrapContent(event, ‘<%=contextPath%>/<%=pb.getProdchgimg()%>’, ‘<%=pb.getProductname()%>’, ‘<%=pb.getProddes()%>’)” align=”top” onmouseover=”this.style.cursor=’hand'” >
……..
<!– write-drag layer here. handle and cntnt div’s are optional. (see other examples)
Specify border and padding inline if you are going to include them, so the script can read their values –>
<div id=”dragDiv” style=”position:absolute; visibility:hidden; left:0; top:0; z-index:inherit; background-color:#fff; border:0px solid #336;”>
<div id=”handle” style=”background-color:#339; text-align:right; font-size:8px;”>
</div>
<div id=”cntnt” style=”padding:2px; width: 400; height: 300;”></div>
</div>
<!– end write-drag layer –>
can any one say how to solve this problem?:mad:
Thanks in Advace.