image-map associated with more than one image - javascript

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).

Related

Angular JS - Image Maps and filters

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'/>

Getting data- value from sender in Polymer

I'm trying to create a lightbox component in Polymer, with it's child items being multiple <img> tags. These will have an src, which is a thumbnail and a data-fullimage attribute, which will contain the path to the full size image.
In the Polymer component, I've set the on-click tag on the image content selector, and any Javascript calls using sender.xyz return the content tag, not the image tag, thus not allowing me to retrieve the path to the full image. Is there any way to get the data-fullimage of the image that is clicked, or even the src value if need be?
Polymer Component
imageClick: function(event, detail, sender)
{
console.log(sender);
}
Implementation
<paper-lightbox>
<img src="img/one.png" data-fullimage="img/one-large.png"></img>
<img src="img/two.png" data-fullimage="img/two-large.png"></img>
</paper-lightbox>
No need to put click handlers on the img tags. Moreover this doesn't work, because they are not bound to functions in the paper-lightbox element. What you want is
event.path[0].getAttribute("data-fullimage")
But this only works if your light DOM elements consist of exactly one element. If your light DOM elements are more complex, but it should be possible to click them anywhere, use this expression instead
event.path[[].indexOf.call(event.path, sender) - 1].getAttribute("data-fullimage")
Try this
HTML:
<paper-lightbox>
<img src="img/one.png" on-tap="{{imageTap}}" data-fullimage="img/one-large.png"></img>
<img src="img/two.png" on-tap="{{imageTap}}" data-fullimage="img/two-large.png"></img>
</paper-lightbox>
JS:
imageTap: function(sender){
var fullImage = sender.target.attributes["data-fullimage"];
}

HTML/CSS Hover over image for close up image/test/hyperlink

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.

jQuery: How to write "src" attribute into Onclick function argument of child element

I'm using jQuery to rewrite the DOM to transform a no-JS HTML page into a JS-drive page. I've hit a glitch on transforming the image links. In the original code I have:
<div class="f">
<a href="images/Fig-03-2.png" target="_blank">
<img src="images/fig-03-2.png" alt="Fig 3.3" />
</a>
</div>
...and I want to transform it into:
<div class="f">
<a>
<img src="images/fig-03-2.png" alt="Fig 3.3" onclick="imagepop("fig-03-2.png")/>
</a>
</div>
I can't figure out how to write the onclick attribute so that it contains the img src value as imagepop's argument. I tried:
$(".f a").attr('onclick', 'imagepop(' + $(this).attr('src') + ')' );
...but $(this).attr('src') returned "undefined".
How should I fix my line of code or would it be better to read the img src attribute from inside the imagepop function?
**Note, I have not developed the page so that each div has a unique ID, and do not plan to do so. None of the elements inside the <div> tag have IDs assigned to them.
...and I want to transform it into...
For what it's worth, I wouldn't. Instead, I'd use a function like this:
$("div.f a img").click(function() {
imagepop(this.src);
return false;
});
What that line, probably wrapped in a ready handler, does is: If the user clicks the image, it does the imagepop thing and cancels the event, which (amongst other things) prevents the link from firing.
It's called progressive enhancement. JavaScript-enabled user agents will use the above, and ones without JavaScript enabled will still see and follow the link. Remember that user-agents are not just browsers, they include crawlers, spiders, etc., and yes, browsers with JavaScript disabled.
Update: If you really want to handle it at the link level (which might be more keyboard-friendly), rather than image level, then:
$("div.f a").click(function() {
var img = $(this).find("img");
if (img[0]) {
imagepop(img[0].src);
return false;
}
});
...since it's the img, not a, element that has the src. (And no need to use attr here, the src reflected property is supported by all major -- and probably all minor -- browsers.)
try this:
$('.f a').onclick(function(e){
imagepop($(this).find('img').attr('src'));
e.preventDefault();
});
Basically, it selects all of the anchors under the .f class, and applies an onclick to each of them. inside the onclick function, we reference this which is the current anchor tag, and put it through a jQuery object. That allows us to find all img elements under that anchor tag, pull it's src attribute, and run it through imagepop().

Javascript not working IE 8 on Windows

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?

Categories