mouseover layer

Discussion in 'HTML & Website Design' started by tomcromp, Feb 23, 2005.

  1. #1
    Ok, so i make a layer...

    HTML Code:
    <div id="online" style="position:absolute; width:91px; height:116px; z-index:1; left: 174px; top: 106px; visibility: hidden;">just a quick test</div>

    and i make a map

    HTML Code:
    <map name="Map"> <area shape="rect" coords="61,68,154,106" href="#" onmouseover=""> </map>


    now what will make layer "online" visible on mouse over?

    Cheers
    Tom
     
    tomcromp, Feb 23, 2005 IP
  2. J.D.

    J.D. Peon

    Messages:
    1,198
    Likes Received:
    65
    Best Answers:
    0
    Trophy Points:
    0
    #2
    This is something that will only work in FF and Opera - IE treats area as a non-visual element and just displays a couple of color bars at the top of the page.

    <div id="online" style="border: 1px solid #EEE; padding: 1px; position: absolute; width: 100px; height: 100px; left: 100px; top: 100px;">just a quick test</div>
    
    <map name="map1">
    <area shape="rect" style="display: block; position:absolute; left: 101px; top: 101px; height: 50px; width: 50px; border: 1px solid green;" coords="0,0,49,49" href="#" onmouseover="style.borderColor ='red'" onmouseout="style.borderColor ='green'"> 
    <area shape="rect" style="display: block; position:absolute; left: 151px; top: 151px; height: 50px; width: 50px; border: 1px solid blue;" coords="50,50,99,99" href="#" onmouseover="style.borderColor ='red'" onmouseout="style.borderColor ='blue'"> 
    </map>
    Code (markup):
    In general, maps are supposed to be used only with <img>, <object> and <input> tags.

    J.D.
     
    J.D., Feb 23, 2005 IP