homepage Welcome to WebmasterWorld Guest from 54.224.179.98
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Pubcon Platinum Sponsor 2014
Home / Forums Index / Code, Content, and Presentation / HTML
Forum Library, Charter, Moderators: incrediBILL

HTML Forum

    
use image map and change image on hover?
image map hover background image
EcksTen




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

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




msg:4142380
 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




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

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




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

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




msg:4143510
 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




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

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




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

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




msg:4148130
 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

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / HTML
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved