Solved

Image Map

Posted on 2014-09-16
4
159 Views
Last Modified: 2014-09-16
I made this map, with the help of Gary here on EE.  Only one problem, the dots on the map are very close to each other and when you get the mouseover bubble, it can obscure other points. I want to mouseover one of the points on the map and get the tooltip, but for it to disappear once you mouse off it.  Currently the tool tip and the text below stay "on" once you mouseover a point.  I want the full text below to stay on, but the tooltip to go off once you are off the point.  The full text should only change when you mouseover a new point.

you can see it here:
http://mac-test.com/map3.html

A good example is mousover the dot in North Africa (Moracco), then try the dot on Prague.  You cant mousever the Prague dot due to bubble.  I would like the bubble to go on/off once you leave the dot, but the content below to stay until you get to next dot.

Does that makes sense?

Thanks, M
0
Comment
Question by:a204801
  • 3
4 Comments
 
LVL 108

Expert Comment

by:Ray Paseur
ID: 40326598
Regarding this quote from the map: about —with you might want to have a look at this article.
http://www.experts-exchange.com/Web_Development/Web_Languages-Standards/PHP/A_11880-Unicode-PHP-and-Character-Collisions.html

I'll take a look at the rest of it in a moment.
0
 
LVL 108

Accepted Solution

by:
Ray Paseur earned 500 total points
ID: 40326623
Please see line 35.
http://iconoun.com/demo/a204801.php

<base href="http://mac-test.com/" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){

    // set the wrapper width and height to match the img size
    $('#wrapper').css({'width':$('#wrapper img').width(),
                      'height':$('#wrapper img').height()
    })

    //tooltip direction
    var tooltipDirection;

    for (i=0; i<$(".pin").length; i++)
    {
        // set tooltip direction type - up or down
        if ($(".pin").eq(i).hasClass('pin-down')) {
            tooltipDirection = 'tooltip-down';
        } else {
            tooltipDirection = 'tooltip-up';
            }

        // append the tooltip
        $("#wrapper").append("<div style='left:"+$(".pin").eq(i).data('xpos')+"px;top:"+$(".pin").eq(i).data('ypos')+"px' class='" + tooltipDirection +"'>\
                                            <div class='tooltip' data-text=\"" + $(".pin").eq(i).data('text') + "\">" + $(".pin").eq(i).html() + "</div>\
                                    </div>");
    }

$('.tooltip-up, .tooltip-down').mouseenter(function(){
		$('.tooltip').fadeOut(600);
		 $(this).children('.tooltip').fadeIn(600);
		$(".imagetext").html($($(" > div",this).data("text")).html());
})

$('.tooltip-up, .tooltip-down').mouseleave(function(){
		$('.tooltip').fadeOut(600);
})


});

</script>
<style>
/* Relative positioning*/

.map-intro {
	padding: 20px;
	background-color: #343433;
	color: #ffffff;
        height: 70px;
}
#wrapper {
	position: relative;/*box-shadow: 0 3px 3px rgba(0,0,0,.5);*/
        padding: 0 0 10px 0;
        background-color: #343433;
		height: 550px;
		clear:both;
}
/* Hide the original tooltips contents */
.pin {
	display: none;
}
/* Begin styling the tooltips and pins */
.tooltip-up, .tooltip-down {
	position: absolute;
	width: 10px;
	height: 10px;
}
.tooltip-down {
	background-position: 0 -52px;
}
.tooltip {
	display: none;
	width: 200px;
	cursor: pointer;
	position: absolute;
	top: 30px; /* moves bubble up/down in concert with above */
	left: 50%;
	z-index: 100;
	margin-left: -128px;
	padding: 10px;
	color: #222;
	border-radius: 18px;
	/*box-shadow: 0 3px 0 rgba(0,0,0,.7);*/
	background: #FC9;
	border: 1px solid #F90;
}
.tooltip::after {
	content: url("arrow-up-down2.png");
	position: absolute;
	top: -50px; /* moves arrow up/down in concert with below */
	left: 50%;
	margin-left: -10px;
}
.tooltip-down .tooltip {
	bottom: 30px; /* moves bubble up/down in concert with above */
	top: auto;
}
.tooltip-down .tooltip::after {
	bottom: -50px; /* moves arrow up/down in concert with above */
	top: auto;
	border-bottom: 0;
}
.tooltip h2 {
	font: bold 1.3em 'Trebuchet MS', Tahoma, Arial;
	margin: 0 0 10px;
}
.tooltip ul {
	margin: 0;
	padding: 0;
	list-style: none;
}
#wrapper-text {
	background-color: #343433;
	width: 956px;
}
.imagetext {
	width: 886px;
	background-color: #fff;
	margin: 0 0 0 20px;
	-webkit-border-radius: 20px;
	-moz-border-radius: 20px;
	border-radius: 20px;
	padding: 15px;
	min-height: 250px;
}
.team-travels {
	padding: 30px;
}
.clear {
	clear: both;
}

