HELP! Coding issues

Discussion in 'HTML & Website Design' started by micadeann, Jan 26, 2012.

0
  1. #1
    I need a header graphic to automatically resize with the browers window and I need the image maps to resize along with it. Anyone have suggestions? I have pasted the codes for HTML and CSS below.

    Thanks,
    Mica

    HTML CODE

    <div style="text-align:center; width:4104px; margin-left:auto; margin-right:auto;">
    <img id="Image-Maps_3201201261104372" src="http://www.image-maps.com/uploaded_files/3201201261104372_1_libguidesfinal_map.jpg" usemap="#Image-Maps_3201201261104372" border="0" width="4104" height="417" alt="" />
    <map id="_Image-Maps_3201201261104372" name="Image-Maps_3201201261104372">
    <area shape="rect" coords="3961,108,4063,350" href="http://www.ecok.edu" alt="" title="" />
    <area shape="rect" coords="3602,92,3830,365" href="http://ecok.libguides.com/content.php?pid=267638&sid=2209064#7473362" alt="" title="" />
    <area shape="rect" coords="3373,90,3569,363" href="http://ecok.libguides.com/content.php?pid=267638&sid=2312329" alt="" title="" />
    <area shape="rect" coords="3058,92,3279,365" href="http://library.ecok.edu:2082/patroninfo" alt="" title="" />
    <area shape="rect" coords="2710,97,2966,370" href="http://ecok.libguides.com/suggestions" alt="" title="" />
    <area shape="rect" coords="0,36,2597,412" href="http://library.ecok.edu" alt="" title="" />
    <area shape="rect" coords="4102,415,4104,417" href="http://www.image-maps.com/index.php?aff=mapped_users_3201201261104372" alt="Image Map" title="Image Map" />
    </map>
    </div>

    CSS CODE


    <style type="text/css">
    dl.image_map {display:block; width:4104px; height:417px; background:url(http://www.image-maps.com/uploaded_files/3201201261104372_1_libguidesfinal_map.jpg); position:relative; margin:2px auto 2px auto;}
    a.LINK0 {left:3961px; top:108px; background:transparent;}
    a.LINK0 {display:block; width:102px; height:0; padding-top:242px; overflow:hidden; position:absolute;}
    a.LINK0:hover {background:transparent; border:1px dashed black; color:black;}
    a.LINK1 {left:3602px; top:92px; background:transparent;}
    a.LINK1 {display:block; width:228px; height:0; padding-top:273px; overflow:hidden; position:absolute;}
    a.LINK1:hover {background:transparent; border:1px dashed black; color:black;}
    a.LINK2 {left:3373px; top:90px; background:transparent;}
    a.LINK2 {display:block; width:196px; height:0; padding-top:273px; overflow:hidden; position:absolute;}
    a.LINK2:hover {background:transparent; border:1px dashed black; color:black;}
    a.LINK3 {left:3058px; top:92px; background:transparent;}
    a.LINK3 {display:block; width:221px; height:0; padding-top:273px; overflow:hidden; position:absolute;}
    a.LINK3:hover {background:transparent; border:1px dashed black; color:black;}
    a.LINK4 {left:2710px; top:97px; background:transparent;}
    a.LINK4 {display:block; width:256px; height:0; padding-top:273px; overflow:hidden; position:absolute;}
    a.LINK4:hover {background:transparent; border:1px dashed black; color:black;}
    a.LINK5 {left:0px; top:36px; background:transparent;}
    a.LINK5 {display:block; width:2597px; height:0; padding-top:376px; overflow:hidden; position:absolute;}
    a.LINK5:hover {background:transparent; border:1px dashed black; color:black;}
    </style>

    <dl class="image_map">
    <dd><a class="LINK0" title="" href="http://www.ecok.edu"></a></dd>
    <dd><a class="LINK1" title="" href="http://ecok.libguides.com/content.php?pid=267638&sid=2209064#7473362"></a></dd>
    <dd><a class="LINK2" title="" href="http://ecok.libguides.com/content.php?pid=267638&sid=2312329"></a></dd>
    <dd><a class="LINK3" title="" href="http://library.ecok.edu:2082/patroninfo"></a></dd>
    <dd><a class="LINK4" title="" href="http://ecok.libguides.com/suggestions"></a></dd>
    <dd><a class="LINK5" title="" href="http://library.ecok.edu"></a></dd>
    </dl>
     
    micadeann, Jan 26, 2012 IP