area border

Collapse
This topic is closed.
X
X
Collapse
 
  • Page of 1
  • Time
  • Show
Clear All
new posts
Previous template Next
  • Mudas
    #1

    area border

    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.ht m"
    alt="powieksz region" onmouseover=??? ????? onmouseout=???? ?????>
    </map>

    Regards
    Mudas
    Tags: None
    • bne
      #2
      Re: area border

      Hi Mudas,
      [color=blue]
      > ...I want to make it in html, css or java.[/color]

      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:0 px;left:0px;">
      <img border="0" src="Photo/MainMap.jpg"
      style="position :absolute;top:0 px;left:0px;">
      <div id="Norway"
      style="position :absolute;left: 37px;top:25px;w idth:48px;heigh t:57px;"
      onmouseover="sh ow('Norway');"
      onmouseout="hid e('Norway');">< a href="MainM1.ht m"><img
      src="nothing.gi f" border="0" style="width:48 px;height:57px; "
      /></a></div>
      </div>

      <script type="text/javascript">

      function show(id)
      {
      var el = document.getEle mentById(id);
      el.style.border Width = '1px';
      el.style.border Color = '#000';
      el.style.border Style = 'solid';
      }

      function hide(id)
      {
      var el = document.getEle mentById(id);
      el.style.border Width = '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

        Comment

        Previous template Next
        Working...