.helptext {
display:none;
}</style>
<div class="map-intro"><img class="left-right_bot_img" src="globe.png" width="68" height="70">People around the world are working on, testing, and talking about —with </div>
<div id="wrapper"> <img src="map3.png" alt="Map" width="956" usemap="#Map" border="0">
<div class="pin pin-down" data-text="#auckland-01" data-xpos="903" data-ypos="475"> <strong>Auckland, New Zealand</strong><br />
  Helping troubled teens with brain training</div>
<div class="pin pin-down" data-text="#shanghai" data-xpos="805" data-ypos="216"> <strong>Shanghai, China</strong><br />
  Brain plasticity-based training for neurological disorders</div>
<div class="pin pin-down" data-text="#marrakech" data-xpos="408" data-ypos="223"> <strong>Marrakech, Morocco</strong><br />
  Opening the first neuro-rehabilitation facility in Morocco</div>
<div class="pin pin-down" data-text="#toronto" data-xpos="202" data-ypos="175"> <strong>Toronto, Canada</strong><br />
  Brain plasticity in children</div>
<div class="pin pin-down" data-text="#nyborg" data-xpos="466" data-ypos="122"> <strong>Nyborg, Denmark</strong><br />
  Hearing recovery with cochlear implants</div>
<div class="pin pin-down" data-text="#prague" data-xpos="481" data-ypos="145"> <strong>Prague, Czech Republic</strong><br />
  The ethics of brain research and brain-plasticity training as a therapeutic</div>
<div class="pin pin-down" data-text="#sandiego-01" data-xpos="77" data-ypos="214"> <strong>San Diego, CA, USA</strong><br />
  Hearing and brain plasticity</div>
<div class="pin pin-down" data-text="#sydney" data-xpos="856" data-ypos="500"> <strong>Sydney, Australia</strong><br />
  "Redesign My Brain" TV mini-series</div>
<div class="pin pin-down" data-text="#adelaide" data-xpos="825" data-ypos="495"> <strong>Adelaide, Australia</strong><br />
  Improving workplace leadership skills</div>
</div>
<div id="wrapper-text">
  <div class="imagetext">help</div>
  <div class="team-travels">
    <h2>Mikes Team Travels:</h2>
    cities here...
    <h2>Research Collaberations:</h2>
    cities here... </div>
</div>
<!----- start map detail ------>
<div id="auckland-01" class="helptext">Auckland, New Zealand<br />
  At: National Meeting of High School Counselors<br />
  Topic: Helping troubled teens with brain training<br />
  <br />
  Plasticity-based training has an exciting potential for helping teenagers with impulse control problems, learning disabilities, and addiction issues. Dr. Merzenich was invited to give the keynote lecture to New Zealand's National Meeting of High School Counselors to talk more about how brain-training exercises can help get students on track. <br>
  <br>
  <strong>What you can do: </strong><br>
  Some of the challenges kids face has to do with an inability to focus their attention. Try the <a href="/play#ex-select/attention">attention exercises</a> on BrainHQ.</div>
