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?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

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

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
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
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
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

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
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JavaScript

From novice to tech pro — start learning today.