Getting flicker from transparent PNG used as mouseover image - javascript

I did a little bit of poking around for this, but couldn't find the exact thing I am trying to do here. Basically I have an image map, where I wanted to have hidden layers appear over the top of the image on mouseover. There are 5 different hotspots, and 5 different hidden layers that correspond, and show up only when you mouseover the corresponding hotspot.
The problem is this: each of the hidden layers on top contains a PNG with transparent bits, and the PNG is revealed pretty much in the same spot where the user's mouse is. When it is called up by a mouseover, the PNG flickers rapidly...I presume because the page is having trouble determining whether the mouse is over or off the image, due to its transparency...?
Anyone have a clever solution to this?
I've got this in the head:
<script type="text/javascript" language="JavaScript">
<!--
function HideContent(d) {
if(d.length < 1) { return; }
document.getElementById(d).style.display = "none";
}
function ShowContent(d) {
if(d.length < 1) { return; }
document.getElementById(d).style.display = "block";
}
function ReverseContentDisplay(d) {
if(d.length < 1) { return; }
if(document.getElementById(d).style.display == "none") { document.getElementById(d).style.display = "block"; }
else { document.getElementById(d).style.display = "none"; }
}
//-->
</script>
And this in the body of the page:
<div id="homeowners"
style="display:none;
position:absolute;
left:0px;
top:39px;
padding: 5px;
z-index:10;">
<img src="<?php bloginfo('template_directory'); ?>/images/homeowners-over.png" width="257" height="107" alt="Homeowners" /></div>
<div id="dealers"
style="display:none;
position:absolute;
left:319px;
top:39px;
padding: 5px;
z-index:10;">
<img src="<?php bloginfo('template_directory'); ?>/images/dealers-over.png" width="257" height="107" alt="Dealers" /></div>
<div id="commercial"
style="display:none;
position:absolute;
left:0px;
top:509px;
padding: 5px;
z-index:10;">
<img src="<?php bloginfo('template_directory'); ?>/images/commercial-over.png" width="257" height="107" alt="Commercial" /></div>
<div id="importers"
style="display:none;
position:absolute;
left:319px;
top:509px;
padding: 5px;
z-index:10;">
<img src="<?php bloginfo('template_directory'); ?>/images/importers-over.png" width="257" height="107" alt="Importers" /></div>
<img src="<?php bloginfo('template_directory'); ?>/images/aww_home.jpg" width="586" height="638" border="0" usemap="#Map" />
<map name="Map" id="Map">
<area shape="poly" coords="3,4,293,4,293,25,4,313" href="#"
onmouseover="ShowContent('homeowners'); return true;"
href="javascript:ShowContent('homeowners')"
onmouseout="HideContent('homeowners'); return true;"
href="javascript:HideContent('homeowners')">
<area shape="poly" coords="296,5,583,4,584,312,296,27" href="#"
onmouseover="ShowContent('dealers'); return true;"
href="javascript:ShowContent('dealers')"
onmouseout="HideContent('dealers'); return true;"
href="javascript:HideContent('dealers')">
<area shape="poly" coords="294,32,8,317,295,603,575,318" href="#" />
<area shape="poly" coords="5,322,4,633,294,634,294,608" href="#"
onmouseover="ShowContent('commercial'); return true;"
href="javascript:ShowContent('commercial')"
onmouseout="HideContent('commercial'); return true;"
href="javascript:HideContent('commercial')">
<area shape="poly" coords="299,607,299,634,582,634,580,325" href="#"
onmouseover="ShowContent('importers'); return true;"
href="javascript:ShowContent('importers')"
onmouseout="HideContent('importers'); return true;"
href="javascript:HideContent('importers')">
</map>
Many thanks!

Since you have not mentioned on which elements you have added mouseover and mouseout event handlers, I am going to assume that you are calling showContent to show png when mouse is moved over the div and you are calling hideContent to hide the png when mouse is over the png.
If this is what is happening then the reason for the flicker is:
When mouse is moved over div, the png is shown over the div. Therefore the mouse is now over png due to which mouseover event is fired on png which hides it. Now the mouse is over the div therefore, the mouseover event is fired on div due to which png is shown. This will keep on going.
Solutions:
1. Place the png (on showing) a little further from the mouse so that the png is not directly below the mouse cursor.
2. Or, remove the mouseover event handler from the png and add the mouseout handler to div to hide the png.

I corrected my problem when I added .show to the element that pops up as well. The browser was getting confused when my mouse would transition from one element to the other.
$(function () {
$('.parent_div').hover(function () {
$('.show_popup').show();
}, function () {
$('.show_popup').hide();
});
});
$(function () {
$('.show_popup').hover(function () {
$('.show_popup').show();
});
});

Related

change image on hover with image map

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>

Mouseover - make image appear

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/.

Reverting image maps to functions

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";
}

How do I display a GIF image when hovering over a point in another image in HTML and CSS?

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

How to popUp image and link with javascript or jQuery?

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/

Categories