HTML/Javascript Overlaying Images on Region Mouseovers - javascript

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.

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>

Html image hotspot switch image

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.

stop() function stops other controling parameters

I have a complex imagemap with several mapped areas. On mouseover or click I want to overlay these imagemap with other images which do have exactly the same size and shall be in exactly the same position. So far, so good.
Doing this, I added a .fadeIn() and .fadeOut() on my mouseover or on click. Common problem - loads of solutions online. The fadeIn() flickers/blinks. I found this solution here jQuery fade flickers . So I added the .stop() (I did not understand the animate() solution Jquery - fadeIn/fadeOut flicker on rollover or How to stop fadeIn() blinking?, or better, did not know how to implement it).
But now, I cannot control the time of my .fadeIn() and .fadeOut() anymore. Moreover, only the .mouseenter() works, but not the .click(). Apart from that, everything works fine. The image overlays, the faded in images are in the right spot... Its just that fade which wont work.
Below an exerpt of my code.
<head>
<script>
//PRELOAD THE IMAGES
verde = new Image(698, 360)
verde.src = "imagenes_png/verde_mouse.png";
azul = new Image(698, 360)
azul.src = "imagenes_png/azul_mouse.png";
//there are more images preloaded
//LOAD THE DOM BEFORE JS FILLS IT WITH IMG
$(document).ready(function() {
document.getElementById("verde").appendChild(verde);
document.getElementById("azul").appendChild(azul);
});
//jQUERY FADE
$(document).ready(function() {
$(function() {
$("#verdeA").click(function() {
$("#verde").stop().fadeIn("1000");
});
$("#verdeA").mouseleave(function() {
$("#verde").stop().fadeOut("500");
});
$("#azulA").mouseenter(function() {
$("#azul").stop().fadeIn("5000");
});
$("#azulA").mouseleave(function() {
$("#azul").stop().fadeOut("500");
});
});
});
</script>
</head>
<body>
<!-- INSERT THE PICTURE -->
<div id="juego_bosque">
<img name="bosque" id="bosque1" src="imagenes_png/bosque_mapa.png" width="698" height="360" border="0" usemap="#bosque_m" alt="Bosque con animales" style="position:absolute" />
<!-- CREATE THE MAP -->
<map name="bosque_m" id="bosque_m">
<area id="verdeA" shape="poly" coords="643,324,646,322,648,321,651,320,654,320,656,321,658,323,659,324,660,327,659,330,657,332,655,334,654,335,654,332,653,329,653,327,650,326,648,328,648,331,649,332,650,334,652,335,654,337,656,338,658,339,660,341,662,342,662,345,661,348,660,350,657,351,656,351,656,346,656,345,653,347,651,350,650,351,651,353,651,354,653,356,656,356,658,356,660,356,662,356,666,354,668,351,669,349,670,347,669,346,665,346,666,342,667,341,668,340,670,339,672,339,674,341,676,344,676,347,675,351,672,355,670,357,669,360,642,360,644,356,646,353,647,350,648,346,650,340,650,337,646,332,645,330,644,327,643,324"
alt="" />
<area shape="poly" coords="472,249,476,249,479,250,483,251,484,255,485,258,487,261,489,263,493,265,498,266,501,268,504,270,504,271,499,270,495,269,489,268,486,269,484,270,480,269,476,268,473,266,470,262,469,260,468,256,470,253,472,249"
id="azulA" alt="" />
<!-- HIDDEN PRELOADED IMAGES -->
<div id="azul" style="display:none; position:absolute"></div>
<div id="verde" style="display:none; position:relative"></div>
</div>
</body>
Here a Fiddle http://jsfiddle.net/6fq6ymx2/
On the Fiddle ony the two very right highlighted graphics have an effect added.

Overlap two images in HTML5

im trying to overlap to images. One of them is hidden and its show after picking in the right image in the "clipart library" section. And the other image i get is uploading it from your browser.
I have used posiotion:absolute before to overlap two images, but it doesnt work for me in this caes.
<div id="bgcolor">
<img id="thumbnil" style="width:100%; margin-top:10px;" src="" alt="" style="position:absolute;" />
<img id="tiger" src="https://openclipart.org/image/800px/svg_to_png/202300/Blue-surprised-cartoon-smiley.png" height="50" width="50" style="position:absolute;">
</div>
Here is the code in jsfiddle: http://jsfiddle.net/xq239ko9/
Make the containing div have a style position:relative;. Then make the images position:absolute; top:0; left: 0;. This makes both images appear on the same position within the parent div. Please note, that the parent div will lose it's size, as the images will be positioned outside the document flow.
Another remark:
- Try to use one style attribute per tag.
- Try to hide images by using display:none; instead of an empty src attribute
- Try to use the width and height style properties instead of tag attributes

Change background of mapped image hotspot on mouseover

I have an image map of 3 polygons. The actual image hotspots are complex shapes consisting of multiple curves and edges.
<img src="/images/map.gif" alt="HTML Map"
border="0" usemap="#map"/>
<map name="map">
<area shape="poly"
coords="74,0,113,29,98,72,52,72,38,27"
href="index.htm" alt="area1" />
<area shape="poly"
coords="22,83,126,125"
href="index.htm" alt="area2" />
<area shape="poly"
coords="73,168,32"
href="index.htm" alt="area3" />
</map>
I've created a duplicate of map.gif called map_over.gif rendered in a different color. What I'd like to do is change the area within the clickable hotsposts of map.gif to map_over.gif on mouse hover. Any suggestions as to how I could accomplish this with CSS or Javascript? Thanks in advance.
aThis is an easy one.
html:
<img src="/images/map.gif" alt="HTML Map" border="0" usemap="#map" id="mappedImage" />
css:
img#mappedImage:hover {
background: url("/images/map2.gif") no-repeat scroll 0 0 transparent;
}
Should do the trick. You could use the background-image: url("/images/map2.gif") as well - background provides more options at once like background-repeat, background-position etc.
As for any questions about css I can recommend http://www.css4you.de/borderproperty.html as a good reference site with good examples.

Categories