How to generate a pop up message box in JQuery to show value of a variable

Hello,

I have the below code and want to add a line in there, that on mouseover will pop up a message box and show the value of one of the variables. Can you help me with this, please?

Thank you,
Riverwalk
jQuery("#map-container AREA").mouseover(function(){
	var regionMap = '.'+$(this).attr('id')+'-map';
	var regionList = '.'+$(this).attr('id')+'-list';
	var regionList2 = '.'+$(this).attr('id')+'-list2';
	jQuery(regionMap).css('display', 'inline');

Open in new window

RiverWalkAsked:
Who is Participating?
 
leakim971PluritechnicianCommented:
Check this : http://jsfiddle.net/G4pLs/

jQuery(document).ready(function() {
    jQuery("#map-container AREA").mouseover(function(){

        var regionMap = '.'+$(this).attr('id')+'-map';
        var regionList = '.'+$(this).attr('id')+'-list';
        var regionList2 = '.'+$(this).attr('id')+'-list2';
        jQuery(regionMap).css('display', 'inline');

        jQuery("#dialog").html(regionMap)
        jQuery("#dialog").dialog();
    })

})

Open in new window


<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<img src="http://www.w3schools.com/tags/planets.gif" width="145" height="126" alt="Planets" usemap="#map-container" />

<map id="map-container" name="map-container">
  <area shape="rect" coords="0,0,82,126" alt="Sun" href="sun.htm" id="rectangle" />
  <area shape="circle" coords="90,58,3" alt="Mercury" href="mercur.htm" id="circle1" />
  <area shape="circle" coords="124,58,8" alt="Venus" href="venus.htm" id="circle2" />
</map>
<div id="dialog" title="Dialog Title"></div>

Open in new window

0
 
RiverWalkAuthor Commented:

Hmmm... I'm probably not doing something right. I have followed your link and see that you have provided a really neat example, but I am not seeing how to get it to work. I also plugged the new lines of code into my page and I'm not seeing a dialog. Any ideas?

Thank you very much!
Riverwalk
0
 
RiverWalkAuthor Commented:
Whew!  Ok, I do see the dialog coming up on your exmaple. Sorry. I'm a goonball... Now, I will continue to apply what you have show me here to my actual page.

I'll let you know if I can't figure it out.

Thank you!
Riverwalk
0
 
leakim971PluritechnicianCommented:

 <! DOCTYPE html>
 <html>
 <head>
   <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" type="text/css"/>
   <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"> </ script>
   <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"> </ script>
<script>
jQuery(document).ready(function() {
    jQuery("#map-container AREA").mouseover(function(){

        var regionMap = '.'+$(this).attr('id')+'-map';
        var regionList = '.'+$(this).attr('id')+'-list';
        var regionList2 = '.'+$(this).attr('id')+'-list2';
        jQuery(regionMap).css('display', 'inline');

        jQuery("#dialog").html(regionMap)
        jQuery("#dialog").dialog();
    })

})
</script>
</head>
<body>

<img src="http://www.w3schools.com/tags/planets.gif" width="145" height="126" alt="Planets" usemap="#map-container" />

<map id="map-container" name="map-container">
  <area shape="rect" coords="0,0,82,126" alt="Sun" href="sun.htm" id="rectangle" />
  <area shape="circle" coords="90,58,3" alt="Mercury" href="mercur.htm" id="circle1" />
  <area shape="circle" coords="124,58,8" alt="Venus" href="venus.htm" id="circle2" />
</map>
<div id="dialog" title="Dialog Title"></div>
</body>
</html>

Open in new window

0
 
RiverWalkAuthor Commented:
Well hey, you deserve the points. You given me a working example, I've just got to get it working on my page. If I can't get it I'll as a new question related to the code you've given me. A more specific question. I should be able to get this to work. I don't know what I'm doing wrong. My page is an aspx page and does not have a body tag, in which to place, this line, "<div id="dialog" title="Trouble Shooting Dialog"></div>" so I don't know if that's it or not. I've tried to stick the line several places now, to no avail. I'll keep poking at it.

Thank you!
Riverwalk
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.