...

View Full Version : Imagemap with no links just rollover images



RobHud
07-08-2011, 01:41 PM
Hi all

I've been looking now for over a week on how create this http://instances.110mb.com/ effect when you hover over the ships on that page.

I would be eternally grateful for any ideas how to replicate this effect.

Thanks

Rob

devnull69
07-08-2011, 02:28 PM
I made an example with jQuery here: http://jsbin.com/ohusuq/3. This effect is commonly known as "tooltip" and can be easily adapted. The tooltip DIV can contain anything you want

Hint: If you hover your mouse over the example page you will see a button "Edit using JS Bin" on the top right. You can use this button the see the full code (Javascript/CSS/HTML)

RobHud
07-08-2011, 02:39 PM
Thanks for the reply

How would you incorporate that into an imagemap?

Would it be easier to break the image up into bits and use a fake imagemap? I suppose that would be feasible but would create a lot more work.

Thanks

vwphillips
07-08-2011, 03:08 PM
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
<title></title>

</head>

<body>
<div id="Tst1" style="position:relative;left:100px;textAlign:left" >
<IMG id="image1" BORDER="0" SRC="http://www.vicsjavascripts.org.uk/StdImages/WinterPalace.jpg" ALT="Exported picture" USEMAP="#PreviewImageMap" ISMAP="ISMAP">
</div>
<MAP name="PreviewImageMap" id="map1">
<AREA SHAPE=RECT HREF="" ALT="" COORDS="240,193,273,223" >
<AREA SHAPE=RECT HREF="" ALT="" COORDS="31,120,144,208" >
<AREA SHAPE=RECT HREF="" ALT="" COORDS="208,78,329,150" >
<AREA SHAPE=RECT HREF="" ALT="" COORDS="39,29,114,82" >
</MAP>

<script type="text/javascript">
/*<![CDATA[*/

function MapPopUp(o){
var map=document.getElementById(o.MapID),areas=map.getElementsByTagName('AREA'),ary=o.PopUpImages,img=do cument.createElement('IMG'),src,pl=[];z0=0;
img.style.position='absolute';
img.style.visibility='hidden';
img.style.zIndex='101';
document.body.appendChild(img);
for (;z0<areas.length;z0++){
if (ary[z0]){
pl[z0]=new Image();
pl[z0].src=ary[z0];
this.addevt(areas[z0],'mousemove','PopUp',z0);
this.addevt(areas[z0],'mouseout','PopUp',z0);
ary[z0]=pl[z0];
}
}
this.img=img;
this.ary=ary;
}

MapPopUp.prototype={

PopUp:function(e,p){
var img=this.img,ary=this.ary,mse=this.mse(e),wwhs=this.wwhs(),x,y;
img.style.visibility=e.type=='mouseout'?'hidden':'visible';
if (img.src!=ary[p].src){
img.src=ary[p].src;
}
x=mse[0]-ary[p].width-5;
y=mse[1]-ary[p].height-5;
img.style.left=(x>wwhs[2]?x:mse[0])+'px';
img.style.top=(y>wwhs[3]?y:mse[1])+'px';
},

addevt:function(o,t,f,p){
var oop=this;
if (o.addEventListener) o.addEventListener(t,function(e){ return oop[f](e,p);}, false);
else if (o.attachEvent) o.attachEvent('on'+t,function(e){ return oop[f](e,p); });
},

wwhs:function(){
if (window.innerHeight) return [window.innerWidth-10,window.innerHeight-10,window.pageXOffset,window.pageYOffset];
else if (document.documentElement.clientHeight) return [document.documentElement.clientWidth-10,document.documentElement.clientHeight-10,document.documentElement.scrollLeft,document.documentElement.scrollTop];
return [document.body.clientWidth,document.body.clientHeight,document.body.scrollLeft,document.body.scrollTo p];
},

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

mse:function(e){
if (window.event){
var docs=[document.body.scrollLeft,document.body.scrollTop];
if (!document.body.scrollTop){
docs=[document.documentElement.scrollLeft,document.documentElement.scrollTop];
}
return [e.clientX+docs[0],e.clientY+docs[1]];
}
return [e.pageX,e.pageY];
}

}

M1=new MapPopUp({
MapID:'map1',
PopUpImages:[
['http://www.vicsjavascripts.org.uk/StdImages/One.gif'],
['http://www.vicsjavascripts.org.uk/StdImages/Two.gif'],
['http://www.vicsjavascripts.org.uk/StdImages/Three.gif'],
['http://www.vicsjavascripts.org.uk/StdImages/Four.gif']
]
});
/*]]>*/
</script>
</body>

