I use an imagemap with the following code:
<img name="team" src="team.jpg" width="2560" height="1600" border="0" usemap="#team" alt="" />
<map name="team">
<area shape="rect" coords="495,308,887,794" alt="" onMouseOver="document.team.src='team_a.jpg'" onMouseOut="document.team.src='team.jpg'" >
<area shape="rect" coords="1022,513,1342,897" alt="" onMouseOver="document.team.src='team_b.jpg'" onMouseOut="document.team.src='team.jpg'" >
<area shape="rect" coords="1510,480,1679,691" alt="" onMouseOver="document.team.src='team_c.jpg'" onMouseOut="document.team.src='team.jpg'" >
</map>
This works fine, but often the change of images "flashes".
Is there anything that can be added to the code? Should I preload the images? Are perhaps the images to big?
The solution is to preload the images. If you are using jQuery you can count on Lazyload.
Anyways, there are a lot of alternatives and not only with Javascript. In this article is pretty well explained.
Related
everyone.
I want to display a new picture under my original picture when my mouse moves to the specific area of the original picture.
and I'm new to HTML and CSS, so I still can not find a way to fix it.
I have tried some codes, but I can't combine and together.
The original picture is "Cata_all" the image should display below it, is "catabottoff"
<body>
<map src="graph/Cata_all.jpg" name="productmap">
<area shape="rect" coords="5,205,150,250" href="catabottoff.jpg" target="">
</map>
<img src="graph/Cata_all.jpg" usemap="#productmap">
</body>
Another code I also tried is onmouseover:
<table border=0 height="50%" width="50%">
<tr valign="top">
<td width="20%">
<img onmouseout="this.src='graph/Cata_all.jpg'" onmouseover="this.src='graph/catabottoff.jpg'" src="graph/Cata_all.jpg"/>
<map src="graph/Cata_all.jpg" name="productmap">
<area shape="rect" coords="5,205,150,250" href="" >
I'm really appreciate if you can give me some hints. Thank you so much~
While there are some parts unclear about your requirements but I think this basic example should give you a way to create what you're after.
https://www.w3schools.com/tags/tryit.asp?filename=tryhtml_areamap
With a little javascript, you can build something like this
There also a Javascript way of doing this but I'm not sure if that's your requirement.
<img src="https://www.w3schools.com/tags/workplace.jpg" alt="Workplace" usemap="#workmap" width="400" height="379" id="mainImage">
<!-- You can remove Href attribute from area to make sure they're not redirecting to a different page -->
<map name="workmap">
<area id="computer" shape="rect" coords="34,44,270,350" alt="Computer">
<area shape="rect" coords="290,172,333,250" alt="Phone">
<area shape="circle" coords="337,300,44" alt="Cup of coffee">
</map>
<script>
// This will change the image when you mouseover the Computer.
// This is just a basic example that will help you understand how you can change the main image on mouseover.
var computerArea = document.querySelector("#computer");
var mainImage = document.querySelector("#mainImage");
// Adding mouseover listener to the computer area - this could be done for other parts as well.
computerArea.addEventListener("mouseover", function(e){
mainImage.src = "https://lh3.googleusercontent.com/proxy/4K3cpWUfEVjCSCpoFfYGq2i8KBZZ0f52WQrO7A1e-SzmoX78gwahuwM_Y6u6dR6PhMHuxiP145NiLptVvUQSYfSbQtt0QjDncQ" // Your new image
});
</script>
I have 2 images bound with imagemapster. When I click an area it stays selected, which is fine. I need to change the behaviour so that when I click an area I want the other areas to deselect.
Is that possible?
<img onClick="pruebaImagemapster();" src="images/desplegable_pag04_2.png" alt="Desplegable" width="358" height="213" border="0" usemap="#Map2" class="map" />
<map name="Map2"><area shape="rect" coords="198,70,310,146" onclick="clickAbrirSubmenu('links5')" href="javascript:;">
<area shape="rect" coords="49,70,163,145" onclick="clickAbrirSubmenu('links4')" href="javascript:;">
</map>
<img onClick="pruebaImagemapster();" src="images/desplegable_pag04.png" alt="Desplegable" width="694" height="104" border="0" usemap="#Map" class="map" />
<map name="Map">
<area shape="rect" coords="377,7,693,96" onclick="clickAbrirSubmenu('links3')" href="javascript:;">
<area shape="rect" coords="3,6,317,92" onclick="clickAbrirSubmenu('links2')" href="javascript:;">
</map>
Feel free to ask me for more information if you don't understand what I am trying to achieve.
Its late but may be help full for others.
If you want to select only one area at a time you can use builtin functionality.
Use
singleSelect: false
in options at time of plugin initialization.
I did it!
All my areas have their own id so when I click one I force the others to "deselect".
Here is my script:
var nAreas = $('area').length;
//alert(nAreas);
for(var i=0;i<=nAreas;i++){
if(idArea == 'area'+i){
/*Nada*/
}else{
$('#area'+i).mapster('deselect');
}
}
I am not sure exactly what I should be looking for on this so if I am asking a duplicated question please advice straight away and I will remove.
Say I have this image
I want to make sections of it selectable, so when I select say the roof it will at the moment have an alert or console.log saying ROOF same for if I selected right side, left side, rear, etc
And I want it to change to grey the area that I have selected so we know I have selected that area.
I know this can be done with javascript/jquery but I am unsure how.
Has anyone got any suggestions?
You can use image maps for this
HTML
<img src="http://i.stack.imgur.com/7o2sJ.jpg?1366014978754" alt="" usemap="#map1">
<map id="map1" name="map1">
<area shape="rect" alt="" title="" coords="69,25,243,128" href="#" target="" />
<area shape="rect" alt="" title="" coords="81,255,248,426" href="#" target="" />
</map>
JS
$('#map1 area:eq(0)').click(function () {
alert('hood');
});
$('#map1 area:eq(1)').click(function () {
alert('roof');
});
Fiddle - http://jsfiddle.net/fxZsd/
Yes, it is possible. But not sure if you will like the approach. Design your Car or any image in SVG format. SVG supports mouse events. Bind events to those areas and on click change the color.
Here is question about changing color using javascript Changing SVG image color with javascript
use html map tag and give a id to the map and write jquery code for click event for the map and do your task
You can do so with html map tags to declare the sections using a coordinate system, and javascript/jquery to create the alerts/popups/tooltips, etc.
example from w3schools:
<img 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" alt="Sun">
<area shape="circle" coords="90,58,3" href="mercur.htm" alt="Mercury">
<area shape="circle" coords="124,58,8" href="venus.htm" alt="Venus">
</map>
for more info on it, check out http://www.w3schools.com/tags/tag_map.asp
you can draw images over canvas object (html5), all those sections can be vector drawn
I'm writing a mock up (using HTML, JS/jQuery) and CSS for a client which involves having a single image (of an interface) with an Map applied to it. For reasons I won't explain when a certain area is clicked an action is performed which includes an animation, then changing the image src (so it looks like it is moving between interfaces) and then I apply a different imagemap to the image (perhaps I should say <img> tag)
The client asked for this, I know it seems like madness but I don't have any mockup tools to perform the animations, etc, etc...
I've noticed a pattern and I could refactor my code so it is easier to extend and maintain. However I was wondering, say I have the following HTML:
<img src="claas_ipad3.jpg" USEMAP="#claas_ipad3" width="1130" height="871" alt="" border="0" id="mainPage">
<map name="claas_ipad3">
<area shape="rect" coords="181,249,255,341" href="" alt="" id="Contacts">
<area shape="rect" coords="345,251,454,341" href="" alt="" id="Appointments">
<area shape="rect" coords="533,256,576,311" href="" alt="" id="Maps">
<area shape="rect" coords="686,255,785,344" href="" alt="" id="Tasks">
<area shape="rect" coords="835,246,973,348" href="" alt="" id="Products">
<area shape="rect" coords="176,412,278,513" href="" alt="" id="Reports">
<area shape="rect" coords="330,411,457,513" href="" alt="" id="PriceTable">
<area shape="rect" coords="502,399,637,518" href="" alt="" id="SalesCycle">
<area shape="rect" coords="677,398,808,519" href="" alt="" id="MetaData">
<area shape="rect" coords="844,408,970,510" href="" alt="" id="Settings">
<area shape="rect" coords="173,545,283,662" href="" alt="" id="Vids">
<area shape="rect" coords="328,558,461,652" href="" alt="" id="Web">
<area shape="rect" coords="491,559,626,666" href="" alt="" id="Files">
</map>
Is it possible for me to determine using JavaScript or jQuery if an area was clicked? Then I could identify the ID and perform the correct actions. What I currently have is a lot of different conditions like so...
$("#Contacts").click(function(event){
event.preventDefault();
// okay lets show the contacts interface
$("#mainPage").fadeOut(300, function(){
$(this).attr('src','claas_ipad3_1.jpg').bind('onreadystatechange load', function(){
if (this.complete){
$(this).fadeIn(300);
$(this).attr('USEMAP','#claas_ipad_1');
}
});
});
});
However if I know which area was clicked (by determining the id) I can apply array values into a generic function rather than binding to the map areas specifically.
I was thinking I could determine the id of what was clicked something like this:
$(this).live('click', function () {
alert($(this).attr('id'));
});
however this will affect my whole page, which isn't a problem but I know it won't work.
Sorry if I haven't explained myself well or my wording is poor. I can extend or reword if desired.
Thanks
UPDATE
I have solved this, if I apply an ID to the Map using the following will return the ID
$("#Map1 area").click( function () {
alert($(this).attr('id')); // this
});
There are different approaches.
I guess the easiest would be this one:
$("map[name=claas_ipad3] area").live('click', function () {
alert($(this).attr('id'));
});
Note that as of jQuery 1.7, the .live() method is deprecated and you should use .on() to attach event handlers:
$("map[name=claas_ipad3] area").on('click', function () {
alert($(this).attr('id'));
});
Let's say you have two images that use the same image map.
<img src="/test/image1.jpg" id="image1" useMap="map-name">
<img src="/test/image2.jpg" id="image2" useMap="map-name">
<map name="map-name">
<area shape="rect" coords="0,0,82,126" alt="Sun" onmouseover="testFunction();"/>
<area shape="circle" coords="90,58,3" alt="Mercury" onmouseover="testFunction();"/>
<area shape="circle" coords="124,58,8" alt="Venus" onmouseover="testFunction();"/>
</map>
Is there any way to get the ID of the image (image1|image2 in this case) inside of the testFunction()?
Yes. The easiest way is to use a library like jQuery to hook up the event, instead of using onmouseover. If you do that, you'll basically do something like:
$("AREA").mouseOver(function (e) {
var id = $(e.target).attr("id");
}
If you don't do that then ... well play around with "this" inside your definition of testFunction, and good luck (because you'll get to deal with the joy of cross-browser incompatibility).