PDA

View Full Version : Dropdown Content with Image Map



BrianH781
07-09-2010, 04:03 AM
1) Script Title:
Dropdown Content

2) Script URL (on DD):
http://dynamicdrive.com/dynamicindex5/overlapcontent.htm

3) Describe problem:
Using an image map, the dropdown content does not appear in the proper location. Using FF, the content appears at the location of the div in the HTML code. Using IE, the content appears relative to where the hotspot is, but is far away from it.

Test site is at:

http://www.abktechnologies.com/eldercare/communities.html

Thanks!
Brian H.

djr33
07-09-2010, 04:07 AM
It is not surprising that the dropdown behaves unusually with an image map because an image map isn't really an object, but rather some coordinates on an object. You could make it relative to the mouse, perhaps.
What exactly do you want the behavior to be? I can imagine several possible versions of this that might work.

vwphillips
07-09-2010, 09:12 AM
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>
<title></title>
</head>

<script type="text/javascript">
// Animate (11-January-2010)
// by Vic Phillips http://www.vicsjavascripts.org.uk

// To progressively change the Left, Top, Width, Height or Opacity of an element over a specified period of time.
// With the ability to scale the effect time on specified minimum/maximum values
// and with three types of progression 'sin' and 'cos' and liner.

// **** Application Notes

// **** The HTML Code
//
// when moving an element the inline or class rule style position of the element should be assigned as
// 'position:relative;' or 'position:absolute;'
//
// The element would normally be assigned a unique ID name.
//

// **** Initialising the Script.
//
// The script is initialised by assigning an instance of the script to a variable.
// e.g A = new zxcAnimate('left','id1')
// where:
// A = a global variable (variable)
// parameter 0 = the mode(see Note 1). (string)
// parameter 1 = the unique ID name or element object. (string or element object)
// parameter 1 = the initial value. (digits, default = 0)

// **** Executing the Effect
//
// The effect is executed by an event call to function 'A.animate(10,800 ,5000,[10,800]);'
// where:
// A = the global referencing the script instance. (variable)
// parameter 0 = the start value. (digits, for opacity minimum 0, maximum 100)
// parameter 1 = the finish value. (digits, for opacity minimum 0, maximum 100)
// parameter 2 = period of time between the start and finish of the effect in milliseconds. (digits or defaults to previous or 0(on first call) milliSeconds)
// parameter 3 = (optional) to scale the effect time on a specified minimum/maximum. (array, see Note 3)
// field 0 the minimum value. (digits)
// field 1 the maximum value. (digits)
// parameter 3 = (optional) the type of progression, 'sin', 'cos' or 'liner'. (string, default = 'liner')
// 'sin' progression starts fast and ends slow.
// 'cos' progression starts slow and ends fast.
//
// Note 1: Examples modes: 'left', 'top', 'width', 'height', 'opacity.
// Note 2: The default units(excepting opacity) are 'px'.
// For hyphenated modes, the first character after the hyphen must be upper case, all others lower case.
// Note 3: The scale is of particular use when re-calling the effect
// in mid progression to retain an constant rate of progression.
// Note 4: The current effect value is recorded in A.data[0].
// Note 5: A function may be called on completion of the effect by assigning the function
// to the animator intance property .Complete.
// e.g. [instance].Complete=function(){ alert(this.data[0]); };
//



// **** Functional Code(1.58K) - NO NEED to Change

function zxcAnimate(mde,obj,srt){
this.to=null;
this.obj=typeof(obj)=='object'?obj:document.getElementById(obj);
this.mde=mde.replace(/\W/g,'');
this.data=[srt||0];
return this;
}

zxcAnimate.prototype.animate=function(srt,fin,ms,scale,c){
clearTimeout(this.to);
this.time=ms||this.time||0;
this.neg=srt<0||fin<0;
this.data=[srt,srt,fin];
this.mS=this.time*(!scale?1:Math.abs((fin-srt)/(scale[1]-scale[0])));
this.c=typeof(c)=='string'?c.charAt(0).toLowerCase():this.c?this.c:'';
this.inc=Math.PI/(2*this.mS);
this.srttime=new Date().getTime();
this.cng();
}

zxcAnimate.prototype.cng=function(){
var oop=this,ms=new Date().getTime()-this.srttime;
this.data[0]=(this.c=='s')?(this.data[2]-this.data[1])*Math.sin(this.inc*ms)+this.data[1]:(this.c=='c')?this.data[2]-(this.data[2]-this.data[1])*Math.cos(this.inc*ms):(this.data[2]-this.data[1])/this.mS*ms+this.data[1];
this.apply();
if (ms<this.mS) this.to=setTimeout(function(){oop.cng()},10);
else {
this.data[0]=this.data[2];
this.apply();
if (this.Complete) this.Complete(this);
}
}