</html>

RobHud
07-08-2011, 03:34 PM
Vic

I love you ty ty ty ty ty ty ty ty ty ty ty ty ty :D

RobHud
07-08-2011, 03:43 PM
Oh one last query Vic with your code.

The popped up window, is there an easy way to put a border around this popup?

vwphillips
07-08-2011, 03:57 PM
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
<title></title>
<style type="text/css">
/*<![CDATA[*/
.img {
border:solid red 2px;
}

/*]]>*/
</style>
</head>

<body>
<div id="Tst1" style="position:relative;left:100px;textAlign:left" >
<IMG id="image1" BORDER="0" SRC="http://www.vicsjavascripts.org.uk/StdImages/WinterPalace.jpg" ALT="Exported picture" USEMAP="#PreviewImageMap" ISMAP="ISMAP">
</div>
<MAP name="PreviewImageMap" id="map1">
<AREA SHAPE=RECT HREF="" ALT="" COORDS="240,193,273,223" >
<AREA SHAPE=RECT HREF="" ALT="" COORDS="31,120,144,208" >
<AREA SHAPE=RECT HREF="" ALT="" COORDS="208,78,329,150" >
<AREA SHAPE=RECT HREF="" ALT="" COORDS="39,29,114,82" >
</MAP>

<script type="text/javascript">
/*<![CDATA[*/

function MapPopUp(o){
var map=document.getElementById(o.MapID),areas=map.getElementsByTagName('AREA'),ary=o.PopUpImages,img=do cument.createElement('IMG'),src,pl=[];z0=0;
img.className=o.PopUpClassName;
img.style.position='absolute';
img.style.visibility='hidden';
img.style.zIndex='101';
document.body.appendChild(img);
for (;z0<areas.length;z0++){
if (ary[z0]){
pl[z0]=new Image();
pl[z0].src=ary[z0];
this.addevt(areas[z0],'mousemove','PopUp',z0);
this.addevt(areas[z0],'mouseout','PopUp',z0);
ary[z0]=pl[z0];
}
}
this.img=img;
this.ary=ary;
}

MapPopUp.prototype={

PopUp:function(e,p){
var img=this.img,ary=this.ary,mse=this.mse(e),wwhs=this.wwhs(),x,y;
img.style.visibility=e.type=='mouseout'?'hidden':'visible';
if (img.src!=ary[p].src){
img.src=ary[p].src;
}
x=mse[0]-ary[p].width-5;
y=mse[1]-ary[p].height-5;
img.style.left=(x>wwhs[2]?x:mse[0])+'px';
img.style.top=(y>wwhs[3]?y:mse[1])+'px';
},

addevt:function(o,t,f,p){
var oop=this;
if (o.addEventListener) o.addEventListener(t,function(e){ return oop[f](e,p);}, false);
else if (o.attachEvent) o.attachEvent('on'+t,function(e){ return oop[f](e,p); });
},

wwhs:function(){
if (window.innerHeight) return [window.innerWidth-10,window.innerHeight-10,window.pageXOffset,window.pageYOffset];
else if (document.documentElement.clientHeight) return [document.documentElement.clientWidth-10,document.documentElement.clientHeight-10,document.documentElement.scrollLeft,document.documentElement.scrollTop];
return [document.body.clientWidth,document.body.clientHeight,document.body.scrollLeft,document.body.scrollTo p];
},

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

mse:function(e){
if (window.event){
var docs=[document.body.scrollLeft,document.body.scrollTop];
if (!document.body.scrollTop){
docs=[document.documentElement.scrollLeft,document.documentElement.scrollTop];
}
return [e.clientX+docs[0],e.clientY+docs[1]];
}
return [e.pageX,e.pageY];
}

}

M1=new MapPopUp({
MapID:'map1',
PopUpImages:[
['http://www.vicsjavascripts.org.uk/StdImages/One.gif'],
['http://www.vicsjavascripts.org.uk/StdImages/Two.gif'],
['http://www.vicsjavascripts.org.uk/StdImages/Three.gif'],
['http://www.vicsjavascripts.org.uk/StdImages/Four.gif']
],
PopUpClassName:'img'
});
/*]]>*/
</script>
</body>

</html>

RobHud
07-08-2011, 04:09 PM
Ty again :D



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum