I have an image with multiple image maps. If one link/area is clicked I want the image to change into another image. So for example if ID="02" is clicked I wamt the image source to change to 02.png and so on...
The markup I have for the area shapes are:
<img src="01.jpg" usemap="#Map" alt="">
<map name="Map">
<area shape="rect" id="02" coords="7,6,191,375" href="#" alt="">
</map>
How can I use jquery/javascript to achieve this?
$(document).ready(function() {
$("area").click(function() {
var areaId = $(this).attr("id");
$("img").attr("src", "" + areaId + ".png");
});
});
Edit: Working fiddle here: jsfiddle.net/940yj9vr/1
$('area').on('click', function() {
if(this.id<10){
url = (this.id*1);
url ='0'+ url;
}else{
url = (this.id*1);
}
// url=this.id*1;
console.log(url)
$("img").attr("src", url + ".png");
});
Hope this works for you
Related
I would like to put an onclick event on an area element. Here is my setup:
<img id="image" src="wheel.png" width="2795" height="2795" usemap="#Map" >
<map name="Map">
<area class="blue" onclick="myFunction()" shape="poly" coords="2318,480,1510,1284" href="#">
</map>
I have tried 2 different ways to have an onclick event. Firstly i tried this:
$(".blue").click( function(event){
alert('test');
});
I have also tried this:
function myFunction() {
alert('test');
}
Neither of the above work. Do area elements support the above, or do they only support having a href?
Pay attention:
Attribute href is obligatory, without it the area-tag does nothing!
To add a click event, you'll need to block default href.
Your code should start as follows:
$(".blue").on("click", function(e){
e.preventDefault();
/*
your code here
*/
});
Live example here.
Its the shape that's the problem. Your code has set shape equal to polygon but only has 4 points in the coordinates attribute. You need to set shape to rectangle instead.
Set shape="rect" like this:
<img id="image" src="wheel.png" width="2795" height="2795" usemap="#Map" >
<map name="Map">
<area class="blue" onclick="myFunction()" shape="rect" coords="2318,480,1510,1284" href="#">
</map>
Use a class for all elements you want to listen on, and optionally an attribute for behavior:
<map name="primary">
<area shape="circle" coords="75,75,75" class="popable" data-text="left circle text">
<area shape="circle" coords="275,75,75" class="popable" data-text="right circle text">
</map>
<img usemap="#primary" src="http://placehold.it/350x150" alt="350 x 150 pic">
<div class='popup hidden'></div>
Then add your event listeners to all elements in the class:
const popable = document.querySelectorAll('.popable');
const popup = document.querySelector('.popup');
let lastClicked;
popable.forEach(elem => elem.addEventListener('click', togglePopup));
function togglePopup(e) {
popup.innerText = e.target.dataset.text;
// If clicking something else, first restore '.hidden' to popup so that toggle will remove it.
if (lastClicked !== e.target) {
popup.classList.add('hidden');
}
popup.classList.toggle('hidden');
lastClicked = e.target; // remember the target
}
Demo: https://codepen.io/weird_error/pen/xXPNOK
Based on your comments, you just need this:
$("#image").click( function(){
alert("clicked");
//your code here
});
Demo:
http://codepen.io/tuga/pen/waBQBZ
This is a simple one:
<area class="blue" onclick="alert('test');" shape="poly" coords="2318,480,1510,1284" href="#">
Or for any other code:
<area class="blue" onclick="//JavaScript Code//" shape="poly" coords="2318,480,1510,1284" href="#">
Try :
<img src="wheel.png" width="2795" height="2795" alt="Weels" usemap="#map">
<map name="map">
<area shape="poly" coords="2318,480,1510,1284" alt="otherThing" href="anotherFile">
</map>
You souldn't want to add onClick events on area, documentation :
The tag defines an area inside an image-map (an image-map is an image with clickable areas).
Edit : your coords are a bit weird since its supposed to the couples of each vertices (so right now, your polygon is a line)
I found this question by #TimorEranAV
HTML map that displays text instead of linking to a URL
and was marked as duplicate, but i think what he was expecting is this,
<html>
<head>
<title> Program - Image Map</title>
</head>
<body>
<img src="new.png" width="145" height="126" alt="Planets" usemap="#planetmap">
<map name="planetmap">
<area shape="rect" coords="0,0,82,126" href="sun.htm" alt="Sun" title = "Sun">
<area shape="rect" coords="82,0,100,126" href="mercur.htm" alt="Mercury" title = "Mercury">
</map>
</body>
</html>
Here the title tag gives the opportunity to add a hover text(tip) to the image map.
I have a single, fixed-sized image of 5 stars (each star also being a fixed-width). I would like to track and respond as the use hovers over each of the 5 stars.
I've done some Googling but didn't find a clear way to approach this in JavaScript/jQuery. I know there are APIs for getting the mouse coordinates, but how can I get coordinates within the image?
Any tips or links for getting the mouse coordinates relative to an an image being hovered over?
You could use an image map:
Create five HTML image map areas using Image Mapper, being sure to add one "hotspot" for each of the five stars.
Use the mouseover and mouseout events on the area elements to trigger an action when the mouse pointer collides with and leaves a star.
Demo
Reusing the star image from Prisoner's answer:
http://jsfiddle.net/4GgBu/1/
HTML
<img src="http://i.imgur.com/CwkF2Hr.jpg" usemap="#image-map" />
<map name="image-map" id="image-map">
<area shape="poly" class="star" coords=" 79,11, 63,56, 13,59, 52,91, 36,139, 79,110, 120,139, 105,91, 147,59, 95,56, 79,10" href="#" alt="star 1" />
<area shape="poly" class="star" coords=" 257,9, 241,59, 189,59, 232,91, 215,139, 256,109, 300,138, 285,89, 325,59, 274,58, 259,13" href="#" alt="star 2" />
<area shape="poly" class="star" coords=" 420,58, 367,58, 409,89, 393,138, 436,110, 478,140, 463,90, 504,59, 453,57, 436,11, 420,55" href="#" alt="star 3" />
<area shape="poly" class="star" coords=" 614,12, 596,58, 549,60, 587,89, 571,138, 613,111, 656,141, 640,88, 679,58, 631,57, 618,15" href="#" alt="star 4" />
<area shape="poly" class="star" coords=" 774,58, 726,60, 767,88, 750,139, 792,110, 835,140, 819,91, 862,58, 808,56, 791,9, 776,57" href="#" alt="star 5" />
</map>
<p class="message">Rollover a star to see this message update.</p>
JavaScript
var $stars = $(".star");
$stars.mouseover(function(e){
var starID = $stars.index(e.target) + 1;
$('.message').text('Star ' + starID + ' rolled over');
});
$stars.mouseout(function(e){
var starID = $stars.index(e.target) + 1;
$('.message').text('Star ' + starID + ' rolled out');
});
Perhaps something like this (can be optimised, I just rushed it):
Javascript
var NUMBER_STARS = 5
$("img").click(function(e){
var left = e.pageX-$(this).offset().left;
var selected_stars = 0;
for(var i = 0; i < NUMBER_STARS; i++){
if($(this).width() / NUMBER_STARS * i < left){
selected_stars++;
}
}
alert(selected_stars);
});
Just a little css for the cursor:
img{
width: 300px;
cursor: pointer;
}
HTML
<img src="http://i.imgur.com/CwkF2Hr.jpg" />
jsfiddle: http://jsfiddle.net/wp7sg/1/
i have areas in my html, that have unique href='#cha', cha is unique and different for every area. I need to grab area on click in my js, i have already this unique value.
valueRegionSelect contains my unique value on click(it's change depends on my click, for example klu, chu, ada, etc.).
html part with my areas:
<div class="b-map">
<div class="b-map__city"></div>
<div class="b-map__item">
<img class="mapImage" src="/images/map-light.png" width="701" height="408" border="0" usemap="#map" />
<map name="map">
<area shape="poly" coords="615,0,554,20,548,87,558," title="<?php echo isset($this->region['chu']) ? $this->region['chu']['r_name'] : "region name for chu" ?>" href="#chu" />
<area shape="poly" coords="47,237,63,237,67,246,48,248" title="<?php echo isset($this->region['klu']) ? $this->region['klu']['r_name'] : "region name for klu" ?>" href="#klu" />
this one grab all areas, but i need only one area with selected unique element:
$mapItem = $('.b-map__item area');
I use it in same function in js:
coords = $mapItem.attr('coords').split(','),
Thanks for any help!
If you're looking for the <area> with a specific href, then use the attribute selector:
var valueRegionSelect = "cha";
$mapItem = $('.b-map__item').find('area[href="#' + valueRegionSelect + '"]');
http://api.jquery.com/category/selectors/attribute-selectors/
( http://api.jquery.com/attribute-equals-selector/ )
If I am getting you correctly then this should work
var areaHref = ('#yourselectId').val();
$mapItem = $('.b-map__item').find('area[href="#'+areaHref+'"]'); ;
I have some images-figures with map-area like this
and i need get image id when click inside area zone
can i made it without custom area functional realisation with js?
UPD sandbox
UPD2 found second, other problem.
first area zone (red), which covered by second image not clickable and z-index for area not working.
FINAL UPD
I wrote small custom function for mapping some objects.
Maybe it will help someone:
jsFiddle
I hope this is what you are looking for
JS Fiddle Example : http://jsfiddle.net/g5Dy3/44/
HTML
<img id="dotted" src="image1.jpg" usemap="#ballmap" alt="sample" />
<img id="solid" src="image2" usemap="#ballmap2" alt="sample" />
<map name="ballmap">
<area shape="circle" coords="210,120,90" href="#" alt="dotted ball" title="dotted ball" onclick="clickedMe(this);">
</map>
<map name="ballmap2">
<area shape="circle" coords="126,90,70" href="#" alt="solid ball" title="solid ball" onclick="clickedMe(this);">
</map>
JS
function clickedMe(item) {
var mapName;
mapName = $(item).parent().attr('name');
$('img').each(function(){
if($(this).attr('usemap') == '#'+mapName){
alert($(this).attr('id'));
}
});
}
Like so assuming you can use jQuery:
<img id="planetsimg" src="planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap">
<map name="planetmap">
<area shape="rect" coords="0,0,82,126" href="sun.htm" onclick="clicked(this)" alt="Sun" image-id="planetsimg">
<area shape="circle" coords="90,58,3" href="mercur.htm" onclick="clicked(this)" alt="Mercury" image-id="planetsimg">
<area shape="circle" coords="124,58,8" href="venus.htm" onclick="clicked(this)" alt="Venus" image-id="planetsimg">
</map>
<script>
function clicked(map) {
var image = $('#' + $(map).attr('image-id'));
alert('img ' + image + ' clicked map ' + $(map).attr('href'));
return false; // Prevents href from opening normally. Return true if you want the link to open
</script>
just add the clickhandlers to the areas (images) of your map, not to the map itself
if you are using jQuery, you can do it like that:
$('map').find('area').each(function() {
$(this).on('click',...
});
I have the following gallery set up in jQuery: -
<script type="text/javascript">
$(function () {
$(".image").click(function () {
var image = $(this).attr("rel");
$('#galleryImage').hide();
$('#galleryImage').fadeIn('slow');
$('#galleryImage').html('<img src="' + image + '"/>');
return false;
});
$("#galleryImage").click(function () {
var imageLarge = $(this).attr("rel");
$('#galleryImage').html('<a href="' + imageLarge + '"/>');
$('#galleryImage a').lightBox();
});
});
<div id="galleryImage">
<img src="../../Images/Design/Gallery/HavellHouse/havellhouse-small1.jpg" width="337" height="223" alt="forbury court" />
</div>
<a href="#" rel="../../Images/Design/Gallery/HavellHouse/havellhouse-small1.jpg" class="image">
<img src="../../Images/Design/Gallery/HavellHouse/Thumbs/havellhouse-thumb1.jpg" class="thumb" border="0" /></a>
<a href="#" rel="../../Images/Design/Gallery/HavellHouse/havellhouse-small2.jpg" class="image">
<img src="../../Images/Design/Gallery/HavellHouse/Thumbs/havellhouse-thumb2.jpg" class="thumb" border="0" /></a>
<a href="#" rel="../../Images/Design/Gallery/HavellHouse/havellhouse-small3.jpg" class="image">
<img src="../../Images/Design/Gallery/HavellHouse/Thumbs/havellhouse-thumb3.jpg" class="thumb" border="0" /></a>
That takes the rel attribute value when a thumbnail is clicked and inserts it into the galleryImage div allowing the user to select different images via the thumbnails that all display in one place.
Now, what I want to do is apply lightbox to the current image in the #galleryImage div, so that if a user clicks it, an even larger version comes up via the lightbox plugin, but I can't quite get my head around how to do it, this is what I have so far, am I heading in the right direction?
Fixed it, used:
$(".image").click(function() {
var image = $(this).attr("rel");
var imageLarge = $(this).attr("title");
$("#galleryImage img").attr("src",image);
$("#galleryImage a").attr("href", imageLarge);
return false;
}
Using the title value which stores a url to the large image, taken from the currently selected thumbnail and just setting the attribute value in jQuery rather than inserting a bunch of HTML right into the div