i have a image map and I want that the polygons will be highlighted until the next polygon is clicked.
like: click plogone 1 -become highlighted
than: click polygone 2 -becomes highlighted (polygon 1 is not highlighted)
<script type="text/javascript" src="jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="jquery.maphilight.js"></script>
<script>
$(function() {
var nr = 0;
$('.map').maphilight({ strokeColor: 'ff0000', strokeWidth: 5});
$(polymap).click(function(e) {
var data = $(high1).mouseout().data('maphilight') || {};
data.alwaysOn = !data.alwaysOn;
$(high1).data('maphilight', data).trigger('alwaysOn.maphilight');
});
});
</head>
<body>
<br>
<img class="map" src="pb90%20%28150%29.html.png" ismap="ismap" usemap="#mapmap" alt="html imagemap created with QGIS" border="0">
<map id="polymap" name="mapmap">
<area id='high1' shape="poly" href="PDF1.pdf" target="cont" coords="834,366,837,363,840" alt="">
<area id='high2' shape="poly" href="PDF2.pdf" target="cont" coords="940,236,941,236" alt="">
<area id='high3' shape="poly" href="PDF3.pdf" target="cont" coords="831,345,828,348,824" alt="">
....
My problem is that I can't access the ID of the areas. If you click the polygons only the area with "high1" will be high lighted.
So instead of that
$(high1).
I would need a kind of event handler.
It would be really cool If someone knows a solution :-)
cheers Immanuel
Your jquery selector can be on area, and then the function that would run on the click event would be dependent on the area you clicked. Within your function, you can use the this keyword to refer to the calling object.
$('area').click(function (e) {
var data = $(this).mouseout().data('maphilight') || {};
data.alwaysOn = !data.alwaysOn;
$(this).data('maphilight', data).trigger('alwaysOn.maphilight');
});
Related
I want to find the easiest way to be able to change an image depending on what part of the image the mouse is over.
The idea was to first create all the possible image options.
Take the base image and map it
When the mouse is over the selected area "onmouseover" replace the image source with the one that is desired to create the effect.
I have created a simpler test sample of what I want to do:
Base image: https://i.imgur.com/FTAtJutl.jpg
Change image: https://i.imgur.com/p5oiGSOl.jpeg
The idea is when the mouse goes over the "Facebook" logo, it will change from blue to red.
function redFacebook(x) {
document.getElementById("imageid").src = "https://i.imgur.com/p5oiGSO.jpeg";
}
<img id= "imageid" src="https://i.imgur.com/FTAtJutl.jpg" alt="" usemap="#Map" />
<map name="Map" id="Map">
<area alt="facebook" title="" shape="poly" coords="177,214,193,277,475,212,466,149" onmouseover="redFacebook(x)"/>
</map>
I want to take this idea further and have a multiple areas with multiple different image changes, when mouse over instagram logo, that logo goes red, when mouse over youtube logo, that goes red etc.
Thanks for the help in advance
an idea would be to use the same listener for all the images then have a switch statement that will check the parameter that is passed in and highlight the corresponds image, right now it work, the xyou're passing is throwing an error because it doesn't exists. also you'll need a mouseleave listener to remove the highlighting.
Demo
function mouseover(x) {
switch (x) {
case 'facebook':
{
document.getElementById("imageid").src = "https://i.imgur.com/p5oiGSO.jpeg";
};
break;
case 'instagram':
{
};
break;
case 'twitter':
{
};
break;
// etc...
default:
;
break;
}
}
// reset the image when the user isn't hovering.
function mouseleave() {
document.getElementById("imageid").src = "https://i.imgur.com/FTAtJutl.jpg";
}
<img id="imageid" src="https://i.imgur.com/FTAtJutl.jpg" alt="" usemap="#Map" />
<map name="Map" id="Map">
<area alt="facebook" title="" shape="poly" coords="177,214,193,277,475,212,466,149" onmouseover="mouseover('facebook')"
onmouseleave="mouseleave()"
/>
<!--
<area alt="twitter" title="" shape="poly" coords="177,214,193,277,475,212,466,149" onmouseover="mouseover('twitter')"
onmouseleave="mouseleave()"
/>
<area alt="instagram" title="" shape="poly" coords="177,214,193,277,475,212,466,149" onmouseover="mouseover('instagram')"
onmouseleave="mouseleave()"
/>
etc
-->
</map>
i have an image and i would like to assign which element of the area is clickable.
The red stripe shouldn't be clickable.
My HTML solution:
<img src="" data-highres="" usemap="#img">
<map name="img">
<area class="show-modal" shape="rect" cords="" href="">
</map>
So when i click on the white area it should show me a modal window with "this" image.
my jquery solution:
$('.show-modal').on('click', function(e){
e.preventDefault();
var highres = $('').attr("data-highres");
$('.modal').css('display', 'block');
$('#modal-image').attr('src', highres);
});
When i click on the image(white area) it sould show me a high resulation image in a modal window.
I left the $("") selector empty because i don't know how to select the img attribute -> data-highres=""
I tried with the previous selector but it didn't work.
Actually you have to do the following operations of DOM traversal to get what you need:
Select the parent node of the <area> element, which is <map>. This can be done either using $(this).closest('map') or $(this).parent('map').
Select the image sibling, which is by chaining .prev('img') to the selector above
Therefore, something like this should work:
$('.show-modal').on('click', function(e){
e.preventDefault();
var highres = $(this).closest('map').prev('img').attr('data-highres');
$('.modal').css('display', 'block');
$('#modal-image').attr('src', highres);
});
You can use below code, modify as per your requirements.
var getData = $('#imgID').data("highres");
console.log(getData);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img src="url/to/your/image.jpg" id="imgID" data-highres="high" alt="image_name" usemap="#Map" />
<div name="Map" id="Map">
</div>
Just add a class to your image like this:
<img src="" data-highres="Hello" class="imgCLASS" usemap="#img">
and then make this:
var highres = $('.imgCLASS').attr("data-highres");
alert(highres); // Hello
https://jsfiddle.net/myrma60b/1/
Refer the element by DOM traversal:
$('.show-modal').on('click', function(e){//called when the element with show.modal class is clicked
alert("map area clicked");
});
$('.show-modal').parent().prev().on('click', function (e) {//called when the element before the map area element is clicked
alert("previous element of map area is clicked");
});
The later one works for all types of element tags. If you want it to be specific to image types, specify the element type in prev(). i.e.,
$('.show-modal').parent().prev('img').on('click', function (e) {//called when the element before the map area element is clicked
alert("Image is clicked");
});
<html>
<head>
<title></title>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
</head>
<body>
<img src="pages/dn/low/dn-02.jpg" data-highres="pages/dn/high/dn-02.jpg" usemap="#image">
<map name="image">
<area class="show-modal" shape="rect" coords="1,1,725,1094" alt="clickable">
</map>
<br>
<img src="pages/dn/low/dn-03.jpg" data-highres="pages/dn/high/dn-03.jpg" usemap="#image">
<map name="image">
<area class="show-modal" shape="rect" coords="1,1,725,1094" alt="clickable">
</map>
<script>
$('.show-modal').on('click', function(){
var $this = $(this).parent('map').prev('img').attr('data-highres');
alert($this);
});
</script>
</body>
</html>
here is simple code. i get all the time the same attr. ->data-highres="pages/dn/high/dn-02.jpg"
I'm trying to make an image appear when I mouse over a certain image map and also still have my other mouseover and mouseout functions working.
I'm using : http://clba.nl/sitepoint/img-hover-demo-js2.htm
Which is basically.
<style>
#img2{
position: fixed;
right:0;
bottom:0;
}
</style>
<script>
var img1 = document.getElementById("img1"),
img2 = document.getElementById("img2");
img2.style.display = "none"; // hide when page is loaded
img1.onmouseover = function(){
img2.style.display = "block";
}
img1.onmouseout = function(){
img2.style.display = "none";
}
</script>
I'm using it now on a website using this method. But instead of <img id="img1" src="images/van4.jpg" alt="" /> I'm using an ID inside my map area. Like this
<map name="map12" id="img_id12">
<area id="img2" class="youtube" coords="3878,24,3957,96" shape="rect" href="https://www.youtube.com/embed/skV-q5KjrUA" style="outline:none;"
onmouseover="if(document.images) document.getElementById('img_id12').src= 'assets/images/text/day/12solaire-ani.gif'; PlaySound('solaire'); "
onmouseout="if(document.images) document.getElementById('img_id12').src= 'assets/images/no-text/day/12.gif'; StopSound('solaire'); PlaySound('solaire-stop');" />
</map>
This result is my image showing up when I hover over image map. However, it cancels out my other functions. Any tip how to make everything work together?
You're best off using the CSS :hover pseudo class to make img2 appear.
Get rid of img1.onmouseover and img1.onmouseout, and add the following css in your style block:
#img1:hover + #img2 {display:block}
I've created an example fiddle here... https://jsfiddle.net/clayRav/6kvw3ujk/.
I have an image and when you click on it, it goes to another image with a function and an image map. But on the next image there's text saying "back to other image" but I can't get it to go to the previous image.
The user clicks on the mainmenu.png and it goes to moreinfo.png, how do I make it go back to mainmenu.png?
<img src="img/mainmenu.png" alt="" style= "width: 15em; height: 25em;" id="moreinfo" usemap="#map"; />
<map name="map">
<area shape="rect" coords="46,335,188,364" onclick="changeImage()">
</map>
<script language="javascript">
function changeImage(){
if (document.getElementById("moreinfo").src == "img/moreinfo.png")
{
document.getElementById("moreinfo").src = "img/moreinfo.png";
}
else
{
document.getElementById("moreinfo").src = "img/moreinfo.png";
}
}
</script>
How about
<area shape="rect" coords="46,335,188,364" onclick="toggleImage()">
function toggleImage(){
var img = document.getElementById("moreinfo");
img.src = img.src.indexOf("moreinfo.png")!=-1?"img/mainmenu.png":"img/moreinfo.png";
}
I am trying to use multiple images using the image map "imageTileMap".
<map name="imageTileMap">
<area id="quiz"shape="circle" coords="41,193,20" href="">
<area id="video"shape="circle" coords="112,193,20" href="">
<area id="presentation"shape="circle" coords="184,193,20" href="">
</map>
And I am using Javascript so that each area links to an anchor on a separate page, the page being dependent on the image itself. My function is:
<script type="text/javascript">
function changeLink(clicked_href) {
var url = clicked_href;
var areaQuiz = document.getElementById("quiz");
areaQuiz.href = url + "#quiz";
var areaVideo = document.getElementById("video");
areaVideo.href = url + "#video";
var areaPresentation = document.getElementById("presentation");
areaPresentation.href = url + "#presentation";
}
</script>
And the first image itself is set up as so:
<a id="firstImage" href="linkedPage1.html"><img src="image1.png" usemap="#imageTileMap" onClick="changeLink(this.href)"/></a>
The second image is formatted as:
<a id="secondImage" href="linkedPage2.html"><img src="image2.png" usemap="#imageTileMap" onClick="changeLink(this.href)"/></a>
The problem that I have currently is that clicking on any <area> on the first image directs me towards the anchor of the second image's href. How can I change the changeLink function to correctly collect the correct href? I am grateful for any response.
Everything remain same ,,, Just change Image Code....Href set to same page as from it clicked
Change the first image Code to:
<a id="firstImage" href="linkedPage2.html"><img src="image1.png" usemap="#imageTileMap" onClick="changeLink(this.href)"/></a>
Do Same as first:
<a id="secondImage" href="linkedPage1.html"><img src="image2.png" usemap="#imageTileMap" onClick="changeLink(this.href)"/></a>