We Keep Coding

using tooltipster to display tool tips as part of innerHTML for a div

I am using tooltipster to generate tool tips. All works fine except in the situation where I need to set the contents of a div based on user input using a simple JavaScript function. The div contents consists of images, when hovering over each image, a tool tip should display. However, the tip displays as the default browser behaves for displaying title= with an image. The JavaScript I use is simple:
function setAwards() {
var awardsdiv=document.getElementById("awards"); awardsdiv.innerHTML="";
if (document.setvalues.superstar.checked == true) awardsdiv.innerHTML=awardsdiv.innerHTML + "<img class=\"tooltip\" title=\"Description of award\" width=\"16\" src=\"/pix/superstar.png\" alt=\"[ Super Star ]\" />";
[... stuff removed ...]
}
Is there a way to make this work? Tool tips do display elsewhere on this web page, so the resources needed appear to be set up correctly.
Thank you!

You must initialize the tooltip ($(...).tooltipster({...})) after you have inserted your new HTML content or use delegation.
For "automatic" initialization, you might want to use delegated event listeners for that, see https://github.com/iamceege/tooltipster/issues/499

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

Onclick on image that is created in a javascript canvas

Hiho,
I prepared a snippet.
As in my example I'm using the drawImage function to draw images to a game, because I don't want to include them all in HTML ... However, my problem is, I can't find any possibility to give those "own created" images an onclick function. I thought the object "Image" (var someImage = new Image();) was comparable to the HTML <img> or <input type="image">, but no matter how hard I try, I can't make it.
Can anyone help me?

You've given the click event to the canvas context and not the canvas, change it to:
myCanvas.onclick = function()
As for making the individual images clickable (if you draw more than one), you can always keep an array of the clickable areas and the links they should go to that correspond to the images, then add a loop to the canvas click to check that the mouse co-ords match up to on of the areas in the array.
Example : JSFiddle Code

What do I use to make a simple html gallery?

i'm trying to make the typical ecommerce site where you have different views of clothing and when you click it it becomes the main image.
I'm assuming javascript would be best suited for this? maybe Jquery will be easier?
Thanks I just need someone to point me in the right direction.

Send the various image file names along with the html code in a javascript array. Define "next" and "previous" links pointing to a javascript function that just sets the source of the <img> to the next/previous image.
Or, if you have mini previews, organize the images so that you have image0032_small.jpg for the mini preview and image0032.jpg for the big image, then set the onClick event of the mini image to a javascript function that reads the url of the mini image, removes the _small part and sets the image source of the big image to the result...

If you use a logical naming convention, where the zoom img = the small image + "_Zoom" (a.jpg > a_Zoom.jpg) in the filename, you can do it like this:
<img id="productZoom" src="productA_Zoom.jpg" /> <-- the large image
<a href="javascript:;// zoom in" onclick="loadZoom(this)">
<img id="productZoom" src="productB.jpg" /></a> <-- the thumbnail
function loadZoom(element) {
var zoomImg = $(element).children('img')[0].src.replace(".","_Zoom.")
$('#productZoom').attr('src',zoomImg)
}

There are a dozen ways to do it. I suggest you run a search on
simple gallery [your favorite coding tool]

need dynamic content on page using javascript

I need this page: http://winteradagency.com/mrw/index.php
so that when you mouseover the different small images (actually a set of them) the text below changes from text into an image (which is a larger image of the smaller one) I used to use Fireworks for that sort of thing but I'm thinking that there must be an easier way using a combination of a div tage and javascript.
Any ideas for something simple?
thanks!

http://fancybox.net/
lightbox, etc...

The jQuery CYCLE plugin might suit your needs. It transforms a list of elements into a scrolling pane. You could simply disable automatic scrolling on initialization, and set the time between slides to 0. Then you can call the "slide number" in the callback for the mouseover event on the smaller thumbnails.
Cycle is here: http://malsup.com/jquery/cycle/
Your application is very similar to this example: link text

This question has a similiar situation (replacing an input with an image) with an answer that might work for you. Note: it uses jQuery.
Edit:
For your situation you could do something like this for each image:
$('img#id').hover(
function() {
('div#id').hide().after('<img src="image.jpg" />');
},
function() {
('div#id').show();
}
);
changing the 'img#id' to the id of the image and 'image.jpg' to the corresponding big image.