Well, I think it doesn't matter which script gets adapted, parts of both need to be used and updated. I have come up with one that seems to fit the bill, the fade now works in Opera 9+ as well:
http://home.comcast.net/~jscheuer1/s.../inset_img.htm
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
#fixedtipdiv { /*default styles for tip*/
border:1px solid black;
font:normal 12px Verdana;
line-height:18px;
width:150px;
background-color:lightyellow;
}
#fixedtipdiv div { /*default styles for tip nested div*/
height:100%;
padding:2px;
}
.d1 { /*optional class (used for tip[0] in this demo)*/
background-color:pink;
}
.d1 a {
color:red;
}
</style>
</head>
<body>
<script type="text/javascript">
/***********************************************
* Fade-in Image Inset ToolTip script- (modifications) © John Davenport Scheuer
* Loosely Adapted From: Link Floatie script and
* Fixed ToolTip script (both) © Dynamic Drive (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit http://www.dynamicdrive.com/ for full original source code
* Adapted script as first seen in http://www.dynamicdrive.com/forums
* username: jscheuer1
***********************************************/
var vertical_offset="0px" //vertical offset adjust of tooltip
var horizontal_offset="0px" //horizontal offset adjust of tooltip
var fadespeed=70 //speed of fade (5 or above). Smaller=faster.
var tips=new Array()
tips[0]='<div class="d1">- <a href="http://www.javascriptkit.com/cutpastejava.shtml">Free JavaScripts</a><br>- <a href="http://www.javascriptkit.com/javaindex.shtml">JavaScript Tutorials</a><br>- <a href="http://www.javascriptkit.com/dhtmltutors/index.shtml">DHTML/ CSS Tutorials</a><br>- <a href="http://www.javascriptkit.com/jsref/">JavaScript Reference</a></div>'
tips[1]='<div>Some other tip text</div>'
/////No further editting needed
var disappeardelay=0 //tooltip disappear speed onmouseout (in miliseconds)
var baseopacity=0, ie4=document.all, ns6=document.getElementById&&!document.all;
if (ie4||ns6)
document.write('<div onmouseover="clearhidetip()" onmouseout="delayhidetip()" id="fixedtipdiv" style="position:absolute;z-index:100;opacity:0;-moz-opacity:0;visibility:hidden;"></div>');
if(typeof fixedtipdiv!=='undefined'&&fixedtipdiv.filters)
fixedtipdiv.style.filter='alpha(opacity=0)';
function getposOffset(what, offsettype){
var totaloffset=(offsettype=="left")? what.offsetLeft : what.offsetTop;
var parentEl=what.offsetParent;
while (parentEl!=null){
totaloffset=(offsettype=="left")? totaloffset+parentEl.offsetLeft : totaloffset+parentEl.offsetTop;
parentEl=parentEl.offsetParent;
}
return totaloffset;
}
function showtip(obj, tipwidth){
if (tipwidth&&tipwidth!="")
dropmenuobj.style.width=tipwidth;
if(obj.visibility!=='visible'){
obj.visibility='visible';
slowhigh(dropmenuobj);
}
}
function slowhigh(which2){
imgobj=which2;
browserdetect=which2.filters? "ie" : typeof which2.style.opacity=="string"? "generic" : typeof which2.style.MozOpacity=="string"? "mozilla" : "";
instantset(baseopacity);
highlighting=setInterval("gradualfade(imgobj)",fadespeed);
}
function instantset(degree){
cleartimer();
if (browserdetect=="generic")
imgobj.style.opacity=degree/100;
else if (browserdetect=="mozilla")
imgobj.style.MozOpacity=degree/100;
else if (browserdetect=="ie")
imgobj.filters.alpha.opacity=degree;
}
function cleartimer(){
if (window.highlighting) clearInterval(highlighting);
}
function gradualfade(cur2){
if (browserdetect=="generic" && cur2.style.opacity<1)
cur2.style.opacity=Math.min(parseFloat(cur2.style.opacity)+0.1, 0.99);
else if (browserdetect=="mozilla" && cur2.style.MozOpacity<1)
cur2.style.MozOpacity=Math.min(parseFloat(cur2.style.MozOpacity)+0.1, 0.99);
else if (browserdetect=="ie" && cur2.filters.alpha.opacity<100)
cur2.filters.alpha.opacity+=10;
else if (window.highlighting)
clearInterval(highlighting);
}
function iecompattest(){
return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body;
}
function offsetadjust(obj, whichedge){
return whichedge=="rightedge"? (parseInt(horizontal_offset)-2)*-1 : parseInt(vertical_offset)*-1;
}
function insetip(tipcontent, obj, tipwidth){
clearhidetip();
if(!obj.d){
if ( typeof obj.addEventListener != "undefined" )
obj.addEventListener( "mouseout", delayhidetip, false );
else if ( typeof obj.attachEvent != "undefined" )
obj.attachEvent( "onmouseout", delayhidetip );
else {
if ( obj.onmouseout != null ) {
var oldOnmouseout = obj.onmouseout.toString(16).replace(/^[^{]*\{|\}[^}]*$/g, '');
obj.onmouseout = new Function ("e", oldOnmouseout+";delayhidetip();");
}
else
obj.onmouseout = delayhidetip;
}
obj.d=1;
}
dropmenuobj=document.getElementById? document.getElementById("fixedtipdiv") : fixedtipdiv;
dropmenuobj.innerHTML=tipcontent;
if (ie4||ns6){
showtip(dropmenuobj.style, tipwidth)
dropmenuobj.x=getposOffset(obj, "left");
dropmenuobj.y=getposOffset(obj, "top");
dropmenuobj.style.left=dropmenuobj.x+obj.offsetWidth-parseInt(tipwidth)-offsetadjust(obj, "rightedge")+"px";
dropmenuobj.style.top=dropmenuobj.y-dropmenuobj.offsetHeight-offsetadjust(obj, "bottomedge")+obj.offsetHeight+"px";
}
}
function hidetip(){
if (typeof dropmenuobj!="undefined"){
if (ie4||ns6)
dropmenuobj.style.visibility="hidden";
}
}
function delayhidetip(){
if (ie4||ns6)
delayhide=setTimeout("hidetip()",disappeardelay);
}
function clearhidetip(){
if (typeof delayhide!="undefined")
clearTimeout(delayhide)
}
</script>
<div style="width:350px;margin:3em auto;"><img onmouseover="insetip(tips[0], this, '150px');" src="photo9.jpg" border="0"> | <img onmouseover="insetip(tips[1], this, '128px');" src="photo5.jpg" border="0"></div>
</body>
</html>
Link Floaties Script: How can I let the boxes appear in the right bottom of an image?
Reply With Quote
Bookmarks