image map - change image on hover - HTML forum at WebmasterWorld - WebmasterWorld

Forum Moderators: open

Message Too Old, No Replies

image map - change image on hover

image hover map

scalfy

10:36 am on Jun 20, 2011 (gmt 0)

10+ Year Member

Hello all

I have set up an imagemap with a circular hotspot. This acts as a "button" on my index splashpage that links the user into the website proper.

On hover over I want for the hotspot to change into another image (really the same image but with inversed colours)

and its driving me nuts !
I've looked into image sprites, css imagemaps and jquery plugins like wunderkind (http://wunderkind.hokuten.net/) and have been trolling forums but I cannot get anything working.

preferably I want to do this without having to use javascript, but in my internet wanderings I'm thinking that I'm going to have to use it (I know virtually nothing of javascript!)

I found this thread
[webmasterworld.com ]
which is almost exactly what I needed but I couldnt get the javascript working for my code.

I thought this would be relatively simple to achieve, but i am really struggling
I have attached my code at the bottom,
Any help would be super appreciated!

Scalfy

<?xml version="1.0" encoding="UTF-8"?>
<!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" xml:lang="en" lang="en">

<head>
<title>The Spindle Sideshow</title>
<link rel="stylesheet" type="text/css" href="spindlehome.css" />
<link rel="Shortcut Icon" href="favicon.gif"/>
<meta name="description" content="Join the caravan under the Big Top for a night of Beauty Fashion and Music"/>
<meta name="keywords" content="spindle,sideshow,ede,mary,skirt,luke,dette,townsville,fashion,parade"/>
</head>

<body>
<div id="wrapperhome">
<img src="images/splashpage.png" width="1000px" height="800px" alt="Homepage Image" usemap="#splashpage" />
<map name="splashpage" title="enter site">
<area shape="circle" coords="754,406,111" href="tickets.html" />
</map>
</div> 
</body>
</html>

rocknbil

4:02 pm on Jun 20, 2011 (gmt 0)

WebmasterWorld Senior Member

10+ Year Member

Welcome aboard scalfy, I just did one of these. It was far more complex than yours. :-) It had five states for mapped areas - since you have only one, what I would do is follow the stacking method mentioned below, remove the <img> tag and map, and make it an anchor tag. Then you could do something like this.

<a id="#circle" href="#">This is my circle image</a>

#citcle { display:block; width: 1000px; height: 800px; background:url(splashpage.png) top left no-repeat; }
#circle: hover { background-position: bottom left; }

That's the **easier** way, no JS required. However, it will change when the entire image is moused over, even outside the circle. If you want it to only change in the area of the circle, you're correct in that you'll have to use JS, but if you use Jquery it's quite easy.

Begin by taking your splashpage.png and stacking it with the alternate image below it. So if it's a 1000 X 800 image, your file will now be 1000 X 1600 with the moused-over version on the bottom (use this for either method: )

MY IMAGE
--------
MY MOUSEOVER

Now create a 1 X 1 transparent pixel (one of the few times we ever have to use these now!) This will be our "imagemap," with the splashpage.png as our background image for the container holding the transparent image. Since we're using the transparent image and it's map as the event object and operating on another object, we can't do this in CSS alone, we need the assistance of Javascript.

Now your HTML will look something like this.

<p id="splashcontainer"><img src="images/blank-pixel.gif" width="1000px" height="800px" alt="Homepage Image" usemap="#splashpage" /></p>

In XHTML, image objects should be contained anyway.

Add an ID to the map anchor:

<area shape="circle" id="mapcircle" coords="754,406,111" href="tickets.html" alt="TICKETS" />

ALT is required for valid XHTML

The CSS for this would be something like:

#splashcontainer { margin:0; padding:0; display:block; width: 1000px; height: 800px; background:url(splashpage.png) top left no-repeat; }

Now we add the Javascript to the head of the document, you can use any version of JQuery - I have an old one for reasons unrelated to this project:
<script type="text/javascript" src="jquery-1.2.6.min.js"></script>
<script type="text/javascript" src="my-script.js"></script>

The contents of myscript.js would be this alone. What is happening here is on initialization of the document, we are assigning an action to the map mouseover. When moused over, the Javascript moves the background of #spashcontainer to the bottom position, emulating :hover.


$(function(){ 
 $('#mapcircle').onmouseover=function() { $('#splashcontainer').style.backgroundPosition="bottom left"; } 
 $('#mapcircle').onmouseout=function() { $('#splashcontainer').style.backgroundPosition="top left"; } 
});

Note this is not tested code, typed on the fly, but this will work, even on complex maps.

