September 6, 2008 02:06pm pdt

Member Login

Hall of Fame

Yearly

1hielo 2,764,801
2mplungjan 715,071
3b0lsc0tt 552,891
4Zvonko 389,947
5wilq32 264,150
6Kravimir 196,325
7HonorGod 191,041
8JohnSixkiller 182,639
9Lolly-Ink 175,757
10logudotcom 150,589
11GreenGho... 145,434
12LordOfPo... 122,502
13third 112,491
14scrathcyboy 109,703
15Badotz 106,081
16pratima_... 80,026
17Roonaan 76,409
18neeraj523 72,568
19hernst42 71,352
20zemond 70,197
21nivlam 69,225
22contactka... 68,735
23TimCottee 67,130
24MMDevelo... 62,421
25Ray_Pas... 60,160

	[x] Attachment Details

problems with popups using image map

Zones: JavaScript, Scripting Languages

Tags: Java Script, http://clients.amadaninternational.com/graph.php

Hello all
Let me first say that JavaScript and I do not get along. I can program a lot of languages but when it comes to JavaScript, my brain shuts off. So moving on

I have a pie graph that I want users to be able to move their mouse on part of the chart and a description comes up. Once they move away, the box goes away. You can see what i have so far http://clients.amadaninternational.com/graph.php

As you can see, there some problems; mostly, the boxes don't seem to go away once you move. I'm using onmousemove()

Please let me how I've failed :-)

Thanks so much
Patrick

         
           
             1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:
28:
29:
30:
31:
32:
33:
34:
35:
36:
37:
38:
39:
40:
41:
42:
43:
44:
45:
46:
47:
48:
49:
50:
51:
52:
53:
54:
55:
56:
57:
58:
59:
60:
61:
62:
63:
64:
65:
66:
67:
68:
69:
70:
71:
72:
73:
74:
75:
76:
77:
78:
79:
80:
81:
82:
83:
84:
85:
86:
87:
88:
89:
90:
91:
92:
93:
94:
95:
96:
97:
98:
99:
100:
101:
102:
103:
104:
105:
106:
107:
108:
109:
110:
111:
112:
113:
114:
115:
116:
117:
118:
119:
120:
121:
122:
123:
124:
125:
126:
127:
128:

           
           
             <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<link href="../style.css" rel="stylesheet" type="text/css" />
<title>The page</title>
<style type="text/css">
div {
        margin: 10px auto;
}
#links {
        color: red;
}
</style>
<script type="text/javascript">
function doForm() {
        document.getElementById('formDiv').style.zIndex = "100";
        document.getElementById('formDiv').style.display = "";
      
        
}
function doForm1() {
        document.getElementById('formDiv1').style.zIndex = "100";
        document.getElementById('formDiv1').style.display = "";
        
 
        
        
}
function doForm2() {
        document.getElementById('formDiv2').style.zIndex = "100";
        document.getElementById('formDiv2').style.display = "";
      
        
}
function doForm3() {
        document.getElementById('formDiv3').style.zIndex = "100";
        document.getElementById('formDiv3').style.display = "";
        
 
        
        
}
function clearForm(frm) {
        frm.title1.value = '';
        frm.protocol.options[0].selected = true;
        frm.link1.value = '';
        frm.desc1.value = '';
}
 
 
function quitForm(frm) {
        document.getElementById('formDiv').style.zIndex = "-1";
        document.getElementById('formDiv').style.display = "none";
        document.getElementById('body').style.backgroundColor = "white";
                clearForm(frm);
}
function quitForm1(frm) {
        document.getElementById('formDiv1').style.zIndex = "-1";
        document.getElementById('formDiv1').style.display = "none";
        document.getElementById('body').style.backgroundColor = "white";
        
        clearForm(frm);
}
function quitForm2(frm) {
        document.getElementById('formDiv2').style.zIndex = "-1";
        document.getElementById('formDiv2').style.display = "none";
        document.getElementById('body').style.backgroundColor = "white";
                clearForm(frm);
}
function quitForm3(frm) {
        document.getElementById('formDiv3').style.zIndex = "-1";
        document.getElementById('formDiv3').style.display = "none";
        document.getElementById('body').style.backgroundColor = "white";
        
        clearForm(frm);
}
 
