Roll over on Map Images?????? [Archive]

View Full Version : Roll over on Map Images??????

slava

02-27-2007, 02:30 PM

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.

<!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

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

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

<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

<!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

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

<!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

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 !

Blake

02-27-2007, 06:14 PM

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

Oops. Fixed it.

<!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 1000px;
background-repeat: no-repeat;
}

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

#bodybgmenu
{
position: relative;
}

</style>

<script type="text/javascript">

function lightup(d, x, y)
{
d.style.backgroundPosition = x + "px " + y + "px";
}

function turnoff(d)
{
d.style.backgroundPosition = '1000px 1000px';
}

</script>

</head>

<body>

<div id="bodybgmenu">

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

<a href="#">
<div id="link1" onmouseover="lightup(this, 5, 30)" onmouseout="turnoff(this)"></div>
</a>

<a href="#">
<div id="link2" onmouseover="lightup(this, 11, 22)" onmouseout="turnoff(this)"></div>
</a>

</div>

</body>
</html>

slava

02-27-2007, 08:45 PM

It works just i wished to work, thanks you helped me a lot!