...

View Full Version : Hotspot areas generating popups without toolbars



Wezalmighty
07-06-2006, 10:13 AM
Hi all, I've just started working on websites so my knowledge of javascript and html is shakey.

Heres the deal, I have an image with hotspot areas on it. When the user clicks on an area, i want a popup window to appear with some information on that area.
I dont want any tool bars or status bars or whatnot on the popup and thats where i've hit a snag, else I'd just do it in html.

coothead
07-06-2006, 11:34 AM
Hi there Wezalmighty,

and a warm welcome to these forums. ;)

Have a look at this example, it may suit your requirements...

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>image maps tooltips</title>
<base href="http://coothead.mysite.wanadoo-members.co.uk/"/>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<style type="text/css">
/*<![CDATA[*/
body {
background-color:#32003a;
color:#fff;
}
#img_container {
width:336px;
margin:40px auto;
}
#img_container img {
border:none;
}
#tooltip{
position:absolute;
width:100px;
border:1px solid #000;
background-color:#fee;
font-family:verdana,arial,helvetica,sans-serif;
font-size:10px;
color:#000;
padding:5px;
text-align:justify;
display:none;
}
/*//]]>*/
</style>

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

var tp_os=49; //adjust this value to move tooltip top position.
var lt_os=36; //adjust this value to move tooltip left position.

var text=new Array();
text[0]='this is the text for link a, and appears on mouseover';
text[1]='this is the text for link b, I think!!';
text[2]='this is the text for link c and is really infomative';
text[3]='this is the text for link d, and what more can I say about it';

function showTip(obj,n) {

el=document.getElementById('tooltip');
im=document.getElementById('img_container')
words=document.createTextNode(text[n]);
xy=obj.coords.split(',');

lt=parseFloat(xy[0])+parseFloat(im.offsetLeft)-lt_os;
tp=parseFloat(xy[1])+parseFloat(im.offsetTop)+tp_os;

el.appendChild(words);
el.style.left=lt+'px';
el.style.top=tp+'px';
el.style.display='block';

obj.onmouseout=function() {
el.style.display='';
el.removeChild(words);

}
}

//]]>
</script>

</head>
<body>

<div id="img_container">
<img id="poo" src="map.jpg" alt="" usemap="#blood"/>
</div>

<div>
<map id="blood" name="blood">
<area href="#" coords="40,144,80,171" alt="" onmouseover="showTip(this,0)"/>
<area href="#" coords="112,144,152,171" alt="" onmouseover="showTip(this,1)"/>
<area href="#" coords="184,144,224,171" alt="" onmouseover="showTip(this,2)"/>
<area href="#" coords="256,144,296,171" alt="" onmouseover="showTip(this,3)"/>
</map>
</div>

<div id="tooltip"></div>

</body>
</html>

coothead

Wezalmighty
07-06-2006, 11:58 AM
Thanks coothead, actually thats solved the second problem I was having.

However, I'm looking to generate the information needed in a popup form rather than a tooltip.
I think it would be an onMouseclick event within the area, i just cant work out what should be in there.

The popup code itself was something I made using a popup code generator;


<HEAD>
<SCRIPT LANGUAGE="JavaScript">

<!-- Begin
function popUp(URL) {
day = new Date();
id = day.getTime();
eval("page" + id + " = window.open(URL, '" + id + "', 'toolbar=0,scrollbars=0,location=0,statusbar=0,menubar=0,resizable=0,width=200,height=200,left = 412,top = 284');");
}
// End -->
</script>



And then I want to generate said popup when an are is clicked,

<area shape="rect" coords="16,17,59,105" href="#" onMouseclick="popUp('Page1.htm')"/>

Thats the idea anyway. in practise it doesnt really work.

coothead
07-06-2006, 12:09 PM
Hi there Wezalmighty,

remove the Mouse from onMouseclick :D

coothead

Wezalmighty
07-06-2006, 12:16 PM
Doh. =D

Thanks dude.

coothead
07-06-2006, 12:20 PM
No problem, you're welcome. ;)



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum