How to create an link over an image using jQuery

Question

I'd like to create an link over an image in the button click. What I have so far is, when I click over the image, I get the coordinates correctly.. but how can I dinamically create an link on the mouse clicked position? Is it possible to do it?

This is what I have so far:

$('.ImgMapa').click(function(e) {
captureMousePosition(e);
var offset = $(this).offset();
var left = xMousePos;
var top = yMousePos;
});

The function captureMousePosition returns the X and Y position for me.

Are you trying to create a link over complete image ?if Yes then simply wrap it with `` and set the href attribute using jquery — Peeyush, Mar 11 '13 at 01:35
No.. Create an link in each mouse click, in an specific place of the image — Felipe Mosso, Mar 11 '13 at 01:37

score 0 · Answer 1 · answered Mar 11 '13 at 01:37

0

$('.image').click(function(e){
e.preventDefault();
window.location="http://google.com";
});

answered Mar 11 '13 at 01:37

klewis

7,459
15
58
102

This way I'm going to create an link for the whole image, rigth? I'm trying is to create link only where I click inside the image – Felipe Mosso Mar 11 '13 at 01:39
you can try out this tool if you want to skip trying to code it from scratch - http://www.maschek.hu/imagemap/imgmap – klewis Mar 11 '13 at 01:44
Nick also has an alternative solution here - http://stackoverflow.com/questions/3379583/using-jquery-to-change-image-map-coord-values?rq=1 – klewis Mar 11 '13 at 01:49
Thanks, I will take a lot in it and get back with an feedback soon! – Felipe Mosso Mar 11 '13 at 01:53

score 0 · Answer 2 · answered Mar 11 '13 at 01:38

0

I think you can try to create dynamically <map> over clicked image. Link: http://www.w3schools.com/tags/tag_map.asp

answered Mar 11 '13 at 01:38

Kleber Bernardo

193
1
13

score 0 · Answer 3 · answered Mar 12 '13 at 00:53

I end up doing something better for my case.. As I wanted to dynamically create images over another, I used append() function from jQuery. Here's what I did:

Created an img tag:

var img = $('<img src="http://3.bp.blogspot.com/-BDsYRXImsOQ/T-czORDNXZI/AAAAAAAABz4/qjWlHzzEBsA/s1600/1606gdg.png"/>');

Set its css accordingly to the mouse click position:

img.css('cssText', 'top: ' + (top-10) + 'px;' + 'left: ' + (left-10) + 'px; position: absolute; width: 22px; height: 22px');

and Finally append it with image parent:

$(this).parent().append(icone);

Where $(this) is my image reference.

Note 1: My image is inside and div, that's why I used parent() function. Note 2: All these pieces of code are inside my image click event.

Example:

$('.Img').click(function(e) {

}

Hope it helps! :)

How to create an link over an image using jQuery

3 Answers3