Sometimes you want your users to be able to get some context about a resource without actually havng to click on it and navigate away from your page. A nice way to do this is with fancy link images like this:
Hover over me! to see some image fun.
Use the data attribute.
Html elements can store ‘state’ in data attributes. In this case, a link to an image.
jQuery & data attributes
jQuery lets you access and manipulate an element’s data attributes on the fly.
Drop this require module into your pipeline and then call bindImageLinks() in your app.
Positioning with CSS
We use a wrapper div around the img tag, this allows us to get around the limitation that img tags inside inline elements do not resize beyond the dimensions of their container ( in this case, the link ).
You could get a lot more technical with edge detection and whatnot, but for now I’m not going to worry.