Circular Image Map onMouseover Flicker

SkuzBucket · 05-29-2011, 09:20 AM

So I need to make a circular image map with a rollover state.

I have circular buttons that I'm trying to put on my website, which I would like to not only look circular bu to BE circular. Because it just looks lame to hover over a square area and activate a button that's still 30 pixels away.

I was digging through the Internets and found this:

http://jsfiddle.net/7JJUk/

My idea was to tweak the rollover overlay into being as large as my original image and use the rollover image as the content of the overlay div. After loads of messing around, I finally have come to this:

http://jsfiddle.net/7JJUk/248/

I just know i'm on to something, but I don't know anything, really, about Javascript. I've been messing with the tidbits to figure out what controls what, but the issue I can't get past is how the image will flicker like mad (every other pixel in Chrome, sporadically in Firefox 4 whether you move the mouse or not, and only as you pass through it at certain speeds in IE 9) as you hover over it.

I have no idea if this is even possible, but if it is, please help me out. If there's a better way to be doing this altogether (without flash), I would absolutely love that. Especially if there's a way to use an image map with the position command in CSS..

Thanks!!!

bullant · 05-29-2011, 09:51 AM

Quote:

So I need to make a circular image map with a rollover state.

Something like this?

When you rollover the circle in the image a popup alert will appear.

I've have attached the image the demo uses.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
        <title></title>
        <style type="text/css">
            img {border: none;}
        </style>
        <script type="text/javascript">
            function doThis(){
                alert('You have rolled over the circle');
            }
        </script>
    </head>
    <body>
        <div>
            <img src="circle.gif" alt="" usemap="#mymap" />
        </div>
        <div>
            <map id="mymap" name="mymap">
                <area shape="circle" coords="50,50,50" href="" onmouseover="doThis(); return false;" alt="" />
            </map>
        </div>
    </body>
</html>

SkuzBucket · 05-29-2011, 11:35 PM

Quote:

Originally Posted by bullant

Something like this?

When you rollover the circle in the image a popup alert will appear.

That's almost it. So close. I was hoping to have the image itself change on the rollover state. This is basically doing what I need when it comes to responding to the mouseover, though..

Thanks for your help.. I'm like super noob at this stuff... >_<

bullant · 05-30-2011, 01:07 AM

Are you sure you want an actual image map?

Now sounds like you just want an image with an onmouseover event handler to run some javascript and toggle the <img>'s src property value.

Post your code. I don't click links in posts anymore since my Trend Micro Internet Security detected a "nasty" in one recently.

SkuzBucket · 05-30-2011, 07:59 AM

Fair enough.

And yeah, I do want the image map, unless there's another way to make a circular reaction area without using flash to make the whole project. Pretty much the only reason with this is that with my images, there would be a 30x30x42-pixel triangle of white space at each corner that activated the rollover long before your cursor hit the actual visible image. Which for my portfolio would seem just.. gross, I guess.

Anyway, here's the code:

Code:





<html>
<head>


<script type="Javascript">

$('area').each(function(){
    var area = $(this),
        alt = area.attr('alt');
    area.mouseover(function(){
        $('#overlay').html(alt);
    }).mouseout(function(){
        $('#overlay').html('');
    });
});

</script>	

<style type="text/css">


#map {
    position: relative;
}
#overlay {
    color:#ff0000;
    background-image: url(http://i69.photobucket.com/albums/i55/iyasu_yosomono/looky.png);
    position: absolute;
    color: #fff;
    top: 0px;
    left: 0px;
}


</style>

</head>


<body>
    
<div id="map">
    <div id="overlay"></div>
    <img src="http://i69.photobucket.com/albums/i55/iyasu_yosomono/listen.png" width="145" height="145" 

alt="Planets" usemap="#planetmap" />
</div>
<map name="planetmap">
    <area shape="circle" coords="72,72,59" href="#"
    alt='<img src="http://i69.photobucket.com/albums/i55/iyasu_yosomono/looky.png">'
    id='<img src="http://i69.photobucket.com/albums/i55/iyasu_yosomono/listen.png">'/>
</map>
</body>


</html>

Um. For some reason when I copy the code from jsFiddle into a .txt and save it in a .html file, the flickering doesn't happen, but it doesn't do the rollover state, either. Don't know what's up with that...

If you want, though, you can Google "jsFiddle." It's a pretty legit developer site for working on all of CSS, JS, and HTML in one window, automatically combining the three into a result pane that shows you what it looks like. Cheap, but useful, I guess.

Anyway,
Thanks again.

PS--Um. would it be possible to tweak your above code to make the doThis command call up something that would bring another image into play, be it via overlapping div or image map, instead of the alert box?