Yahoo Answers is shutting down on May 4th, 2021 (Eastern Time) and beginning April 20th, 2021 (Eastern Time) the Yahoo Answers website will be in read-only mode. There will be no changes to other Yahoo properties or services, or your Yahoo account. You can find more information about the Yahoo Answers shutdown and how to download your data on this help page.
Trending News
HTML code to go to location on mapped image?
I have an image of a map of UK, with highlighted & mapped locations on it, for various engineers throughout UK – if you click any of the mapped links, it takes you to the relevant <name> tag on a large HTML list of engineers. That code works fine.
If possible, I want to have the reverse option, so if I click on a link on the list of engineers, it takes you to the matching location on the UK map image (and/or highlights that location).
I have searched all my usual sources of useful code, and can only find info on links from mapped images – nothing about text pages with links to hot spots on an image.
All suggestions much appreciated – the simpler the better please!
PS - I do not want links to Multimap or Google Maps postcodes (already have those) I want to re-use my customised UK map image - unless somebody has another way to do this?
Thanks for that Chris - I have made a local copy of the website to play with.
I believe your code assumes the image is embedded in the same HTML document as the engineers list, when in fact it is (presently) separate - i.e. click on a link on the engineers list page, and it jumps from that list to a GIF image with its own page of mapping code.
As a complete noob to Jquery, please tell me if that can still work?
2 Answers
- Chris SLv 51 decade agoFavorite Answer
Unless your map is extraordinarily large, I'm guessing that you don't need to actually have the map scroll to a specific location but that you would like to show the map when the link is clicked and then have the area in question highlighted or called out. Would that work? If so, here's a good way of going about it:
1) Get and run jQuery on your site: http://jquery.com/
Really, all you need to do is add this to your <head> section:
EDIT: it's truncating my code. if you see this -> that means that this line is continued from the line before it. Place both parts on the same line (remove the ->)
<script src="https://ajax.googleapis.com/ajax/
-> libs/jquery/1.4.2/jquery.min.js">
-> </script>
2) Place an anchor tag just before your map.
<a name="map"></a>
2) For each location that needs to be highlighted or called out create a <div> that will be absolutely positioned over the map. This div would contain an image (preferably something with a transparent background) that you are going to use as your callout. Something like a star or Google's place pin. Each div should have the same class but should also have a unique class:
<div class="callout london"><img src="/img/mycallout.png"/></div>
<div class="callout birmingham"><img src="/img/mycallout.png"/></div>
3) In your styles you're going to define your classes and IDs as follows:
.callout {
position:absolute;
display:none; /*hide this at first while you are working on placement*/
height:100px;
width:100px;
}
.london {
top: 50px;
left: 200px; /*adjust these numbers as necessary for each div in order to get the callout to appear where you want it*/
}
.birmingham {
top: 100px;
left: 125px;
}
4) Place this javascript in the <head> of your page (make sure it comes after the line that calls the jQuery script): EDIT: it's cutting off my script for some parts. if you see this -> that means that this line is continued from the line before it. Place both parts on the same line (remove the ->)
<script type="text/javascript">
$(document).ready(function() {
$(".myCalloutLink").click(function() {
$("div.selected").hide();
$("div.selected").removeClass
-> ("selected");
$("div").hasClass($(this)
-> .attr("id")).show();
$("div").hasClass($(this)
-> .attr("id")).addClass("selected");
});
});
</script>
5) Finally, for each of the links in your lists of engineers, give them an ID that matches the class for the area that you are calling out. You'll also need to add the myCalloutLink class to them.
<a href="#map" class="myCalloutLink" id="london">London-based Engineer</a>
<a href="#map" class="myCalloutLink" id="birmingham">Birmingham-based Engineer</a>
Alternatively, you could try creating the interactive map in Adobe Flash. But that's a whole other learning curve.
EDIT: You're right, I was assuming that the map was on the same page as the list of engineers. Yes, we can still work out a solution for you. But, all of that code that I just gave you was for naught! Oh well, interesting solution anyways so I'm going to leave it up.
Here's how you'll work it instead:
1) Steps 1 through 3 remain the same
4) This is the script that will go on the page with your map:
<script type="text/javascript">
function getParameterByName( name )
{
name = name.replace(/[\[]/,"\\\[").replace(/[\]]/,"\\\]");
var regexS = "[\\?&]"+name+"=([^&#]*)";
var regex = new RegExp( regexS );
var results = regex.exec( window.location.href );
if( results == null )
return "";
else
return decodeURIComponent(results[1].replace(/\+/g, " "));
}
$(document).ready(function() {
var locId = getParameterByName("locId");
$("div").hasClass(locId).show();
});
</script>
5) Now, for your links you are going to pass a query string to the map page. This is what the script above will use to figure out which location to show. Note that you do NOT need to have an id on the link any more:
<a href="/map.html?locId=london">London-based Engineer</a>
<a href="/map.html?locId=birmingham">Birmingham-based Engineer</a>
Hope that helps!
- Anonymous5 years ago
11005
