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>
Related
I have a custom map (an image), and i need to show country names when the mouse cursor is over the countries areas.
I'm using an HTML map. My image which uses the HTML map is in a modal that you can open with button click. i have tried tooltipster (http://iamceege.github.io/tooltipster/) and Responsive HTML Image Maps jquery plugin (https://github.com/davidjbradshaw/image-map-resizer), but i can't get it to show tooltips exactly where i want and this might be due to responsiveness issues as the image takes the height of the modal while the image size is bigger than that, and i created the map based on the real image size.
Here is my map code:
<img src="<?php the_field('home__map_lightbox_image'); ?>" class="locations-map-full" alt="<?php the_field('home__map_lightbox_title'); ?>" usemap="#map">
<map name="map" id="locations-map">
<area shape="circle" coords="596, 408, 10" title="Libye" class="tooltip"/>
<area shape="circle" coords="508, 361, 16" title="Tunisie" class="tooltip" />
<area shape="circle" coords="457, 374, 7" title="Algerie" class="tooltip" />
<area shape="circle" coords="406, 360, 16" alt="Maroc" class="tooltip" />
</map>
So, my question is: is this the right way to do it ? am i on the right way or should i use something other than HTML maps ?
Working snippet - vanilla JS
Although not perfect, this approach works:
Note: I've changed the first image map to appear in the center
function myFunc (el) {
var tooltip = document.getElementById('myTooltip');
tooltip.style.display = 'block';
tooltip.innerHTML = el.title;
}
function myFuncHide(el) {
var tooltip = document.getElementById('myTooltip');
tooltip.style.display = 'none';
tooltip.innerHTML = '';
}
document.addEventListener('mousemove', function(e){
/*console.log(e.pageX);
console.log(e.pageY);*/
document.getElementById('myTooltip').style.left = (e.pageX+5)+"px";
document.getElementById('myTooltip').style.top = (e.pageY+5)+"px";
});
#myTooltip {
display: inline-block;
padding: 15px;
background: rgba(0,0,0,.5);
color: white;
position: absolute;
display: none;
}
<img src="https://images.icanvas.com/list-square/abstract-photography-1.jpg" class="locations-map-full" width="600" height="600" alt="" usemap="#map">
<map name="map" id="locations-map">
<area shape="circle" coords="596, 408, 10" title="Libye" class="tooltip"/>
<area shape="circle" coords="300, 300, 100" title="Tunisie" class="tooltip" onmouseover="myFunc(this)" onmouseout="myFuncHide(this)"/>
<area shape="circle" coords="457, 374, 7" title="Algerie" onmouseover="myFunc(this)" class="tooltip" />
<area shape="circle" onmouseover="myFunc(this)" coords="406, 360, 16" alt="Maroc" class="tooltip" />
</map>
<div id="myTooltip" />
You can try to use a javascript plugin like this: jquery.responsive-image-maps that dynamicaly re-computes the coordinates of the image map on window.load and window.resize. Then everything should work fine.
If you like you can try responsive svg image maps as well (they are easier to be made responsive, but I am not sure about the tooltips added).
For example see this create-responsive-svg-image-maps
Here is example of adding tooltipster tooltips to an svg map
You can add custom hotspot to your map using Taggd script which is responsive and easy to use.
https://timseverien.github.io/taggd/v3/
What I want : when my cursor is overing the area #ota-tail, the img change to another image, and when we stop overing, the original image come back.
I've got nothing in my console with below code:
$(function(){
$("#ota-tail").hover(function(){
$("#ota-img").eq(0).attr('src','about/about_tail.png');
}, function(){ $("#ota-img").eq(0).attr('src','about/about_null.png');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img id="ota-img test" src="public/js/about/about_null.png" usemap="#image-map">
<map name="image-map">
<area id="ota-tail" alt="queue de l'otarie" coords="353,376,399,408,403,429,295,430,324,383" shape="poly">
<area id="ota-body" alt="corps de l'otarie" coords="472,288,582,332,543,388,463,409,399,408,353,375,404,306" shape="poly">
<area id="ota-paw" alt="patte de l'otarie" coords="510,397,540,389,562,428,509,428" shape="poly">
<area id="ota-head" alt="tête de l'otarie" coords="595,164,526,184,486,224,471,287,583,332,594,249" shape="poly">
</map>
You can use CSS for that:
#ota-img{
background-image: url('about/about_tail.png');
}
#ota-img:hover {
background-image: url('SOURCEFORTHEIMAGEYOUWANT');
}
Another option is to use JavaScript:
<img src='about/about_tail.png' onmouseover="this.src='SOURCEFORTHEIMAGEYOUWANT';" onmouseout="this.src='about/about_tail.png';" />
I am working on image mapster, but when I do the following I get NaN for coords.
<div id="rts" class="largWin">×
<center><img id="floo-map1" src="img/plan.jpg" alt="Floor plan in Pan Pacific Level 4" border="0" width="750" height="472" usemap="#floorplan-conference-map1" style="width:750px; height:472px;"/></center>
<map id="image_map1" name="floo-map1">
<script>
function getx()
{
return 425,78,483,116 ;
}
</script>
<area id = "try" name="gg" full="ggh" shape="rect" coords=getx() href="#">
</map>
</div>
How can I fix it?
Thats not how javascript works. you dont return its value to area thats why you getting NaN because coords is not getting anyvalues.
instead change the values inside the getx()
document.getElementById("try").coords = "425,78,483,116";
But why do you want to change its coords in javascript to begin with?
Or try Try coords="return getx()"
I'm currently trying to use image map to replace an image. The first image gets replaced by the second image however I have no luck on getting the third image to replace the second one.
javascript:
<script>
dcoument.getElementById("img1").src="MSWORD.jpg";
document.getElementById("img2").src="ClickFile.png";
documnet.getElementById("img3").src="NewFile.png"
function replaceImage(imgid, source, mapid)
{
var image = document.getElementById(imgid);
image.src= source;
var newmap = document.getElementById(mapid);
var origin = document.getElementById("ClickFile");
origin.innerHTML = newmap.innerHTML;
}
</script>
Html5
<img id="img1" src="MSWORD.jpg" alt="Microsoft Word"
style="width:fill-available;height:fill-available" usemap="#ClickFile">
<map name="ClickFile">
<area href="javascript:(function(){
document.getElementById('img1').src='ClickFile.png';})()"
shape="rect" coords="58,50,0,25">
</map>
<map name="image1" id="image1">
<area href="javascript:replaceImage('img1', 'ClickFile.png', 'img2')"
shape="rect" coords="50,58,0,25">
</map>
<area href="javascript:(function(){
document.getElementById('img2').src='NewFile.png';})()"
shape="rect" coords="122,103,0,141">
<map name="image2" id="image2">
<area href="javascript:replaceImage('img2', 'Newfile.png', 'img3')"
shape="rect" coords="122,103,0,141">
</map>
Not sure if this is the problem but make sure your </map> tag comes immediately after the<area …> tags within it. Right now your second and third maps are inside the first map which is probably confusing the browser.
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";
}