</script>
</head>
 
 
<body id="body" >
 
 
 
<table><TR><TD><img src="graph-client.jpg" width="516" length="516" usemap="#client">
 
<map id ="client" name="client">
<area shape ="rect" coords ="0,0,258,258"
onMouseOver="doForm();" />
 
<area shape ="rect" coords ="0,0,516,258"
onMouseOver="doForm1();" />
 
<area shape ="rect" coords ="258,258,516,516"
onMouseOver="doForm2();" />
 
<area shape ="rect" coords ="0,516,258,258"
onMouseOver="doForm3();" />
 
</map> 
 
 
 
 
<div id="formDiv" style="width: 10%; margin: 0 auto; padding: 10px; background-color: #ffffff; text-align: center; z-index: -1; position: absolute; top: 50px; left: 50px; border: solid 1px gray; font-weight: bold; display: none;" onmousemove="quitForm();">
<h3>Box One</h3>
 
<br />Something about outputting<br />
</div>
<div id="formDiv1" style="width: 10%; margin: 0 auto; padding: 10px; background-color:  #ffffff; text-align: center; z-index: -1; position: absolute; top: 50px; left: 250px; border: solid 1px gray; font-weight: bold; display: none;" onmousemove="quitForm1();">
<h3>Box Two</h3>
 
<br /><br />
</div>
<div id="formDiv2" style="width: 10%; margin: 0 auto; padding: 10px; background-color:  #ffffff; text-align: center; z-index: -1; position: absolute; top: 450px; left: 250px; border: solid 1px gray; font-weight: bold; display: none;" onmousemove="quitForm2();">
<h3>Box Three</h3>
 
<br /><br />
</div>
<div id="formDiv3" style="width: 10%; margin: 0 auto; padding: 10px; background-color:  #ffffff; text-align: center; z-index: -1; position: absolute; top: 450px; left: 50px; border: solid 1px gray; font-weight: bold; display: none;" onmousemove="quitForm3();">
<h3>Box Four</h3>
 
<br /><br />
</div>
</body>
</html>

           
         

Start your free trial to view this solution

[x]

The Solution Rating System

With so many solutions, how can you tell which solutions are most likely to help you and which ones are not? To provide you with a tool to use, we rate our solutions based on various elements that most accurately determine if a solution is a quality solution. To explain what factors affect the solution rating, here are the elements we take into consideration when formulating our solution rating.

The Grade of the Solution
The Zone Rank of the Expert Providing the Solution
The Number of Author and Expert Comments
The Number of Experts Contributing
The Feedback of the Community

Your Input Matters
Because of the way the system is set up, the most important variable in this equation is you. As a member of Experts Exchange, you are able to cast your vote on the quality of the solutions in regard to how complete, accurate, helpful and easy to understand each solution is. When you provide your feedback, each rating is adjusted accordingly. So, if you see a solution that has a poor rating that you think is a good solution, let us know by rating it. As you do, the rating will be adjusted and will become more accurate for other members of our site.

If you have any suggestions that you would like to make for our rating system, please ask a question in the Suggestions Zone of Community Support.

Thank you!

9.4

Question Stats

Zone: Programming

Question Asked By: amadaninternational

Solution Provided By: jrram

Participating Experts: 1

Solution Grade: A

Translate:

Loading Advertisement...

Open Discussion

Comment by amadaninternational

Thaniks again

Comment by amadaninternational

Hi jrram
I didn't catch this last night but it the popups seem to be flickering. What might cause this? Thanks

20080723-EE-VQP-34 / EE_QW_2_20070628