1. Home
  2. Forums Index
  3. Browser Side / HTML 10:36 am May 21, 2026

Forum Moderators: open

Message Too Old, No Replies

use image map and change image on hover?

image map hover background image

         

EcksTen

2:39 pm on May 26, 2010 (gmt 0)

10+ Year Member



Hello all,
I'm trying to figure out a way to get a non-rectangular image (with a link attached) to change when hovered over. (preferably without having to resort to Javascript, but will do if there's no other way)

Sounds simple but I'm stumped so far. I've got just the image portion of the entire image linked using an image map, but I can't see any way of then changing the image to the hovered version using just html/css.

Hopefully that makes sense, let me know if I need to explain more.

All help welcome!

X10

this is my code so far: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>coming_soon</title>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=iso-8859-1" />
<style type="text/css">

body{
margin:0;
padding:0;
}

#test{
position:absolute;
top:100px;
left:300px;
line-height:130px;
width:319px;
height:130px;
overflow:hidden;
text-align: center;
}

#coming_soon{
position:relative;
vertical-align:bottom;
width:319px;
height:260px;
border:none;

}
</style>

</head>

<body bgcolor="#FFFFFF">
<div id="test">
<img id="coming_soon" src="images/coming_soon.png" alt="" usemap="#coming_soon_Map" />
<map name="coming_soon_Map" id="coming_soon_Map">
<area shape="poly" alt="" coords="7,39, 16,10, 22,7, 308,86, 313,92, 302,120, 298,122, 290,122, 12,48, 7,44" href="#" />
</map>
</div>
</body>
</html>

[edited by: incrediBILL at 3:03 pm (utc) on May 26, 2010]
[edit reason] Link to image removed [/edit]

Major_Payne

10:49 pm on May 27, 2010 (gmt 0)



This may be what you are after. They have links to the image map used with hover states:

CSS Sprites: Image Slicing's Kiss of Death [alistapart.com]

Ron

[edited by: tedster at 4:16 am (utc) on May 28, 2010]
[edit reason] fixed the link [/edit]

EcksTen

5:04 pm on May 28, 2010 (gmt 0)

10+ Year Member



Thanks Major_Payne,
I did look into that but unfortunately doesn't do what I need - it still uses rectangular shapes to make a menu.

In my case, I just want 1 image to be mapped but change on hover.

Is it possible?

tedster

4:57 am on May 29, 2010 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



I want to be sure I understand what your needs are.

You want only one hotspot in a large image - an irregular polygon shape.
The image change on hover should only appear within the hot spot.
The image should not change when the mouse goes over any other part of the image.

Is that it?

birdbrain

11:03 am on May 29, 2010 (gmt 0)



Hi there EcksTen,

unfortunately this will require javascript. :( 


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
 "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="language" content="english"> 
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">

<title>untitled document</title>

<style type="text/css">
body {
margin:0;
padding:0;
background-color:#fff;
}

#test {
width:319px;
margin:100px 0 0 300px;
}

#coming_soon {
display:block;
width:319px;
height:260px;
border:0;
} 
</style>

<script type="text/javascript">

function init(){
document.getElementsByTagName('area')[0].onmouseover=function(){
document.getElementById('coming_soon').src='[blue]images/coming_soon[/blue][red]_over[/red][blue].png[/blue]';
this.onmouseout=function() {
document.getElementById('coming_soon').src='[blue]images/coming_soon.png[/blue]';
}
}
}

if(window.addEventListener){
 window.addEventListener('load',init,false);
 }
else { 
if(window.attachEvent){
 window.attachEvent('onload',init);
 }
 }
</script>

</head>
<body>

<div id="test">
<img id="coming_soon" src="[blue]coming_soon.png[/blue]" alt="" usemap="#coming_soon_Map">
<map name="coming_soon_Map" id="coming_soon_Map">
<area shape="poly" coords="7,39,16,10,22,7,308,86,313,92,302,120,298,122,290,122,12,48,7,44" href="#" alt="">
</map>
</div> 

</body>
</html>


birdbrain

EcksTen

9:54 am on Jun 2, 2010 (gmt 0)

10+ Year Member



tedster - That's exactly it!

(To be entirely accurate, the image itself is an irregular polygon and the rest of the image is transparent)

birdbrain - Thank you for that, I will try it out and get back to you.

EcksTen

12:15 pm on Jun 7, 2010 (gmt 0)

10+ Year Member



Hi birdbrain.
Thank you for the code, it works!

Now my final query is:
Can this be adapted to use a single image so there is no rollover delay downloading the 2nd image?

Thank you

X10

birdbrain

1:38 pm on Jun 7, 2010 (gmt 0)



Hi there EcksTen,

Can this be adapted to use a single image so there is no rollover delay downloading the 2nd image?

Instead of a single image, I believe that pre-loading the "mouseover" image would provide the easier solution... 


<script type="text/javascript">

function init(){
document.getElementsByTagName('area')[0].onmouseover=function(){
document.getElementById('coming_soon').src='[red]images/coming_soon_over.png[/red]';
this.onmouseout=function() {
document.getElementById('coming_soon').src='images/coming_soon.png';
}
}
}

if(window.addEventListener){
window.addEventListener('load',init,false);
}
else {
if(window.attachEvent){
window.attachEvent('onload',init);
}
}
[blue]
 var preloads=[];

function preload(){
for(c=0;c<arguments.length;c++) {
 preloads[preloads.length]=new Image();

 preloads[preloads.length-1].src=arguments[c];
 }
 }

 preload('[red]images/coming_soon_over.png[/red]');
[/blue]
</script>

birdbrain
 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

  1. Home
  2. Forums Index
  3. Browser Side / HTML 10:36 am May 21, 2026