I took a bit of a break from learning Angular for a while, and I'm jumping back in and am having something of an issue controlling an image map.
Basically, I've got a map with a bunch of weirdly shaped areas, and I want the mouse rollover to control a filter in an earlier ngRepeat - I know that I can set ng-mouseEnter on standard divs to change the value of a model and update my data in real time, but I have no idea how to get that working inside a map as ng-mouseEnter won't work with standard image maps.
My thought was, I set a really simple inline script function like this:
function showThis(thing) {
return thing;
}
and have my onMouseEnter part of the image map update that function, then reference that in my filter. A quick example of what I was thinking of in code (with one of my image map areas copy-pasted, to show that it would be kind of difficult to just make invisible divs) -
...
<script>
function showThis(thing) {
console.log(thing);
return thing;
};
</script>
<div class="foobars" ng-repeat="foo in fooBar | filter:showThis():true">
<p class="foo_text">{{foo.snippet}}</p>
<img ng-src="{{foo.imagePath}}">
</div>
<div class="images">
<img src="images/map/base.png" usemap="#imagemap">
<map name='imagemap'>
<area shape='poly' alt='Area One' href='' coords='33,288,35,276,41,272,60,276,96,234,97,198,140,171,189,192,182,242,144,261,144,271,108,286,66,297,42,296' onMouseEnter='showThis(1)'/>
<area shape='poly' alt='Area Two' href='' coords='245,170,186,194,144,176,149,136,212,110,252,123' onMouseEnter='showThis(2)' />
</map>
</div>
But that doesn't work, and I can't work out how to get the idea running. I'm clearly missing something obvious, but I don't know what - I know I could create a custom filter in the controller, but I still don't know how to associate the image map's "onMouseOver" with the filters inside the controller. Angular and this particular feature of imagemaps don't seem to work too well together to my lame eyes.
I made a plunkr here to show my broken-ass code. Where am I going wrong?
I forked your plunker after making some changes that, I think, solve the problem you were trying to solve...
What #wZVanG says is correct, regarding the use of ng-mouseenter.
Additionally, I wasn't quite sure what your plan was with showThis and your second ng-repeat, so I added a function, setSnippet that is called on mouse enter and then display the correct snippet under the image through a simple div.
Hope that helps.
Use ng-mouseenter instead onMouseEnter, add # in href attribute of area element to avoid reload the page:
<area shape='poly' alt='Area One' href='#' ng-mouseenter='showThis(1)'
coords='33,288,35,276,41,272,60,276,96,234,97,198,140,171,189,192,182,242,144,261,144,271,108,286,66,297,42,296'/>
Related
On this page I need the "Get Directions," button to highlight one of three points/map markers already on the map. So far, I have the following wrapped around the button/img....
<img src="images/get-directions.jpg" alt="get directions"><br>
Though that code is not working. Any idea, where I went wrong with that code or know a better way?
It looks like you are using static map url but you have embed map?
https://www.google.com/maps/embed/v1/directions
?key=API_KEY
&origin=
&destination=
I'm building a resource website for the facility I work and need help with a script.
I have an image of multiple medications that i'd like to hover to display more info. The following link is an example i found online.
image link
I'd like to be able to hover each medication to have a window pop up next to it with a close up image, the name of the drug, and a hyper link to an external site. What would the easiest way to achieve this.
Thanks so much!
Use an image map and some javascript mouse event action. The main image is an image map with rectangular/circular 'area' regions. Infos are put into 'div' blocks that are made visible/invisible with style property 'display' set to 'block' or 'none'. The init() function makes all 'div' blocks invisible at start.
HTML:
<img src="XYZ" alt="medications" usemap="#medsMap">
<map name="medsMap">
<area shape="rect" coords="x,y,w,h" onmouseover="showInfo('med1')" onmouseout="hideInfo('med1')" >
<area shape="circle" coords="x,y,r" onmouseover="showInfo('med2')" onmouseout="hideInfo('med2')" >
</map>
<div class="medInfo" id="med1">
// All your html about medication 1
</div>
<div class="medInfo" id="med2">
// All your html about medication 2
</div>
Javascript:
window.onload = init;
function init(){
var infos = document.getElementsByClassName('medInfo');
for (var i=0, i<infos.length, i++){
infos[i].style.display = 'none';
}
}
function showInfo(divId){
document.getElementById('med1').style.display = 'block'
}
function hideInfo(divId){
document.getElementById('med1').style.display = 'none'
}
easiest may not be the best in the case... however a simple solution would be something with abosolute positioned divs inside a relative positioned container div with the image set to the background. you could assign a click handler to each one to grab the data from an object and populate the target... the data might look something like this
var myItems = {
item1: {
img: 'http://www.photo-dictionary.com/photofiles/list/6666/8841blue_pill.jpg',
headline: 'the blue pill',
body: 'this pill is blue and comes in a purple box'
},
item2: {
img: 'http://www.photo-dictionary.com/photofiles/list/6679/8857red_pill.jpg',
headline: 'the red pill',
body: 'this pill is red and comes in a red box'
}
};
here is an example of that concept in a fiddle
http://jsfiddle.net/pixelchemist/3fL8P/
It's difficult to give a "good" answer without seeing what the actual data is you wish to display. However from what you have provided the most accessible method would be to use an HTML image map.
Here are the MDN docs for the separate HTML elements you will need to use:
Map link
Area link
Essentially you define rectangles, circles or polygons (using coordinates) which "overlay" the associated image. Each area can have an alt attribute which screen readers will be able to use for those viewing your site with visual impairments. The href attribute will provide you with the link to the external site.
Now there are several offline tools that can help you create image maps, here is an online one ...I am not necessarily recommending it over others, however it will provide you with an idea of how they work.
Once you have the accessible version in place, you can use JavaScript to provide extra functionality on top of that. How you wish to do that is really up to you, and again would be defined by the exact content you wish to display, and there are several pre made scripts out there for the purpose, however if you were simply wanting to display the alt/href in a basic tooltip then it wouldn't require more than a few lines of bespoke HTML/JavaScript.
Again, without recommending them, here are a couple of common solutions:
solution 1 and solution 2
Even if this is not exactly what you are looking for, it should provide you with some help at deciding your final solution.
I have this Problem.
I am using Grid.js (http://tympanus.net/codrops/2013/03/19/thumbnail-grid-with-expanding-preview/)
And now I want to add a Lightbox with multiple thumbnails inside the dropout.
Grid.js has an function where it puts all the content into the dropout, so I thought I may use this function.
this.$href = $('<div class="image-row"><div class="image-set"><a class="example-image-link" href="img/demopage/image-3.jpg" data-lightbox="example-set" title="Click on the right side of the image to move forward."></div>');
I shortenend the code, its very long (not very pretty I admitt), now it shows on the dropout, but I need for each Dropout a new set of images.
Is there any way I can fetch the href="" data out of the HTML? Or another, more practical way to do it?
I admit I have absolutly no clue of JavaScript.... I hope someone can help me! Thanks in Advance
In jQuery you can use $('.example-image-link').attr('href');
Let's say there are several identical images on the page, all associated with the same map:
<img id="img1" usemap="#my-map" .... >
<img id="img2" usemap="#my-map" .... >
<img id="img3" usemap="#my-map" .... >
<map name="my-map">
<area .... coords=... class="foo">
<area .... coords=... class="bar">
</map>
There is a mouseover eventhandler on each AREA.
Fom within the scope of those area mouseover eventhandlers, i.e. referencing only the variables that are local to the area's mouseover event, no global variables, is it possible to know which image the mouse is on? Is there some transient relationship that is exposed by the DOM, so the area's mouseover eventhandler could answer the question "Which image am I mapping at this moment?"
Please rule out attaching handlers directly to the images themselves. I am not trying to solve the problem but am trying to find out what, if anything, can be known inside the area's mouseover eventhandler about the currently asociated or "hot" image.
Thanks
You can use something like this to find the id.
$('area').bind('mouseover',function(e) {
alert(e.fromElement.id); // will alert the ID of the image
});
There's a ton more information you can get from the fromElement such as the src, outerHTML etc. Your best bet is to use console.log(e); and poke around with what it dumps into the console using Google Chrome or Firebug in Firefox.
EDIT This approach is fickle at best and shouldn't be relied upon. What's available in e appears to be determined by what you're binding to, and what function you're getting e (click, mouseover etc).
I have 4 images that I use as a navigation menu, when I click on one it lights up (changes image) and the current goes out, and so on so forth.
It works well in chrome and ff (no firebug errors)
But in IE8 the functioning of the clicks (where it changes the view of a div) work it just doesn't change the img src here's the code:
<li id="bulletli1">
<a href="#">
<img id="bullethover1" src="img/bulleto.png" height="30px" width="30px" style="position:absolute">
<img id="bullet1" name="bullet1" height="30px" width="30px" src="img/bulletwhite.png" onmousedown="this.src='img/bulletwhite.png';document.images['bullet2'].src='img/bullet.png';document.images['bullet3'].src='img/bullet.png';document.images['bullet4'].src='img/bullet.png'" style="opacity:0.4;filter:alpha(opacity=40)"/>
</a></li>
So basically what happens is inside onmousedown this.src gets set to the white bullet and all the others get set to the dark bullet point. There are no errors in the developer's tools.
Does this.src not work in IE8? Any advice would help, Thanks!
please check out, if there doesn't exist more than 1 image with the same name/id-Attribute.
In that case, IE would take the last of the images with the same name(note that document.images['somename'] can be an Array ), while other UserAgents will take the first One.
Maybe in that case you only don't see the change, for example if the changed image is outside the viewport.
greets
You shouldn't be embedding your JS into your code like this. While I advise using a library like jQuery (which will make your life easier), I'll explain without it.
Don't embed your JS into your code. If you really really need to, have it call a function like this:
<img id="bullet1" name="bullet1" height="30px" width="30px" src="img/bulletwhite.png" onmousedown="bulletClicked()" style="opacity:0.4;filter:alpha(opacity=40)"/>
Then in your head section between script tags you'll run your javascript:
function bulletClicked() {
this.src='img/bulletwhite.png';
document.images['bullet2'].src='img/bullet.png';
document.images['bullet3'].src='img/bullet.png';
document.images['bullet4'].src='img/bullet.png';
}
From what it looks like, you're going about this the wrong way, you're probably putting that onclikc code into every bullet image, slightly modified for each one. Instead, if you just used events you would simplify so much.
If you did something like this... (and specified your height, width, and other CSS in a style section, where they belong, don't do what you did, ever again).
<img id="bullet1" name="bullet1" src="img/bulletwhite.png" onmousedown="bulletClicked(this)"/>
Then your javascript could be...
function bulletClicked(e) {
document.images['bullet1'].src='img/bullet.png';
document.images['bullet2'].src='img/bullet.png';
document.images['bullet3'].src='img/bullet.png';
document.images['bullet4'].src='img/bullet.png';
e.src='img/bulletwhite.png';
}
There are much better ways to deal with this sort of problem, and I would highly reccomend you pick up jQuery and do some work with separating your HTML, JavaScript and CSS components of your pages.
I cannot reproduce the described behavior. The images seem to get replaced OK. Any further details you can provide? What happens when you click on the other 3 images? Do they get their image URLs straight?