I am trying to add onclick event through javascript to my map element that was created through javascript too , I am not going to paste whole code here but will make a short version .
so this what I have done so far:
var mapimg = createElement("img"); // create and set up img element for map
mapimg.src "some path ";
map.img.width = some with;
map.img.height = some height;
map.usemap = "#Map"; // img element done
var map = createElement("map"); // set map element and attributes for him
map.name = "Map";
map.id = "Map";
area(1-10) = createElement("area"); // creating a 10 areas
area.id = some;
area.shape = some;
area.coords = some; // area allement have same attributes but with different values
// ones i done with are append them to map and then append mapimg and map to body
// now trying to add on click event
map.addEventListener("onClick",function(){
var id = map.getElementById(this);
var img = "images/map/reg" + id + ".jpg";
mapimg.src = img;
});
map are working but onclick event are not working i have writed jquery version that works just fine with a html elements
$(document).ready(function() {
$('area').click(function() {
var title = $(this).attr('title');
var image = "images/map/reg" + title + ".jpg";
$('.mapimg').attr('src', image);
$('#loginsubmitbutton2').show();
$('input[name="village"]').attr('value', title);
})
});
this is a full script
It should not be onclick it should be just click when using addEventListener
map.addEventListener("click",function(){
var id = map.getElementById(this);
var img = "images/map/reg" + id + ".jpg";
mapimg.src = img;
});
OR if you want to use onclick
map.onclick = function(){
var id = map.getElementById(this);
var img = "images/map/reg" + id + ".jpg";
mapimg.src = img;
};
How to add event listener to repeating elements inside a parent
without looping through all of them
If you want to add event to multiple repeated elements inside a parent element, rather than looping through all the elements and wasting memory a good solution is to use the concept of event propagation as explained in the code below: (since I understand map is the parent of area)
map.addEventListener("click", myFunction());
//we attach an event listener to the parent
function myFunction(e){
//e.currentTarget : to which event listener is attached
//e.target: the element which was clicked
if(e.target !== e.currentTarget){
//we only need to hear events from the area (children of map), so we ignore any other events that are called when the parent is clicked by this if statement
var id = e.target.Id;
alert(id);
//your code here
}
e.stopPropagation(); //we stop the propagation of event to the DOM once its purpose is solved
}
This solution is independent of the number of area elements you have. You will avoid using any for loop and wasting memory.
Having multiple elements with an event listener for each one of them is inefficient. jQuery makes it easy by using $(document) as event.target (i.e. the element clicked, hovered, etc.). In plain JavaScript it's possible as well by adding the event listener on the ancestor of the multiple elements.
addEventListener() to an element that contains the group of elements.
event.preventDefault() if event.targets (i.e. the group of elements you want to click) default behavior is undesired (e.g. if e.target is an <a>nchor and you don't want it to jump to somewhere like it normally does).
Set a conditional that will verify what is in the eventPhase* is an event.target and not the event.currentTarget*.
After that important step, you do all of your intended tasks of your functions at this point.
After your functions have completed their tasks, use event.stopPropagation() to stop the event from bubbling* so that no other events are triggered on anything else.
* TD;LR for details on event methods and properties read: eventPhase, currentTarget, and Comparison of Event Targets
Also, read this article about this particular technique.
The following Snippet demonstrates how you use one event listener on a <map> and assign each <area> as a unique event.target. To test it, simply click a planet, and the result will be the coordinates of the event.target and msg that the click event was triggered. Click anywhere that's not covered by a planet, and you get no result, that's the event.stopPropagation() working.
SNIPPET
var map = document.querySelector('map');
map.addEventListener("click", eventHandler, false);
function eventHandler(e) {
e.preventDefault();
if (e.target != e.currentTarget) {
var clicked = e.target.coords;
console.log('click event triggered at ' + clicked);
}
e.stopPropagation();
}
<img src="https://s-media-cache-ak0.pinimg.com/736x/80/f3/06/80f3061369194bef1e2025d9a382d1a2.jpg" usemap='#iMap'>
<map id="iMap" name="iMap">
<area shape="circle" alt="" title="" coords="66,179,10" href="" target="" />
<area shape="circle" alt="" title="" coords="198,141,13" href="" target="" />
<area shape="circle" alt="" title="" coords="152,244,17" href="" target="" />
<area shape="circle" alt="" title="" coords="107,124,17" href="" target="" />
<area shape="circle" alt="" title="" coords="353,203,83" href="" target="" />
<area shape="circle" alt="" title="" coords="438,235,29" href="" target="" />
<area shape="circle" alt="" title="" coords="482,135,25" href="" target="" />
<area shape="circle" alt="" title="" coords="499,271,6" href="" target="" />
<area shape="circle" alt="" title="" coords="262,243,99" href="" target="" />
<!-- Created by Online Image Map Editor (http://www.maschek.hu/imagemap/index) -->
</map>
Use click instead of onclick,you can simply use id instead of getElementById
map.addEventListener("click",function(){
var id = this.id;
var img = "images/map/reg" + id + ".jpg";
mapimg.src = img;
});
I'm building a small portfolio with tumblr as my CMS and I need to have thumbnails on the index page. Without hardcoding this, the best way to make this happen seems to be to embed the thumbnail in the body post so the image is pulled through then hiding it on the post page by altering the css to `display:none' by matching it's unique height compared to other images.
It seems great in theory but currently isn't working. What have I missed? The parent div class is .text
<script type="text/javascript">
$(document).ready(function() {
var hide = $('.text img').data-orig-height();
if (hide === 167) {
$('.text img').css('display', 'none');
} else {
$('.text img').css('display', 'block');
}
});
</script>
Image html
<figure class="tmblr-full" data-orig-height="167" data-orig-width="310">
<img src="http://40.media.tumblr.com/d190030c491be51fd47dd1f4291ae9c3/tumblr_inline_nxblnf7rF61tfshob_400.jpg" data-orig-height="167" data-orig-width="310" width="310" height="167" data-meow="true">
</figure>
Use attribute-value selector
$('.text img[data-orig-height="167"]').hide();
This will select all the images inside the .text element having data-orig-height attribute value as 167.
$('.text img[data-orig-height!="167"]').show(); // Show the images whose attribute value is not 167
In the OP code,
$('.text img').data-orig-height();
is not valid function. This'll throw data-orig-height is not a function error.
To get data-* attribute value, use data().
Three problems here:
1 - jQuery does not have a data-orig-height function. You can use the data function.
2 - === comparison will not result in type coercion, so "167" !== 167.
3 - Calling data will only return the first element's data. You want to handle each element individually, which warrants a for-loop.
Try the following:
$('.text img').each(function (k, img) {
var $img = $(img);
if($img.data('origHeight') == 167) {
$img.hide();
} else {
$img.show();
}
});
This :
$('.text img').data-orig-height();
Should be :
$('.text img').data('origHeight');
I have an imagemap and want to add a jQuery hover. Basically the whole image shall be replaced with a new one, based on an imagemap. Hovering on certain parts of the image shall result in replacing the image completely. On a mouseout of the mapped areas, it shall flip back to the imagemap. It works fine doing the imageflip with javascript, but I want to change it to jQuery in order to have mor control about the fadeIn and stuff like this. It just seems easier in jQuery.
Here is what Ive got.
<html>
<head>
<!-- LINK ZU JQUERY ONLINE-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
//PRELOAD THE IMAGES
original = new Image(698, 360);
original.src = "imagenes_png/bosque_mapa.png";
azul = new Image(698, 360)
azul.src = "imagenes_png/azul_mouse.png";
verde = new Image(698, 360)
verde.src = "imagenes_png/verde_mouse.png";
//jQUERY HOVER
$(document).ready(function(){
$("#verdeA").hover(function() {
$(this).attr("src" , "verde.src");
}, function() {
$(this).attr("src" , "original.src");
$("#azulA").hover(function() {
$(this).attr("src" , "azul.src");
}, function() {
$(this).attr("src" , "original.src");
});
});
});
</script>
<body>
<!-- INSERT THE PICTURE -->
<img name="bosque" id="bosque" src="imagenes_png/bosque_mapa.png" width="698" height="360" border="0" usemap="#bosque_m" alt="Bosque con animales" />
<map name="bosque_m" id="bosque_m">
<area id="verdeA" shape="poly" coords="643,324,646,322,648,321,651,320,654,320,656,321,658,323,659,324,660,327,659,330,657,332,655,334,654,335,654,332,653,329,653,327,650,326,648,328,648,331,649,332,650,334,652,335,654,337,656,338,658,339,660,341,662,342,662,345,661,348,660,350,657,351,656,351,656,346,656,345,653,347,651,350,650,351,651,353,651,354,653,356,656,356,658,356,660,356,662,356,666,354,668,351,669,349,670,347,669,346,665,346,666,342,667,341,668,340,670,339,672,339,674,341,676,344,676,347,675,351,672,355,670,357,669,360,642,360,644,356,646,353,647,350,648,346,650,340,650,337,646,332,645,330,644,327,643,324"
alt="" />
<area id="azulA" shape="poly" coords="472,249,476,249,479,250,483,251,484,255,485,258,487,261,489,263,493,265,498,266,501,268,504,270,504,271,499,270,495,269,489,268,486,269,484,270,480,269,476,268,473,266,470,262,469,260,468,256,470,253,472,249"
alt="" />
</map>
</body>
</html>
First I preload the images that the imageflip works without delay. Then I delcare the jQuery function, based on the id in my imagemap and then I add the names of the pictures assigned in the preloading.
Buut, it does not work, at all. Nothing is happening.
Where is the mistake?
There are two problems:
First, when you refer to $(this) in your hover handlers, $(this) is referring to your <area> elements, not your <img>. You'll want to refer instead to $("#bosque").
Second, you are setting the src attribute to the actual strings verde.src, azul.src and original.src. It's as if you were saying <img src="verde.src">, which is not what you want. Remove the quotes from around those strings, as in: $("#bosque").attr("src", verde.src"); so that you are setting src equal to the src property of the verde object and not just to a relative URL that is broken.
So the hover section becomes this:
$(document).ready(function(){
$("#verdeA").hover(function() {
$("#bosque").attr("src" , verde.src);
}, function() {
$("#bosque").attr("src" , original.src);
$("#azulA").hover(function() {
$("#bosque").attr("src" , azul.src);
}, function() {
$("#bosque").attr("src" , original.src);
});
});
});
Which only reacts to the mapped areas:
Is it possible to show an image via mouseover on a link whose only matching tags are title and alt?
My CMS can only generate matching title and alt tags for 2 completely seperated elements. It roughly looks like this:
hover this to show image
<img width="300" height="300" alt="aubergine" src="http://i.imgur.com/0MmkDiI.jpg"></img>
I've been able to target the img like so:
$('a').mouseover(function() {
$('[alt="aubergine"]').css( "opacity", "100" );
});
But instead of the specific target [alt="aubergine"] i would have to get the image via [alt="title of this link i just hovered"].
Here is a fiddle with the working prototype so far:
https://jsfiddle.net/82xnqu6j/1/
Use jQuery to pull out the title attribute of your current element, like in the following live example.
That way you can generalize it for all matching links.
Live Example:
$('a').mouseover(function() {
$('[alt="' + $(this).attr("title") + '"]').css( "opacity", "1" );
});
$('a').mouseout(function() {
$('[alt="' + $(this).attr("title") + '"]').css( "opacity", "0" );
});
img {opacity:0;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
hover this to show image
<img width="100" height="100" alt="aubergine" src="http://i.imgur.com/0MmkDiI.jpg"></img>
JSFiddle Version: https://jsfiddle.net/82xnqu6j/4/
Simply try getting the actual title from the link and using it as part of the selector
$('a').mouseover(function() {
$('[alt="'+this.title+'"]').css( "opacity", "100" );
});
This applies to any attribute, such as title, src, href, etc.
Check the w3schools page for this in: http://www.w3schools.com/cssref/sel_attribute_value.asp
You can just use $(this).attr('title') to choose any attribution of the element in jQuery, same as this.title in native JavaScript.
$('a').mouseover(function() {
$('[alt="' + $(this).attr('title') + '"]').css("opacity", "100");
});
$('a').mouseout(function() {
$('[alt="' + $(this).attr('title') + '"]').css("opacity", "0");
});
img {
opacity: 0
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
hover this to show image
hover this to show image
<img width="300" height="300" alt="aubergine" src="http://i.imgur.com/0MmkDiI.jpg"></img>
<img width="300" height="300" alt="test" src="http://i.stack.imgur.com/gVqLo.png"></img>