By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
455,770 Members | 1,393 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 455,770 IT Pros & Developers. It's quick & easy.

area border

P: n/a
Hello

I'm trying find some solution but I even don't know if it's possible.
I have a map of some region and using the area I can enlarge it.
But I want to set the area border=1 when mouse is on and hide border
when is out. the user must know which region will be enlarge.

I know that it's possible when I'll divide my image to smallest, or if
I use flash but I want to make it in html, css or java. Mayby it's
possible using layers ?? Have you any idea ??

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

<img border="0" src="Photo/MainMap.jpg" alt="" usemap="#Norway">
<map name="Norway">
<area shape="rect" coords="37, 25, 85, 82" href="MainM1.htm"
alt="powieksz region" onmouseover=???????? onmouseout=?????????>
</map>

Regards
Mudas
Jul 23 '05 #1
Share this Question
Share on Google+
1 Reply


P: n/a
bne
Hi Mudas,
...I want to make it in html, css or java.


Before some other pedant gets in there first: javascript is not java
<http://jibbering.com/faq/#FAQ2_2>

You're probably best ditching the image map idea and going for a pure
DHTML solution:

<div style="position:relative;top:0px;left:0px;">
<img border="0" src="Photo/MainMap.jpg"
style="position:absolute;top:0px;left:0px;">
<div id="Norway"
style="position:absolute;left:37px;top:25px;width: 48px;height:57px;"
onmouseover="show('Norway');"
onmouseout="hide('Norway');"><a href="MainM1.htm"><img
src="nothing.gif" border="0" style="width:48px;height:57px;"
/></a></div>
</div>

<script type="text/javascript">

function show(id)
{
var el = document.getElementById(id);
el.style.borderWidth = '1px';
el.style.borderColor = '#000';
el.style.borderStyle = 'solid';
}

function hide(id)
{
var el = document.getElementById(id);
el.style.borderWidth = '0px';
}

</script>

nothing.gif is a transparent filler image.

obviously this only allows for rectangles - setting the visibility of a
transparent gif that's in the outline of the shape might be another way
round it of course.

ben

Jul 23 '05 #2

This discussion thread is closed

Replies have been disabled for this discussion.