PDA

View Full Version : Link Floaties Script: How can I let the boxes appear in the right bottom of an image?



JanBreier
09-10-2006, 04:33 PM
Hello,
I am sorry that my english is not so good because I am from Germany...

I have a problem with this Script: http://www.dynamicdrive.com/dynamicindex5/linkfloaties.htm

I want to create a small foto-gallery. If I move the mouse over one of the pictures I want that a small box with text appears, like in that Link Floaties script.
But the Box shouldnt appear on the bottom or on an other place of the page. It shoult appear in the left bottom of each picture! A will upload a jpg file,that shows how I imagine the small box shoult look like.
It should fade in and out like the boxes in the Link Floaties script. Maybe someone can help me? My Java-Script knowlege is as bad as my english is ;)

Thank you so much,
Jan Breier

jscheuer1
09-12-2006, 07:05 AM
I think you want:

http://www.dynamicdrive.com/dynamicindex5/fixedtooltip.htm

JanBreier
09-12-2006, 04:19 PM
Hello...

Yes, thats right...but I want the DIV to fade in like in the other script :-/
And another Problem I have with this Script (maybe I would have it with the first one too) ist that the size of the DIV-tag is the same for every DIV I would use...
I Have different Image-Sizes, so the width, the vertical_offset and the vertical_offset have to be variable for echt image.

So, how can I let the DIVs fade in?
And how can I define this options in every link for it self:


var tipwidth='100px' //default tooltip width
var tipbgcolor='#FFFFFF' //tooltip bgcolor
var disappeardelay=500 //tooltip disappear speed onMouseout (in miliseconds)
var vertical_offset="-20px" //horizontal offset of tooltip from anchor link
var horizontal_offset="10px" //horizontal offset of tooltip from anchor link

Or wouldnt it be easier to adapt the other Script?

Thanks, Jan

jscheuer1
09-13-2006, 03:59 PM
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/side/files/inset_img.htm


<!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">&nbsp; | &nbsp;<img onmouseover="insetip(tips[1], this, '128px');" src="photo5.jpg" border="0"></div>
</body>
</html>

JanBreier
09-14-2006, 04:59 AM
Wow! Thanks a lot!! Thats what I needed... :)

JanBreier
11-04-2006, 10:50 AM
Hallo once again!
Its is some time ago but now I have one more question!

I put the tooltip for testing it on a foto on my new Page: http://www.areablue.de/next/

In the JavaScript I set the vertical_offset to"-1px" and the horizontal_offset to "1px". So the Tooltip is shown in right in the InternetExplorer 7.0! It should appear in the lower-right of the Foto - the border around the Picture should be shown...

But now in Firefox 2.0 Browser the tooltipp appears one Pixel delayed to the right! I couldnt find any error in the coding. Could you please look at my Code and tellmewhats wrong? I think you can download the whole code by saving de homepage...

I hope you can help me once again!
Thank you,
Jan

jscheuer1
11-04-2006, 04:06 PM
Ah, the perils of designing a page with no DOCTYPE! First of all, I would appreciate it if you would follow DD's terms of use for this script and include the credit on the page:


<script type="text/javascript" src="scripts/fade_fotoalbum.js">
/***********************************************
* 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
***********************************************/
</script>

Next, if you were to use a DOCTYPE like so:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>AreaBlue.de : Zuhause von Jan Breier</title>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">


on your page, the offsets would be consistent across browsers and you could use:


var vertical_offset="-1px" //vertical offset adjust of tooltip
var horizontal_offset="0px" //horizontal offset adjust of tooltip

Using a DOCTYPE is just good common sense as, without one, each browser uses its quirks mode rendering engine which is usually different in each browser. With one, each browser uses a shared set of standards. Not all browsers will be identical with a DOCTYPE but, many differences between them stop once a DOCTYPE is used.

Your only other option would be to hack the code for various browsers and this is a bad road to go down because it is hard to be sure what hack will be used with any given browser under any given set of circumstances.

JanBreier
11-04-2006, 04:37 PM
Oh wow!
That was really easy - and it works! I didnt know that the doctype ist so important...
And the Credits I have included too :)

Thank you very much!
Jan