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'/>
I currently use this little line of code to "post" messages.
setTimeout(function(){
o.html(o.html() + "Username:<br>" + msg[r] + "<br><hr>")
}, 7000);
It works great, it posts messages from an array, ads some styling.
But right now when it posts a message it looks like:
Username:
messagehere
<hr>
What I want is the code to post an image as well, before the message and username. Like as you would see on facebook when chatting with someone, commenting something etc.
I tried just putting a +<img src="" class=""/> in front of it but that did nothing. The whole code suddenly stopped working.
So right now I am looking for the correct way of doing this, id like to add an class to it, so I can style the whole thing correctly with css (having the avatar in front of the message and username, like explained earlier)
If someone could help me find the correct way, that'd be much appreciated.
You just need to wrap the img tag in quotes. It's erroring because without the quotes, your browser thinks it's a variable or function instead of a string literal.
+ '<img src="" class=""/>'
Also, you should use the .append() function instead of doing .html(.html() + ...)
o.append("Username:<br>" + msg[r] + "<br><hr>" + "<img src='' class='' />");
I've looked around a lot for this but I still can't find an answer.
I want to change a div's content by checking whether a cookie is set. The div's content varies between:
1) <img src="images/buttons/login_register.png" onmouseover="this.src='images/buttons/login_register_hover.png'" onmouseout="this.src='images/buttons/login_register.png'" alt="Login / Register"></img>
2) <img src="images/buttons/logout.png" onmouseover="this.src='images/buttons/logout_hover.png'" onmouseout="this.src='images/buttons/logout.png'" alt="Logout"></img>
Now when I do: document.getElementById("login").innerHTML = "" it doesn't work because it thinks the double quote marks used inside the HTML belong to it, is there any way that I can achieve this change? I know how to get the cookie etc, I just need to change the div, thanks for any help in advance :)
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');
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?