I have a custom map of the USA with about 20 polygonal hot spots. I would like a box to pop up next to each hot spot on hover, with text and links drawn from my DB specific to the location. I would have thought this is a common situation, but I can't find a solution that works. I tried using an asp:imagemap and an ajax popup extender but you can't assign IDs to hotspots and it doesn't support mouseover events. I tried css with an html image map but I can't figure out how to use css solutions with polygonal hot spots, and I also don't know how to link it to get the data from the db without asp targets (I'm not very familiar with jquery, which would work, I am guessing). Anyone know of any simple-ish solutions out there?
I don't see why this is any different than creating a popup in any other context. There are a number of ways to attach "data" to an area element. The simplest I can think of is to use the alt attribute.
Check out this demo for example. (Code below.)
HTML
<body>
<p>Hover on the sun or on one of the planets to get its info:</p>
<div id="map">
<div id="overlay"></div>
<img src="http://www.w3schools.com/TAGS/planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap" />
</div>
<map name="planetmap">
<area shape="rect" coords="0,0,82,126" alt="Sun" href="http://www.w3schools.com/TAGS/sun.htm" />
<area shape="circle" coords="90,58,3" alt="Mercury" href="http://www.w3schools.com/TAGS/mercur.htm" />
<area shape="circle" coords="124,58,8" alt="Venus" href="http://www.w3schools.com/TAGS/venus.htm" />
</map>
</body>
JS
$('area').each(function(){
var area = $(this),
alt = area.attr('alt');
area.mouseenter(function(){
$('#overlay').html(alt);
}).mouseleave(function(){
$('#overlay').html('');
});
});
CSS
#map {
position: relative;
}
#overlay {
position: absolute;
background: #000;
color: #fff;
top: 20px;
left: 20px;
}
No AJAX calls, but those could easily be added to the mouseenter and mouseleave event s of each area element.
This requires a javascript solution (with data of course supplied server-side). Have you seen Using JQuery hover with HTML image map yet to get you started?
In fact, the provided answer provides a link to http://plugins.jquery.com/project/maphilight and a demo at http://davidlynch.org/js/maphilight/docs/demo_usa.html. It's not exactly what you're looking for, but it's close.
I'd be happy to point out how to best integrate your server-side data with your client-side map highlighting, but would need more info.
Related
QUESTION 1: I want to use a specific url if the user is visiting the page with a specific language
<div class="homepage-footer">
<img id="imgHomepageFooter" runat="server"
usemap="#videomap" alt="Video" meta:resourcekey="imgHomepageFooter" />
<map name="videomap">
<area shape="rect" id="youtubeVideo" coords="43,0,560,56" href="http://www.youtube.com/watch?v=Q2QsjVCapjs" target="_blank" alt="Youtube Video"
/>
</map>
</div>
I need to replace href with a specific url because the for spanish peoplo the video could be in youtube, but for english in www.google.com how could I redirect the page depending on my metaresources
QUESTION 2: I am using css for this page, but if I put the css separatly I don't know how to use inside the meta:resourcekey, so I put it as a part of my page and still I don't know the combination, I need to replace the background-image with a specific resources if I am using a specific language(that is the scenario)
style type="text/css">
div.countdown-image
{
background-image: url(../images/homepage/countdown-image-ENG-2015.png);
background-repeat: no-repeat;
height: 150px;
}
</style>
<!-- Countdown -->
<div id="countdown-container">
<div class="countdown-image">
<div id="countdown-timer" class="countdown-bottom">
</div>
</div>
<input id="DeadlineDateTime" value="" runat="server" type="hidden" />
</div>
One option is to handle the request server-side changing the values of the HTML controls as you need, based on the user's language. The answer of #All Blond follows this approach.
Another option is do the same but client-side, using JavaScript (jQuery recommended). You can locate the relevant HTML objects (using the jQuery selector $) and replace / update its properties based on the user's language as you need.
If you are on C#/ASP.net side then basically you should use in your main or onInit function
string userLang = HttpContext.Request.UserLanguages.ToString();
// I would prefer do switch based on userLang but it could be as simple as:
if (userLang = "en-CA")
{
// here you can do switch for your content anyway you want to.
// including changing your assign CSS or images - as a string or InnnerHTML content
// it is depend on solution you implement in your code.
}
Values "en-CA" you can look up on Google for example for each needed language.
I am curious as the best (only?) way to go about this.
I was asked to make a text link, display an image (under it) upon rollover and of course disappear when you rolloff the link.
(the original personal used some in-line style that broke the page, instead of declaring a block).. they also tried to use an IMAGE MAP to make the displayed image a LINK/clickable, and have a different/unique URL that the TEXT link used to display the image.
I made the style:
/*custom client requested CSS styling/functionality*/
a.imageDisplay img {
display:none;
}
a.imageDisplay:hover img {
display:block;
}
Here is a snippet of the HTML I am try to add this functionality to:
<a class="imageDisplay" href="#">Client Name XYZ<img src="/UserFiles/image/ALLSAtestpage3.jpg" usemap="#allsa" /><map id="allsa" name="allsa"><area coords="12,113,123,142" href="http://www.nike.com/" shape="rect" target="_blank" /></map></a><br />
My question is: what is the best way (better way) to add a LINK/URL to the image that is being displayed?
Because the image is INSIDE the anchor/link tag.. is will also be/get the same URL as the target when clicked....yes?
Anybody have some SIMPLE ideas as a work around?
(I really hate those MAP tags anyways) :)
thanks!
Is this simple?
<span class="txt-img">
<a class="txt" href="#1">Client Name ABC</a>
<a class="img" href="#2"><img src="http://placehold.it/200/0000cc/" /></a>
</span>
.txt-img {position:relative;}
.txt-img .img {position:absolute; display:none; left:0;}
.txt-img:hover .img {display:block;}
FIDDLE: http://jsfiddle.net/46Tf6/
I'm trying desperately to make the link on a linked image work but whenever I click on the link, my browsers (Chrome & Firefox) just tell me they are connecting to the page and I get a continuous spinning image as if the browser were doing something. The link works perfectly if I open in another tab.
The div in question is coded and styled in a Wordpress page. I am making changes to another developer's work for a customer.
Here's the div:
<div style="position: absolute; top: 645px; left: 80px; width: 150px;">
<a href="http://themoneycouple.com/?p=4681" target="_top" style="display:inline-block">
<img src="http://themoneycouple.com/wp-content/uploads/2013/10/kit-history.png" alt="Toolkit History Link" width="150" height="170" style="position:relative; display:block; z-index:999999999999;" />
</a>
</div>
And here's the page it's on: http://themoneycouple.com/resources/love-and-money-kit/
I've tried changing the z-index on every element in multiple ways, tried changing the link target in every way possible, changed display settings, etc.
One last note, there are lots of iframes on this page and I'm not sure if those are messing things up somehow. Massive thanks for any help.
It looks like the URL for that HREF is trying to load a page as a modal using the fancybox protocol. Is this what is expected?
Does that page ID exist? It looks URL looks different from the other page URLs on the site.
There is a jQuery function that targets every IMG tag w/ an A tag and applies a class of "fancybox". Modify the specificity of this function to exclude the last item in the gallery. Better yet, create a new class and add it to the elements that should have the fancybox functionality. The same issue happens on other pages where the HREF goes to a page instead of opening an image.
Current jQuery function:
var thumbnails = jQuery("a:has(img)").not(".nolightbox").filter( function() { return /\.(jpe?g|png|gif|bmp)$/i.test(jQuery(this).attr('href')) });
thumbnails.addClass("fancybox").attr("rel","fancybox").getTitle();
I think I found the link you mean and it has a fancybox class on it, so I presume it is trying to open a fancybox javascript plugin popout for your link.. which is a redirect and failing to do so, since I can right click the link and go to open in new tab and it works.
I have a portfolio that works fine but I'm currently building a CMS for it so that I can simply upload the image and it adds it to the site for me. Before I build it, I'm rebuilding some of the scrappy code and converting the what was a JS powered gallery to a CSS powered one.
I'm trying to achieve this click effect in CSS. http://www.tomdwyerdesign.com/graphics/
I thought I could do it via the :focus selector but I've run into a little problem.
This is the HTML:
<a class="tile" href="#">
<img src="images/thumbs/DLPWD.png" class="dlpwd" />
</a>
and this is the CSS:
.tile:focus img{
background-image: url("images/large/DLPWD.png");
width: 771px;
height: 600px;
}
It doesn't seem to select it properly. Any one know why?
Thanks.
The problem is that a link is not necessarily focused when it's clicked, it's focused when you navigate to it. You can do this with the keyboard, or you could add a click handler to the link. Of course at that point, you're back into javascript, but it shows what's happening.
E.g.
<a class="tile" href="#" onclick="this.focus()">
<img src="images/thumbs/DLPWD.png" class="dlpwd" />
</a>
Luckily, there is a better solution, and one that doesn't require javascript. If you add a tabindex to the link, clicking it will focus it even if the href is going nowhere. So...
<a class="tile" href="#" tabindex="0">
<img src="images/thumbs/DLPWD.png" class="dlpwd" />
</a>
Should do what you want.
(your next problem is going to be that the background-image won't be visible in front of the src image - you're just going to get a stretched version of the thumbnail. But I think that's a different question)
:focus is only available on elements that receive keyboard input (i.e. form elements). You could try :active but it will only apply the CSS while the mouse button is down.
I'm using KML and the GGeoXml object to overlay some shapes on an embedded Google map. The placemarks in the KML file have some custom descriptive information that shows up in the balloons.
<Placemark>
<name />
<description>
<![CDATA[
<div class="MapPopup">
<h6>Concession</h6>
<h4>~Name~</h4>
<p>Description goes here</p>
<a class="Button GoRight FloatRight" href="#"><span></span>View details</a>
</div>
]]>
</description>
<styleUrl>#masterPolyStyle</styleUrl>
...Placemarks go here ...
</Placemark>
So far so good - the popups show up and have the correct text in them. Here's the weird thing: I'm trying to use CSS to format what goes in the popups, and it halfway works.
Specifically:
The <h6> and <h4> elements are rendered using the colors and background images I've specified in my stylesheet.
Everything shows up in Arial, not in the font I've specified in my CSS.
The class names seem to be ignored (e.g. none of the a.Button formatting is applied; if I define a style like the one below, it's ignored.)
div.MapPopup { background:pink; }
Any ideas? I wouldn't have been surprised for the CSS not to work at all, but it's weird that it only partly works.
Update
Here's a screenshot to better illustrate this. I've reproduced the <div class="MapPopup"> markup further down on the page (in yellow), to show how it should be rendered according to my CSS.
As suggested I've gone in with Firebug to see what's going on. It looks like Google is doing two obnoxious things:
It's stripping out all class attributes from my HTML.
It's throwing all kinds of hard-coded styles around.
Here's my HTML along with the first couple of wrappers inserted by Google:
<div style="font-family: Arial,sans-serif; font-size: small;">
<div id="iw_kml">
<div>
<h6>Concession</h6>
<h4>BOIS KASSA 1108000 (Mobola-Mbondo)</h4>
<p>
Description goes here</p>
<a target="_blank"><span />View details </a>
</div>
</div>
</div>
As you can see, my classes (e.g. MapPopup in my first div, Button etc. in the <a> tag) have all been stripped out.
Knowing this I'll be able to work around Google's interference, using !important and targeting the container div for the whole map - still, this is annoying, and unexpectedly clumsy coming from Google.
More related obnoxiousness related to the HTML in a KML <description> block: Any links are given the attribute target="_blank", whether you like it or not. I'm currently exploring ways to undo that, using jQuery, but what a drag. I really don't understand why Google feels the need to tamper with this HTML.
See also this thread on the official Google Group.
I've had similar issues. I don't know how you are implementing your Marker, or if you are using InfoWindow, or .addListener, but they way I have had to get css styling to work inside of the "pop up bubble" (over the Marker) is to use what is called "inline styling." So I have a variable that I pass into InfoWindow. Assuming you have initialized a variable "marker" with some options, and have the "map" instance created, some example code would look like this:
/*start of myHtml2 variable*/
var myHtml2 = "<div style=\"background-color:lightgray\"><div style=\"padding:5px\"><div
style=\"font-size:1.25em\">Some text</div><div>Some more text<br/>
Yet more text<br/></div><table style=\"padding:5px\"><tr><td><img src=\"A lake.jpg\"
width=\"75px\" height=\"50px\"></td><td>More text<br/>Again, more text<br/><div
style=\"font-size:.7em\">Last text</div></td></tr></table></div></div>"
/*end of variable*/
var infowindow2 = new google.maps.InfoWindow({content: myHtml2});
/*mouseover could be 'click', etc.*/
google.maps.event.addListener(marker, 'mouseover', function(){
infowindow2.open(map, marker);
});
I know the css styling code is cumbersome, but I haven't found a way to use complicated css styling inside "the bubble pop up" using css in the head, or from a style sheet There are always conflicts, and some features don't render properly.
My first guess is that you're running into an issue with CSS specificity. There is a good article on it at http://www.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/, so if you can include a container element ID, that may help.
Let me know if this doesn't turn out to be the problem and I'll come up with more ideas.