Welcome to WebmasterWorld Guest from 54.211.101.8

Forum Moderators: incrediBILL

use image map and change image on hover?

image map hover background image

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

5+ 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]

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]

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

5+ 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?
4:57 am on May 29, 2010 (gmt 0)

WebmasterWorld Senior Member tedster is a WebmasterWorld Top Contributor of All Time 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?
11:03 am on May 29, 2010 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



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
9:54 am on Jun 2, 2010 (gmt 0)

5+ 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.
12:15 pm on Jun 7, 2010 (gmt 0)

5+ 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
1:38 pm on Jun 7, 2010 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



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
 

Featured Threads

My Threads

Hot Threads This Week

Hot Threads This Month