Member Avatar for kooia

Hi everyone,

I'm completely new to javascript, and I was working on a project that's supposed to overlay an image when mouseover occurs. When you mouseover, it shows the image, but then when you're moving your mouse over that area, the overlaid image flashes. I think maybe this should go in the HTML section, because I think its something wrong with the map. Here's the code:

<!DOCTYPE html PUBLIC>
<html>
<head>
<title>Javascript Animation Test 001</title>
<script type="text/javascript">
function factoryMouseOver()
{
document.getElementById("factory").style.visibility="visible";
}
function factoryMouseOut()
{
document.getElementById("factory").style.visibility="hidden";
}                 
</script>

</head>
<body>
<div id="start">
<img src="start.gif" width="500" height="400" style="z-index:0;position:absolute;top:0;left:0;" usemap="#startmap" onclick="factoryMouseOver()"  />
<map name="startmap">
  <area shape="poly" coords="334,383,460,369,454,319,434,299,412,303,408,281,358,256,306,243,294,240,280,267,310,290,333,294,332,312,311,316,310,366,334,383" onmouseover="factoryMouseOver()" onmouseout="factoryMouseOut()" />
</map>
<img src = "factorymouseover.png" width="500" height="400" style="z-index:0;position:absolute;top:0;left:0;visibility:hidden;" id="factory" />
</div>

</body>
</html>

Please tell me what I'm doing wrong. I tried searching it, but it only came up with stuff about flashing when they were shading in an image.

  • 2 Contributors
  • 2 Replies
  • 1K Views
  • 6 Hours Discussion Span
  • Latest Post Latest Post by R0bb0b
Member Avatar for R0bb0b

I think what you are looking for is:

<script type="text/javascript">
function factoryMouseOver()
{
document.getElementById("factory").style.display="block";
}
function factoryMouseOut()
{
document.getElementById("factory").style.display="none";
}                 
</script>

but jquery offers a much more elegant way of doing it which I will post in a few minutes if you want to wait.

Member Avatar for R0bb0b 
<html>
    <head>
        <title>Javascript Animation Test 001</title>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>  
        <script type="text/javascript">
            $("#factory").hover(
                function ()
                {
                    $(this).show();
                }, 
                function () 
                {
                    $(this).hide();
                }
            );
        </script>
    </head>
    <body>
        <div id="start">
            <img src="start.gif" width="500" height="400" style="z-index:0;position:absolute;top:0;left:0;" usemap="#startmap" onclick="factoryMouseOver()"  />
            <map name="startmap">
                <area shape="poly" coords="334,383,460,369,454,319,434,299,412,303,408,281,358,256,306,243,294,240,280,267,310,290,333,294,332,312,311,316,310,366,334,383" onmouseover="factoryMouseOver()" onmouseout="factoryMouseOut()" 
            </map>
            <img src = "factorymouseover.png" width="500" height="400" style="z-index:0;position:absolute;top:0;left:0;visibility:hidden;" id="factory" />
        </div>
    </body>
</html>
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.