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"
Related
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 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>
I have a map with some locations marked with orange dots.
The map is in .jpg image format.
I placed it on my website, now I want to display another gif animated image, when someone hovers over a particular orange dot in the map image. Refer to the picture on the link below. The gif image to be displayed in every dot is different.
Help me solve this problem using HTML, CSS, JavaScript.
https://drive.google.com/file/d/0B5s1EBTl5WExcUNBTXR0aHFmYjQ/edit?usp=sharing
you can use an imagemap in combination with one or more DIVs
you show or hide and if needed change the position of your DIVs via JavaScript on mouseover
a little example
<html>
<head>
<style type="text/css">
#myOverlay{visibility:hidden; z-index:10; position:absolute; top:100px; left:100px;}
</style>
<script language="JavaScript">
function showDiv(imgUrl, x, y)
{
var myDiv = document.getElementById("myOverlay"); //get the div element
myDiv.innerHTML = "<img src='" + imgUrl + "' />" //overwrite the content
myDiv.style.top = y; //set position top
myDiv.style.left = x; //set position left
myDiv.style.visibility = "visible"; //show the div
}
function hideDiv()
{
document.getElementById("myOverlay").style.visibility = "hidden"; //hide the div
}
</script>
</head>
<body>
<img src="yourFile.jpg" usemap="#yourMapName"></img>
<map name="yourMapName">
<area shape="rect" coords="11,10,59,29" href = '#' onMouseOver="JavaScript:showDiv('yourOverlayImage1.gif',59,29);" onMouseOut="JavaScript:hideDiv()"alt="anyAlt1" title="anyTitle1">
<area shape="rect" coords="110,100,159,129" href = '#' onMouseOver="JavaScript:showDiv('yourOverlayImage2.gif',159,129);" onMouseOut="JavaScript:hideDiv()"alt="anyAlt2" title="anyTitle2">
</map>
<div name="myOverlay" id="myOverlay"></div>
</body>
</html>
or
you can draw your image as svg (http://www.w3.org/2000/svg) - i would not recommend that cause it's a lot of work
You can use iframe to show a image:
<iframe frameborder="0" scrolling="no" width="25" height="25" src="image1.gif" name="imgbox" id="imgbox">
And make a dot a link which will load new picture in iframe:
dot
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');
});
If you know about how to do something like this,
I mean how to load a javascript or jQuery popUp image onLoad (once) and how can i link it to somewhere else, please help me =(
Thanks a lot..
http://lokeshdhakar.com/projects/lightbox2/
window.onload= function(){
var myEvt = document.createEvent('MouseEvents');
myEvt.initEvent(
'click' // event type
,true // can bubble?
,true // cancelable?
);
document.getElementById('myLink').dispatchEvent(myEvt);
}
here's a tutorial on how to create the modal container
http://www.queness.com/post/77/simple-jquery-modal-window-tutorial
once you have it you can trigger the modal window inside
$(document).ready(function(){
// trigger modal here
});
It looks like the div is just set to visible when the page loads.
<div id="lightBox" style="width:100%; height:100%; position:absolute; z-index:1100; background:url(images/bgfb.png);display:block">
<div id="ekranKapla" style="position: absolute; top: 50%; left: 50%; margin-left:-255px; margin-top:-196px;display:block">
<img src="/images/lightbox.png" border="" alt="facebook" useMap="#mapThis" />
</div>
</div>
<map name="mapThis" id="mapThis">
<area shape="rect" coords="470,2,509,37" onclick="javascript:lightBoxKapat();" href="#" />
<area shape="rect" coords="293,294,496,370" href="http://www.facebook.com/EczacibasiToplulugu" target="_blank" title="facebook " />
</map>
<script type="text/javascript">
function lightBoxKapat() {
document.getElementById("lightBox").style.display = "none";
document.getElementById("ekranKapla").style.display = "none";
}
</script>
Then the user can click on it to hide it.
Don't use JavaScript for that - at least not to show it. To have a picture displaying when the page loads, just code the HTML that way.
To show or hide it later, just use:
$("#popupContainer").show();
$("#popupContainer").hide();
Working demo: http://jsfiddle.net/7rVaZ/