Roll over on Map Images??????

**slava** · 02-27-2007, 02:30 PM

hi guys,

i have problem in here, and dont know how to solve it. well, i've created a map image, (you can see it at: http://tintasii.moldovacrestina.net/something.html) but i would like to add to the link a RollOver, or something that would distinguish links from the rest of the image!

Is there any way to make it?
here is the code i used for the map

Code:

<img id="meciuri" src="media/ball-menu.jpg" usemap="#ball-menu">
<map name="ball-menu">
<area shape="rect" coords="265,475,365,525" href="index.htm" alt="cerc">	
</map>

Thank you guys for your help!

**Blake** · 02-27-2007, 03:38 PM

I've tried playing around with it a bit. The only solution I can come up with is to eliminate the map entirely and use divs.

Code:

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Tintasii Menu</title>
<style type="text/css">


#meciuri a:hover {
	background: red url(media/hover-meciuri.gif)
	background-repeat: no-repeat;
}

#link1
{
	position: absolute;
	top: 442px;
	left: 257px;
	width: 128px;
	height: 128px;
	background-image: url("rollover1.gif");
	background-position: 1000px 32px;
	background-repeat: no-repeat;
}

#bodybgmenu
{
	position: relative;
}

</style>

</head>

<body>

<div id="bodybgmenu">

<img id="meciuri" src="http://tintasii.moldovacrestina.net/media/ball-menu.jpg" usemap="#ball-menu">

<a href="#">
<div id="link1" onmouseover="this.style.backgroundPosition='7px 32px;'" onmouseout="this.style.backgroundPosition='1000px 32px;'"></div>
</a>

</div>

</body>
</html>

Here's a working example:

http://www.blake-foster.com/demo/something.html

**jscheuer1** · 02-27-2007, 03:59 PM

Originally Posted by slava

hi guys,

i have problem in here, and dont know how to solve it. well, i've created a map image, (you can see it at: http://tintasii.moldovacrestina.net/something.html) but i would like to add to the link a RollOver, or something that would distinguish links from the rest of the image!

Is there any way to make it?
here is the code i used for the map

Code:

<img id="meciuri" src="media/ball-menu.jpg" usemap="#ball-menu">
<map name="ball-menu">
<area shape="rect" coords="265,475,365,525" href="index.htm" alt="cerc">	
</map>

Thank you guys for your help!

The simplest (and the only HTML) rollover is the title attribute, ex:

Code:

<img id="meciuri" src="media/ball-menu.jpg" usemap="#ball-menu">
<map name="ball-menu">
<area shape="rect" title="Home" coords="265,475,365,525" href="index.htm" alt="cerc">	
</map>

If you wish to use javascript, you can but a method must be devised to add the top coord + half the height of the shape to the top position of the image and the left coord + half the width of the shape to the left position of the image. If you do that (not too hard) then you can locate a javascript tool tip over the hot spot. If you want a rollover image, you can leave out the half dimensions.

But, this being the HTML forum, I will leave the details to another time and/or place.

**slava** · 02-27-2007, 05:26 PM

Thanks for help,
it sounds interesting with JavaScript,
but what if i have more buttons like this on the same pic?

**Blake** · 02-27-2007, 05:37 PM

Code:

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Tintasii Menu</title>
<style type="text/css">


#meciuri a:hover {
	background: red url(media/hover-meciuri.gif)
	background-repeat: no-repeat;
}

#link1
{
	position: absolute;
	top: 442px;
	left: 257px;
	width: 128px;
	height: 128px;
	background-image: url("rollover1.gif");
	background-position: 1000px 32px;
	background-repeat: no-repeat;
}

#link2
{
	position: absolute;
	top: 410px;
	left:455px;
	width: 96px;
	height: 128px;
	background-image: url("rollover2.gif");
	background-position: 1000px 24px;
	background-repeat: no-repeat;
}

#bodybgmenu
{
	position: relative;
}

</style>

</head>

<body>

<div id="bodybgmenu">

<img id="meciuri" src="http://tintasii.moldovacrestina.net/media/ball-menu.jpg" usemap="#ball-menu">

<a href="#">
<div id="link1" onmouseover="this.style.backgroundPosition='7px 32px;'" onmouseout="this.style.backgroundPosition='1000px 32px;'"></div>
</a>

<a href="#">
<div id="link2" onmouseover="this.style.backgroundPosition='13px 24px;'" onmouseout="this.style.backgroundPosition='1000px 24px;'"></div>
</a>

</div>

</body>
</html>

I've updated the working example too.

**jscheuer1** · 02-27-2007, 05:38 PM

Originally Posted by slava

what if i have more buttons like this on the same pic?

Like what? I haven't even seen one button yet. If you mean more areas - then, each area may have its own title attribute.

**slava** · 02-27-2007, 05:40 PM

#Blake

Hey man, thanks, it works perfect and i like it, but it seams like the hole image is a link. is it posible to fix this?
thanks

**Blake** · 02-27-2007, 05:42 PM

Code:

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Tintasii Menu</title>
<style type="text/css">

#meciuri
{
	position: absolute;
	top: 0px;
	left: 0px;
}

#link1
{
	position: absolute;
	top: 442px;
	left: 257px;
	width: 128px;
	height: 128px;
	background-image: url("rollover1.gif");
	background-position: 1000px 30px;
	background-repeat: no-repeat;
}

#link2
{
	position: absolute;
	top: 410px;
	left:455px;
	width: 96px;
	height: 128px;
	background-image: url("rollover2.gif");
	background-position: 1000px 22px;
	background-repeat: no-repeat;
}

#bodybgmenu
{
	position: relative;
}

</style>

</head>

<body>

<div id="bodybgmenu">

<img id="meciuri" src="http://tintasii.moldovacrestina.net/media/ball-menu.jpg"/>

<a href="#">
<div id="link1" onmouseover="this.style.backgroundPosition='5px 30px;'" onmouseout="this.style.backgroundPosition='1000px 30px;'"></div>
</a>

<a href="#">
<div id="link2" onmouseover="this.style.backgroundPosition='11px 22px;'" onmouseout="this.style.backgroundPosition='1000px 22px;'"></div>
</a>

</div>

</body>
</html>

**jscheuer1** · 02-27-2007, 05:43 PM

Originally Posted by Blake

Here's a working example:

http://www.blake-foster.com/demo/something.html

Doesn't work in Opera, throws errors in IE 7. OK in FF.

**slava** · 02-27-2007, 05:44 PM

#jscheuer1

ok, i'm still working on it, so i'll be adding more areas for the buttons, i just dont know which way is better, and if you could give an advise on this, that would be good.

Thanks !

Thread: Roll over on Map Images??????

Thread Tools

Search Thread

Roll over on Map Images??????

Re:

Bookmarks

Bookmarks

Posting Permissions