<div id="shanghai" class="helptext">Shanghai, China <br>
  At: East China Normal University <br>
  Topic: Brain plasticity-based training for neurological disorders <br>
  <br>
  Brain training is great for everyone--but it can be especially life changing or people with neurological disorders. Dr. Merzenich gave two lectures in Shanghai on the potential of brain-plasticity-based training for people with various neurological disorders, from Parkinson's disease to traumatic brain injury to depression. <br>
  <strong><br>
  What you can do: </strong><br>
  There are currently special courses on BrainHQ for people with <a href="/play#challenges/chemobrain_1_challenge/intro">chemobrain</a>, <a href="/play#challenges/tbi_1_challenge/intro">brain injury</a>, and <a href="/play#challenges/auditory_1_challenge/intro">auditory processing</a> issues. More courses are in the works. </div>
<div id="marrakech" class="helptext">Marrakech, Morocco<br />
  At: Moulay Ali Institute for Rehabilitaiton (MAIR)<br />
  Topic: Opening the first neuro-rehabilitation facility in Morocco <br />
  <br />
  Based on his reputation and work as a leader in the field of  neuro-rehabilitation, Dr. Merzenich was invited to give the keynote  lecture at the opening of the first facility in Morocco to focus on  helping people with neurological disabilities, brain injuries, stroke,  and spinal cord injuries regain function. Before the opening of MAIR,  people with brain traumas in that area had few options for  rehabiltation. This is a great development for northern Africa! <br />
  <br />
  This event is hosted by Princess Lalla Zineb, the President of the Moroccan League for the Protection of the Child. <br />
  <br />
  <strong>What you can do: </strong><br />
  If you have a brain injury, we recommend the <a href="/play#challenges/tbi_1_challenge/intro">Brain Injury Survivor course</a> on site.</div>
<div id="toronto" class="helptext"> Toronto, Canada<br>
  At: Children's Hospital Annual Lecture<br>
  Topic: Brain plasticity in children<br>
  <br>
  Dr. Merzenich's talk at the Children's Hospital Annual Lecture was on the potential of brain-plasticity-based training for children with neurological issues, such as cerebral palsy and learning disabilities.<br>
  <br>
  <strong>What you can do: </strong><br>
  <a href="/play">BrainHQ</a> isn't built specifically for children, but many of the exercises  focus on core cognitive functions that may help with certain  difficulties, especially in attention, brain speed, and memory. </div>
<div id="nyborg" class="helptext"> Nyborg, Denmark <br>
  At: International Symposium on Auditory and Audioogical Research <br>
  Topic: Hearing recovery with cochlear implants <br>
  <br>
  Dr. Merzenich is a world expert on hearing. In the 1980s, he led the team that invented the cochlear implant - a device that helps people with a damaged inner ear to hear sound. <br>
  <br>
  But the ear is just the sound "receiver." It's the brain that figures out what those sounds mean - that makes sense of the sounds. Dr. Merzenich contined his work at improving hearing with the auditory exercises in BrainHQ. Science studies show that these eercises improve auditory processing in the brain, helping people hear more quickly and clearly. His talk at this symposium highlighted the value of using the auditory BrainHQ exercises for people with cochlear implants. <br>
  <br>
  <strong>What you can do: </strong><br>
  Try the auditory exercises in BrainHQ: <a href="/play#lev-select/brain_speed/2">Sound Sweeps,</a> <a href="/play#lev-select/brain_speed/4">Find Tuning,</a> <a href="/play#lev-select/memory/1">Memory Grid,</a> <a href="/play#lev-select/memory/2">Syllable Stacks,</a> <a href="/play#lev-select/memory/0">To-Do List Training,</a> and <a href="/play#lev-select/people_skills/1">In the Know.</a></div>
<div id="prague" class="helptext"> Prague, Czech Republic<br>
  At: European Neuroscience Society<br>
  Topic: The ethics of brain research and brain-plasticity training as a therapeutic<br>
  <br>
  Dr. Merzenich gave two talks at the annual meeting earlier this year. <br>
  <br>
  The  first talk focused on the many complicated ethical questions facing  scientists as they develop drugs and technologies that are able to  change the human brain. What brain changes are good, and what ones risk  crossing a line? As scientists discover more and more ways to alter  thinking, memory, emotion, action, and other brain functions, such  ethical questions are becoming extremely important.<br>
  <br>
  In the second  talk, Dr. Merzenich shared the potential of brain-plasticity-based  training for treating the symptoms of brain traumas—including  concussions, traumatic brain injuries, and stroke. <br>
  <strong><br>
  What you can do: </strong><br>
  If you have a brain injury, we recommend the <a href="/play#challenges/tbi_1_challenge/intro">Brain Injury Survivor</a> course on BrainHQ. <br>
</div>
<div id="sandiego-01" class="helptext"> San Diego, CA, USA <br>
  At: Association for Researchi in Otolaryngology<br>
  Topic: Hearing and brain plasticity<br>
  <br>
  Dr. Merzenich participated in a symposium in which he shared the tremendous research that has been done on the benefits of brain-plasticity-based training (with the auditory exercises in BrainHQ) for people with hearing problems, including auditory processing disorders, normal cognitive changes in hearing due to age, and more. Using certain BrainHQ exercises has been demonstrated to speed up auditory processing by 131% and improve the ability to separate speech from noise. <br>
  <br>
  <strong>What you can do: </strong><br>
  The studies showing these benefits were based on the use of six auditory  exercises in BrainHQ: <a href="/play#lev-select/brain_speed/2">Sound Sweeps,</a> <a href="/play#lev-select/brain_speed/4">Find Tuning,</a> <a href="/play#lev-select/memory/1">Memory Grid,</a> <a href="/play#lev-select/memory/2">Syllable Stacks,</a> <a href="/play#lev-select/memory/0">To-Do List Training,</a> and <a href="/play#lev-select/people_skills/1">In the Know.</a> </div>
<div id="sydney" class="helptext"> Sydney, Australia <br>
  At: Australian Broadcasting Corporation (ABC) <br>
  Topic: "Redesign My Brain" TV mini-series <br>
  <br>
  In 2013, an Australian mini-series called Redesign My Brain aired to resounding acclaim. Dr. Merzenich was featured in the mini-series as one of the scientific mentors to the star, Todd Sampson. The series was so popular that they have decided to continue the project, again with Dr. Merzenich as an on-air personality and off-air consultant. <br>
  <br>
  <strong>What you can do: </strong><br>
  In the 2013 show (Part 1 of Redesign My Brain), Todd Sampson "redesigned" his brain using the Brain Training for <a href="/play#challenges/achiever_1_challenge/intro">High Achievers challenge</a> on BrainHQ. The challenge for Part 2 is still in development! </div>
<div id="adelaide" class="helptext"> Adelaide, Australia <br>
  At: The Royal Institution of Australia <br>
  Topic: Improving workplace leadership skills <br>
  <br>
  The Royal Institution is a national Australian organization with a mission to bring breakthroughs in science to the Australian people. At this talk, given to an audience comprised of hundreds of professionals, executives, and other working people (and streamed online to many more), Dr. Merzenich explained how brain training can improve efficiency, increase competitive advantage, and strengthen overall workplace performance. <br>
  <strong><br>
  What you can do: </strong><br>
  Try the Brain Training for <a href="/play#challenges/achiever_1_challenge/intro">High Achievers challenge</a> on BrainHQ. It's designed just for people who are already doing well...but know they can do even better. </div>

Open in new window

0
 

Author Comment

by:a204801
ID: 40326678
Thanks Ray.  This seems to work perfectly.  Once I fill in the rest of the cities I will know for sure.  Thanks again!
0
 
LVL 108

Expert Comment

by:Ray Paseur
ID: 40326810
Thanks for the points and thanks for using E-E.  As long as the elements use the same class name, the same process will be applicable to all.
0

Featured Post

IT, Stop Being Called Into Every Meeting

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

Join & Write a Comment

Suggested Solutions

Title # Comments Views Activity
Open a div with click on an image 7 44
jqplot Pie Chart 2 16
increase words that display in widget 6 17
Gradient CSS 4 13
As a result of several questions about how to use Bootstrap I thought it would be a good idea to write down the development aspect of creating a Bootstrapped website in as little time as possible. Part 1 of this article will only concentrate on g…
This article discusses four methods for overlaying images in a container on a web page
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…
In this tutorial viewers will learn how to style different bullet points for unordered lists in CSS. Begin with a normal unordered list; the default bullet point is a solid circle: In the CSS, create a defined class of unordered list by typing "ul.S…

758 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

19 Experts available now in Live!

Get 1:1 Help Now