zxcAnimate.prototype.apply=function(){
if (isFinite(this.data[0])){
if (this.data[0]<0&&!this.neg) this.data[0]=0;
if (this.mde!='opacity') this.obj.style[this.mde]=Math.floor(this.data[0])+'px';
else zxcOpacity(this.obj,this.data[0]);
}
}

function zxcOpacity(obj,opc){
if (opc<0||opc>100) return;
obj.style.filter='alpha(opacity='+opc+')';
obj.style.opacity=obj.style.MozOpacity=obj.style.WebkitOpacity=obj.style.KhtmlOpacity=opc/100-.001;
}


</script>

<body>

<img id="Img1" usemap="#map" src="http://www.abktechnologies.com/eldercare/templates/images/Map.jpg" border="0" alt="" width="800" height="695" />

<map name="map">
<!-- #$-:Image map file created by GIMP Image Map plug-in --> <!-- #$-:GIMP Image Map plug-in by Maurits Rijk --> <!-- #$-:Please do not edit lines starting with "#$" --> <!-- #:2.3 --> <!-- #:hannahb -->
<area id="hotspot4" rel="div4" shape="circle" coords="603,254,12" />
<area id="hotspot5" rel="div5" shape="circle" coords="614,269,12" />
<area id="hotspot6" rel="div6" shape="circle" coords="414,672,13" />
<area id="hotspot1" rel="div1" shape="circle" coords="497,92,14" />
<area id="hotspot2" rel="div2" shape="circle" coords="474,256,15" />
<area id="hotspot3" rel="div3" shape="circle" coords="448,291,15" />
</map>

<div id="div1" style="position: absolute; visibility: hidden; border: 1px solid black; background-color: white; width: 300px; padding: 8px;">Testing</div>
<div id="div2" style="position: absolute; visibility: hidden; border: 1px solid black; background-color: white; width: 300px; padding: 8px;">Testing</div>
<div id="div3" style="position: absolute; visibility: hidden; border: 1px solid black; background-color: white; width: 300px; padding: 8px;">Testing</div>
<div id="div4" style="position: absolute; visibility: hidden; border: 1px solid black; background-color: white; width: 300px; padding: 8px;">Testing</div>
<div id="div5" style="position: absolute; visibility: hidden; border: 1px solid black; background-color: white; width: 300px; padding: 8px;">Testing</div>
<div id="div6" style="position: absolute; visibility: hidden; border: 1px solid black; background-color: white; width: 300px; padding: 8px;">Testing</div></div>
<script type="text/javascript">
<!--

function zxcMapPopUp(o){
this.img=document.getElementById(o.ImageID);
var hotspot=document.getElementById(o.HotSpotID);
var coords=hotspot.coords.split(',');
this.oslft=coords[0]*1+o.OffsetLeft;
this.ostop=coords[1]*1+o.OffsetTop;
this.pop=document.getElementById(o.PopID);
this.oop=new zxcAnimate('height',this.pop,0);
this.max=this.pop.offsetHeight;
this.ms=o.Duration;
this.to=null;
var oop=this;
hotspot['on'+o.EventType]=function(){ oop.Show(); }
this.pop.onmouseout=function(e){ oop.Hide(e); }
this.pop.onmouseover=function(e){ clearTimeout(oop.to); }
}

zxcMapPopUp.prototype={

Show:function(){
this.pop.style.visibility='visible';
this.oop.animate(this.oop.data[0],this.max,this.ms)
this.pop.style.left=this.Pos(this.img)[0]+this.oslft+'px';
this.pop.style.top=this.Pos(this.img)[1]+this.ostop+'px';
},

Hide:function(e){
var oop=this;
this.to=setTimeout(
function(){
oop.oop.data[0]=0;
oop.pop.style.visibility='hidden';
},200);
},

Pos:function(obj){
var rtn=[0,0];
while(obj){
rtn[0]+=obj.offsetLeft;
rtn[1]+=obj.offsetTop;
obj=obj.offsetParent;
}
return rtn;
}



}


new zxcMapPopUp({
ImageID:'Img1',
HotSpotID:'hotspot1',
PopID:'div1',
OffsetLeft:-50,
OffsetTop:20,
Duration:500,
EventType:'mouseover'
});
//-->
</script>

</body>

</html>

BrianH781
07-10-2010, 12:21 AM
AWESOME! Thanks