scalfy

1:29 am on Jun 21, 2011 (gmt 0)

10+ Year Member

Thank you so much for your reply rocknbil..
I think I almost have it but it still wont work!

I have mucked around with it all morning (I'm in Australia)
I think everything is working except for the javascript.

It all displays properly with the blank-pixel gif etc, but the image will not change on hover.

This is what I've got

HTML

<?xml version="1.0" encoding="UTF-8"?>
<!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" xml:lang="en" lang="en">

<head>
<title>The Spindle Sideshow</title>
<link rel="stylesheet" type="text/css" href="spindlehome.css" />
<script type="text/javascript" src="jquery-1.2.6.min.js"></script>
<script type="text/javascript" src="my-script.js"></script>
<link rel="Shortcut Icon" href="favicon.gif"/>
<meta name="description" content="Join the caravan under the Big Top for a night of Beauty Fashion and Music"/>
<meta name="keywords" content="spindle,sideshow,ede,mary,skirt,luke,dette,townsville,fashion,parade"/>
</head>

<body>

<p id="splashcontainer"><img src="images/blank-pixel.gif" width="1000px" height="800px" alt="Homepage Image" usemap="#splashmap"/></p>
<map name="splashmap" title="enter site">
<area shape="circle" id="mapcircle" coords="754,406,111" href="tickets.html" alt="Tickets"/>
</map>

</body>
</html>

CSS

* { margin:0; padding:0;

}

html { background-image: url('images/backgroundtexture.jpg');
background-attachment: scroll;
background-position: center 0;
background-repeat: repeat;

}

#splashcontainer
{ margin: 0;
padding: 0;
display: block;
width: 1000px;
height: 800px;
background:url('images/splashpage.png') top left no-repeat;

}

Javascript

$(function(){
$('#mapcircle').onmouseover=function() { $('#splashcontainer').style.backgroundPosition="bottom left"; }
$('#mapcircle').onmouseout=function() { $('#splashcontainer').style.backgroundPosition="top left"; }
});

and then the jquery-1.2.6.min file

all files are in the right directory etc.
I actually want it to display top and center but I thought i'd get it working top left and then tackle the centering issue, but nothing is working on hover.

Any suggestions?
Help me Obi-Wan Kenobi, you're my only hope :-P

rocknbil

4:30 pm on Jun 21, 2011 (gmt 0)

WebmasterWorld Senior Member

10+ Year Member

What happens when you add this?

$('#mapcircle').onmouseover=function() { alert('moused over'); $('#splashcontainer').style.backgroundPosition="bottom left"; }

If you get the alert, I'm not sure. If you don't get the alert, you probably have an error somewhere - if you use FireFox, open the Error Control Panel and see what the error is.

scalfy

1:59 am on Jun 23, 2011 (gmt 0)

10+ Year Member

thank you SO much for all your help rocknbil, unfortunately I have run out of time to spend on this :(

I would have really liked to get it working, but try as i might I could not figure out the problem. I think it was something to do with the linking to the javascript. I have other javascript libraries for this site (namely lightbox) and that is working perfectly, but the jquery would not play nice at all. I hope someone else with a similar problem uses your code successfully so your time was not wasted!

Thanks again, I really appreciate it

Scalfy

bil_fs

2:48 pm on Jul 8, 2011 (gmt 0)

10+ Year Member

to use the jquery, the correct is :

$('#mapcircle').mouseover(function(){ alert('test'); });

it�s works for me.

scalfy

4:10 am on Jul 9, 2011 (gmt 0)

10+ Year Member

Hey bil_fs

So my js would be

$(function(){
$('#mapcircle').mouseover(function(){ alert('test'); $('#splashcontainer').style.backgroundPosition="bottom left"; }
$('#mapcircle').mouseout(function(){ $('#splashcontainer').style.backgroundPosition="top left"; }
});

?

Cause thats still not working, I think its just me, my site is already live, this is more for me and my peace of mind than anything!

jamietre

3:12 pm on Jul 14, 2011 (gmt 0)

10+ Year Member

Not sure if you are still looking for a solution but I wrote a jquery plugin to do exactly this called Image Mapster: [outsharked.com...]

You can provide it with an alternate image of the same dimensions as your image map, and it will use the alt image as the source to render the highlights.

If you don't want the weight of the plugin (it's about 28k compressed) you could take a look at the source to see how the alt image part works, it uses canvases to extract the contents of one image inside the boundaries of the image map "area", and renders it with a mask.

Since canvases aren't available in older Internet Explorer browsers the plugin falls back on an opacity highlight for those browsers.