Html image hotspot switch image - javascript
I have an image hotspot on a map which swops the image out on hover however I would like keep the image open for longer and only have it close (and change back to the original) if the users moves their cursor outside of the new swapped image outline instead of the original hotspot, is something like this possible?
Herewith my code so far
<div class="mapwrap" style="text-align:center;"><img src="/dev/test/templates/jwd25template/images/map-blank.png" alt="wc" name="map" width="700" height="400" usemap="#mapMap" id="map" border="0" ></div>
<map name="mapMap">
<area shape="poly" coords="231,299,236,309,239,314,242,324,242,333,241,340,237,342,232,342,232,346,236,348,239,352,242,359,244,360,246,363,249,371,245,374,243,378,244,379,252,373,253,375,255,378,255,380,260,382,260,381,266,384,269,387,272,389,275,390,276,390,279,390,287,386,288,383,293,381,298,380,303,379,306,379,307,380,310,380,314,378,317,378,320,378,322,376,325,374,330,372,337,370,342,370,347,372,349,372,355,372,358,370,359,369,355,366,352,363,354,358,356,358,354,355,349,354,348,354,342,355,339,352,339,348,341,344,344,339,349,337,352,332,352,327,357,325,362,324,370,323,373,316,372,312,367,309,366,310,360,308,355,311,350,315,346,317,342,315,337,313,331,310,327,307,326,314,325,318,323,322,321,324,314,324,309,327,306,330,304,334,303,335,300,337,297,339,294,341,291,341,288,341,283,339,280,334,280,329,283,325,283,324,277,328,271,331,269,334,269,335,266,327,269,321,266,319,264,317,257,315,257,310,256,302,255,296,255,292,254,286,246,281,239,280,240,285,233,287,231,293,229,296,229,296" href="takke/western-cape" target="_parent" alt="WC" onMouseOver="MM_swapImage('map','','/dev/test/templates/jwd25template/images/map-WC-2.png',1)" onMouseOut="MM_swapImgRestore('map','','/dev/test/templates/jwd25template/images/map-blank.png',1)"></map>
I tried to add a onMouseOut url but I realise that wont work.
Trying to wrap my head around it, any ideas would be much appreciated :)
You can do this with CSS
HTML CODE:
<map id="big_map_area">
<area shape="poly" id="map_hover" coords="231,299,2..." href="takke/western-cape" target="_parent" alt="WC">
</map>
CSS CODE:
#map_hover {
opacity:0.0;
}
JQUERY CODE:
$("#map_hover").mouseover(function () {
this.css('opacity', '1.0');
});
$("#big_map_area").mouseout(function () {
$("#map_hover").css('opacity', '0.0');
});
So you show your image when mouse enter in small poligon that is inside tha map, and image swap when you leave the big map container.
Now it should work.
Related
Can you put an image map within an image map? (JavaScript)?
For example, by clicking certain pixels in image 1, image 2 appears. Now, how can I click certain pixels in image 2 to make image 3 appear? It seems I can only have one map for images that are already there...
You can't embed a map inside another map, it can only use area.
However you can have links to replace the container with another map if that's what you're looking to do. Here's the updated code, with the key piece being the function which replaces the current map with the next one:
document.getElementById('topImageMap').setAttribute("usemap","Presets");
It would then be easy to add another element & function to take you back to the previous or 'home' map.
<!DOCTYPE html>
<html>
<body>
<img id="LivePreview"
src="http://i.imgur.com/p5LwjWA.png">
<br></br>
<img id="topImageMap"
src="http://i.imgur.com/vU7VZ4V.png" usemap="Patterns">
<img id="WhiteSpace"
src=http://i.imgur.com/jf7wt2j.png>
<map name="Patterns">
<area alt="PresetsButton" coords="18,21,94,80" onclick="changeContainer()" shape="rect" usemap="Presets"></area>
<area alt="RandomButton" coords="200,21,297,83" onclick="document.getElementById('WhiteSpace').src='http://i.imgur.com/Raypdtk.png'" shape="rect"></area>
</map>
<map name="Presets">
<area alt="PuffnairbeadButton" coords="58,26,153,95" onclick="document.getElementById('LivePreview').src='http://i.imgur.com/DjbAdnh.png'" shape="rect"></area>
</map>
<script>
function changeContainer(){
document.getElementById('topImageMap').setAttribute("usemap","Presets");
document.getElementById('topImageMap').src='http://i.imgur.com/wyQMR51.png'
}
</script>
</body>
</html>
Set hyperlinks to certain sections of the same picture? (HTML)
I want to have certain parts of the same picture hyperlinked to different webpages Is there a way I can do this with javascript coordinates or any other way?
You can do it with the HTML MAP tag, for example:
<img src="http://www.w3.org/html/logo/downloads/HTML5_Logo_512.png"
width="512" height="512" alt="Logo" usemap="#logomap"/>
<map name="logomap">
<area shape="rect" coords="0,0,256,512"
href="javascript:alert('left')" alt="Left">
<area shape="rect" coords="256,0,512,512"
href="javascript:alert('right')" alt="Right">
</map>
Here's fiddle to try it out. Clicking on the left side of the image will show a Javascript alert that says left, on the right side it will show right.
HTML/Javascript Overlaying Images on Region Mouseovers
So I have an image on a page and an imagemap corresponding to that image, then I also have two corresponding images, each the same size as the first (mostly transparent) that I want to overlay onto that image when a certain region of the imagemap is moused over. How would I go about doing that, is this something I can accomplish with CSS or will I need javascript for it?
I think you do need Javascript as not all browsers support css hover psuedo-class on elements other than <a>. You should be able to do it with minimal Javascript. See the <map> tag: http://www.w3schools.com/tags/tag_map.asp
For example, if you want mousing over the 100 by 100 pixel square in the top left of your image (image1.png) to enable the overlay image (image2.png):
<script type="text/javascript">
function area1_mouseover() {
document.getElementById('image2').style.visibility = 'visible';
}
function area1_mouseout() {
document.getElementById('image2').style.visibility = 'hidden';
}
</script>
<img src="image2.png" id="image2" style="position: absolute; visibility: hidden; z-index: 2;" usemap="#my_map" />
<img src="image1.png" id="image1" usemap="#my_map" />
<map name="my_map">
<area shape="rect" coords="0,0,100,100" onmouseover="area1_mouseover();" onmouseout="area1_mouseout();" />
</map>
Edit: applying the map to all the images should solve that problem since they are all the same size.
Mouseovers on image maps in IE8
I'm having a problem with IE (who isn't) executing my javascript. Are there any known issues with attaching mouseovers to image maps in IE8? I'm not seeing any similar posts.
For instance, here is the HTML in one of my pages:
<map name="Map" id="Map">
<area shape="poly" coords="2,575,389,637,388,19,1,74" alt="Main Page" onmouseover="fade('indexpop')" onmouseout="fade('indexpop');" />
</map>
Pretty simple. In every browser but IE, this excecutes the "fade" function to fade in (or out) a div with some information.
The function itself is here, but I don't think the issue is with the function but with the mouseovers.
Thanks,
-tcm <><
Don't you have to put the mouseovers on the IMG (image) instead of the image map ?
Getting jQuery tooltip to have a tip start as active when page first loads
I'm using the jQuery tooltip plug in on an image map. When a part of the image is hovered over, the tip appears. This is activated with the following code:
$(function() {
$("map > area").tooltip({ positionLeft: true });
});
The html for the image map is set up like this:
<map name="Map">
<area shape="rect" coords="36,466,64,507" href="link.aspx" alt="Alt Title" title="ToolTip Title" />
<area shape="rect" coords="36,466,64,507" href="link.aspx" alt="Alt Title2" title="ToolTip Title2" />
</map>
I'd like to have one of the tool tips be in the active (or hovered) state when the page first loads. I'm having a hard time figuring out how to do this, or if it is even possible.
Has anybody used this plugin and have any ideas of how I could implement this feature?
When the page is finished loading you can trigger the mouseover.
$("[name='Map']").trigger("mouseover");
You could focus mouse on preferable part of the map or trigger event (probably hover) that activates tooltip.