Buying converting areamap to <dt> and <dl>

Discussion in 'Design' started by AniMud, Sep 12, 2010.

  1. #1
    i'v been trying to use image-maps.com, but i guess my laptop just ends up dying.

    I'm looking for the following code to be changed to <dt> and <dl> tags that image-maps.com gives you.

    Please reply with a quote.

    heres the current code:


    
         <div align="left">
            <label>
            Jump to:
              <input class='textbox' type="text" id="x" size="2" value="7">
            </label>
            <input class='textbox' type="text" id="y" size="2" value="11">
            <label>
            <input class='button' type="button" onClick="map()" value="Go">
            </label></br>
    
    								<label id='xmenu'>-</label>
         <div style='position:relative;top:30px;left:0px;'>
           <div style='position:absolute;left:240px;top:0px;width:50px;'>14</div>
           <div style='position:absolute;left:200px;top:20px;width:50px;'>13</div>
           <div style='position:absolute;left:160px;top:40px;width:50px;'>12</div>
           <div style='position:absolute;left:120px;top:60px;width:50px;'>11</div>
    
           <div style='position:absolute;left:80px;top:80px;width:50px;'>10</div>
           <div style='position:absolute;left:40px;top:100px;width:50px;'>9</div>
           <div style='position:absolute;left:0px;top:120px;width:50px;'>8</div>
    
            <div style='position:absolute;left:0px;top:160px;width:50px;'>4</div>
    
            <div style='position:absolute;left:40px;top:180px;width:50px;'>5</div>
    
            <div style='position:absolute;left:80px;top:200px;width:50px;'>6</div>
    
            <div style='position:absolute;left:120px;top:220px;width:50px;'>7</div>
    
            <div style='position:absolute;left:160px;top:240px;width:50px;'>8</div>
    
            <div style='position:absolute;left:200px;top:260px;width:50px;'>9</div>
    
            <div style='position:absolute;left:240px;top:280px;width:50px;'>10</div>
         </div>
           <div style="position:relative; top:0; left:20;">
            <img style='position:absolute;left:240px;top:0px;width:80px;height:80px;' src='http://www.devana.eu/default/map/env_03.gif'>
            <img style='position:absolute;left:280px;top:20px;width:80px;height:80px;' src='http://www.devana.eu/default/map/env_02.gif'>
            <img style='position:absolute;left:320px;top:40px;width:80px;height:80px;' src='http://www.devana.eu/default/map/env_16.gif'>
            <img style='position:absolute;left:360px;top:60px;width:80px;height:80px;' src='http://www.devana.eu/default/map/env_16.gif'>
            <img style='position:absolute;left:400px;top:80px;width:80px;height:80px;' src='http://www.devana.eu/default/map/env_16.gif'>
    
            <img style='position:absolute;left:440px;top:100px;width:80px;height:80px;' src='http://www.devana.eu/default/map/env_31.gif'>
            <img style='position:absolute;left:480px;top:120px;width:80px;height:80px;' src='http://www.devana.eu/default/map/env_31.gif'>
            <img style='position:absolute;left:200px;top:20px;width:80px;height:80px;' src='http://www.devana.eu/default/map/env_04.gif'>
            <img style='position:absolute;left:240px;top:40px;width:80px;height:80px;' src='http://www.devana.eu/default/map/env_01.gif'>
            <img style='position:absolute;left:280px;top:60px;width:80px;height:80px;' src='http://www.devana.eu/default/map/env_16.gif'>
            <img style='position:absolute;left:320px;top:80px;width:80px;height:80px;' src='http://www.devana.eu/default/map/env_16.gif'>
            <img style='position:absolute;left:360px;top:100px;width:80px;height:80px;' src='http://www.devana.eu/default/map/env_16.gif'>
            <img style='position:absolute;left:400px;top:120px;width:80px;height:80px;' src='http://www.devana.eu/default/map/env_16.gif'>
    
            <img style='position:absolute;left:440px;top:140px;width:80px;height:80px;' src='http://www.devana.eu/default/map/env_16.gif'>
    
            <img style='position:absolute;left:160px;top:40px;width:80px;height:80px;' src='http://www.devana.eu/default/map/env_01.gif'>
            <img style='position:absolute;left:200px;top:60px;width:80px;height:80px;' src='http://www.devana.eu/default/map/env_02.gif'>
            <img style='position:absolute;left:240px;top:80px;width:80px;height:80px;' src='http://www.devana.eu/default/map/env_16.gif'>
            <img style='position:absolute;left:280px;top:100px;width:80px;height:80px;' src='http://www.devana.eu/default/map/env_16.gif'>
            <img style='position:absolute;left:320px;top:120px;width:80px;height:80px;' src='http://www.devana.eu/default/map/env_16.gif'>
            <img style='position:absolute;left:360px;top:140px;width:80px;height:80px;' src='http://www.devana.eu/default/map/env_16.gif'>
            <img style='position:absolute;left:400px;top:160px;width:80px;height:80px;' src='http://www.devana.eu/default/map/env_31.gif'>
    
            <img style='position:absolute;left:120px;top:60px;width:80px;height:80px;' src='http://www.devana.eu/default/map/env_04.gif'>
            <img style='position:absolute;left:160px;top:80px;width:80px;height:80px;' src='http://www.devana.eu/default/map/env_02.gif'>
    
            <img style='position:absolute;left:200px;top:100px;width:80px;height:80px;' src='http://www.devana.eu/default/map/env_04.gif'>
            <img style='position:absolute;left:240px;top:120px;width:80px;height:80px;' src='http://www.devana.eu/default/map/env_31.gif'>
            <img style='position:absolute;left:280px;top:140px;width:80px;height:80px;' src='http://www.devana.eu/default/map/env_31.gif'>
            <img style='position:absolute;left:320px;top:160px;width:80px;height:80px;' src='http://www.devana.eu/default/map/env_16.gif'>
            <img style='position:absolute;left:360px;top:180px;width:80px;height:80px;' src='http://www.devana.eu/default/map/env_16.gif'>
            <img style='position:absolute;left:80px;top:80px;width:80px;height:80px;' src='http://www.devana.eu/default/map/env_16.gif'>
    
            <img style='position:absolute;left:120px;top:100px;width:80px;height:80px;' src='http://www.devana.eu/default/map/env_16.gif'>
            <img style='position:absolute;left:160px;top:120px;width:80px;height:80px;' src='http://www.devana.eu/default/map/env_16.gif'>
            <img style='position:absolute;left:200px;top:140px;width:80px;height:80px;' src='http://www.devana.eu/default/map/env_31.gif'>
    
            <img style='position:absolute;left:240px;top:160px;width:80px;height:80px;' src='http://www.devana.eu/default/map/env_16.gif'>
            <img style='position:absolute;left:280px;top:180px;width:80px;height:80px;' src='http://www.devana.eu/default/map/env_16.gif'>
            <img style='position:absolute;left:320px;top:200px;width:80px;height:80px;' src='http://www.devana.eu/default/map/env_31.gif'>
            <img style='position:absolute;left:40px;top:100px;width:80px;height:80px;' src='http://www.devana.eu/default/map/env_16.gif'>
            <img style='position:absolute;left:80px;top:120px;width:80px;height:80px;' src='http://www.devana.eu/default/map/env_16.gif'>
    
            <img style='position:absolute;left:120px;top:140px;width:80px;height:80px;' src='http://www.devana.eu/default/map/env_31.gif'>
            <img style='position:absolute;left:160px;top:160px;width:80px;height:80px;' src='http://www.devana.eu/default/map/env_16.gif'>
            <img style='position:absolute;left:200px;top:180px;width:80px;height:80px;' src='http://www.devana.eu/default/map/env_16.gif'>
            <img style='position:absolute;left:240px;top:200px;width:80px;height:80px;' src='http://www.devana.eu/default/map/env_16.gif'>
    
            <img style='position:absolute;left:280px;top:220px;width:80px;height:80px;' src='http://www.devana.eu/default/map/env_16.gif'>
            <img style='position:absolute;left:0px;top:120px;width:80px;height:80px;' src='http://www.devana.eu/default/map/env_02.gif'>
            <img style='position:absolute;left:40px;top:140px;width:80px;height:80px;' src='http://www.devana.eu/default/map/env_16.gif'>
            <img style='position:absolute;left:80px;top:160px;width:80px;height:80px;' src='http://www.devana.eu/default/map/env_16.gif'>
    
            <img style='position:absolute;left:120px;top:180px;width:80px;height:80px;' src='http://www.devana.eu/default/map/env_16.gif'>
            <img style='position:absolute;left:160px;top:200px;width:80px;height:80px;' src='http://www.devana.eu/default/map/env_16.gif'>
            <img style='position:absolute;left:200px;top:220px;width:80px;height:80px;' src='http://www.devana.eu/default/map/env_16.gif'>
            <img style='position:absolute;left:240px;top:240px;width:80px;height:80px;' src='http://www.devana.eu/default/map/env_31.gif'>
            <img src="http://www.devana.eu/default/map/map_back.gif" border="0" usemap="#Map" style='position:absolute;left:0px;top:41px;width:560px;height:280px;'>
    
            <map name="Map" id="Map">
              <area shape="poly" coords='280,0,320,20,280,40,240,20' href="javascript: template('map_.php', 'x=4&y=14')" onMouseOver="desc('Water', '-', '-', '-')" onMouseOut="desc('Description', '', '', '')">
              <area shape="poly" coords='320,20,360,40,320,60,280,40' href="javascript: template('map_.php', 'x=5&y=14')" onMouseOver="desc('Water', '-', '-', '-')" onMouseOut="desc('Description', '', '', '')">
    
              <area shape="poly" coords='360,40,400,60,360,80,320,60' href="javascript: template('map_.php', 'x=6&y=14')" onMouseOver="desc('Land', '-', '-', '-')" onMouseOut="desc('Description', '', '', '')">
              <area shape="poly" coords='400,60,440,80,400,100,360,80' href="javascript: template('map_.php', 'x=7&y=14')" onMouseOver="desc('Land', '-', '-', '-')" onMouseOut="desc('Description', '', '', '')">
              <area shape="poly" coords='440,80,480,100,440,120,400,100' href="javascript: template('map_.php', 'x=8&y=14')" onMouseOver="desc('Land', '-', '-', '-')" onMouseOut="desc('Description', '', '', '')">
              <area shape="poly" coords='480,100,520,120,480,140,440,120' href="javascript: xmenu(987, 753, 0)" onMouseOver="desc('Atena', 'tuhim25', '2', '')" onMouseOut="desc('Description', '', '', '')">
              <area shape="poly" coords='520,120,560,140,520,160,480,140' href="javascript: xmenu(979, 748, 0)" onMouseOver="desc('rifai', 'rifai', '2', '')" onMouseOut="desc('Description', '', '', '')">
              <area shape="poly" coords='240,20,280,40,240,60,200,40' href="javascript: template('map_.php', 'x=4&y=13')" onMouseOver="desc('Water', '-', '-', '-')" onMouseOut="desc('Description', '', '', '')">
    
              <area shape="poly" coords='280,40,320,60,280,80,240,60' href="javascript: template('map_.php', 'x=5&y=13')" onMouseOver="desc('Water', '-', '-', '-')" onMouseOut="desc('Description', '', '', '')">
              <area shape="poly" coords='320,60,360,80,320,100,280,80' href="javascript: template('map_.php', 'x=6&y=13')" onMouseOver="desc('Land', '-', '-', '-')" onMouseOut="desc('Description', '', '', '')">
    
              <area shape="poly" coords='360,80,400,100,360,120,320,100' href="javascript: template('map_.php', 'x=7&y=13')" onMouseOver="desc('Land', '-', '-', '-')" onMouseOut="desc('Description', '', '', '')">
              <area shape="poly" coords='400,100,440,120,400,140,360,120' href="javascript: template('map_.php', 'x=8&y=13')" onMouseOver="desc('Land', '-', '-', '-')" onMouseOut="desc('Description', '', '', '')">
              <area shape="poly" coords='440,120,480,140,440,160,400,140' href="javascript: template('map_.php', 'x=9&y=13')" onMouseOver="desc('Land', '-', '-', '-')" onMouseOut="desc('Description', '', '', '')">
              <area shape="poly" coords='480,140,520,160,480,180,440,160' href="javascript: template('map_.php', 'x=10&y=13')" onMouseOver="desc('Land', '-', '-', '-')" onMouseOut="desc('Description', '', '', '')">
              <area shape="poly" coords='200,40,240,60,200,80,160,60' href="javascript: template('map_.php', 'x=4&y=12')" onMouseOver="desc('Water', '-', '-', '-')" onMouseOut="desc('Description', '', '', '')">
              <area shape="poly" coords='240,60,280,80,240,100,200,80' href="javascript: template('map_.php', 'x=5&y=12')" onMouseOver="desc('Water', '-', '-', '-')" onMouseOut="desc('Description', '', '', '')">
              <area shape="poly" coords='280,80,320,100,280,120,240,100' href="javascript: template('map_.php', 'x=6&y=12')" onMouseOver="desc('Land', '-', '-', '-')" onMouseOut="desc('Description', '', '', '')">
    
              <area shape="poly" coords='320,100,360,120,320,140,280,120' href="javascript: template('map_.php', 'x=7&y=12')" onMouseOver="desc('Land', '-', '-', '-')" onMouseOut="desc('Description', '', '', '')">
    
              <area shape="poly" coords='360,120,400,140,360,160,320,140' href="javascript: template('map_.php', 'x=8&y=12')" onMouseOver="desc('Land', '-', '-', '-')" onMouseOut="desc('Description', '', '', '')">
              <area shape="poly" coords='400,140,440,160,400,180,360,160' href="javascript: template('map_.php', 'x=9&y=12')" onMouseOver="desc('Land', '-', '-', '-')" onMouseOut="desc('Description', '', '', '')">
              <area shape="poly" coords='440,160,480,180,440,200,400,180' href="javascript: xmenu(896, 680, 0)" onMouseOver="desc('town_of_milman', 'milman', '80', '')" onMouseOut="desc('Description', '', '', '')">
              <area shape="poly" coords='160,60,200,80,160,100,120,80' href="javascript: template('map_.php', 'x=4&y=11')" onMouseOver="desc('Water', '-', '-', '-')" onMouseOut="desc('Description', '', '', '')">
              <area shape="poly" coords='200,80,240,100,200,120,160,100' href="javascript: template('map_.php', 'x=5&y=11')" onMouseOver="desc('Water', '-', '-', '-')" onMouseOut="desc('Description', '', '', '')">
              <area shape="poly" coords='240,100,280,120,240,140,200,120' href="javascript: template('map_.php', 'x=6&y=11')" onMouseOver="desc('Water', '-', '-', '-')" onMouseOut="desc('Description', '', '', '')">
              <area shape="poly" coords='280,120,320,140,280,160,240,140' href="javascript: xmenu(1105, 847, 0)" onMouseOver="desc('town_of_mihai242', 'mihai242', '9', '')" onMouseOut="desc('Description', '', '', '')">
              <area shape="poly" coords='320,140,360,160,320,180,280,160' href="javascript: xmenu(873, 668, 0)" onMouseOver="desc('town_of_asd123w', 'asd123w', '2', '')" onMouseOut="desc('Description', '', '', '')">
    
              <area shape="poly" coords='360,160,400,180,360,200,320,180' href="javascript: template('map_.php', 'x=9&y=11')" onMouseOver="desc('Land', '-', '-', '-')" onMouseOut="desc('Description', '', '', '')">
              <area shape="poly" coords='400,180,440,200,400,220,360,200' href="javascript: template('map_.php', 'x=10&y=11')" onMouseOver="desc('Land', '-', '-', '-')" onMouseOut="desc('Description', '', '', '')">
              <area shape="poly" coords='120,80,160,100,120,120,80,100' href="javascript: template('map_.php', 'x=4&y=10')" onMouseOver="desc('Land', '-', '-', '-')" onMouseOut="desc('Description', '', '', '')">
              <area shape="poly" coords='160,100,200,120,160,140,120,120' href="javascript: template('map_.php', 'x=5&y=10')" onMouseOver="desc('Land', '-', '-', '-')" onMouseOut="desc('Description', '', '', '')">
              <area shape="poly" coords='200,120,240,140,200,160,160,140' href="javascript: template('map_.php', 'x=6&y=10')" onMouseOver="desc('Land', '-', '-', '-')" onMouseOut="desc('Description', '', '', '')">
              <area shape="poly" coords='240,140,280,160,240,180,200,160' href="javascript: xmenu(953, 725, 0)" onMouseOver="desc('town_of_samirkadiric', 'samirkadiric', '9', '')" onMouseOut="desc('Description', '', '', '')">
              <area shape="poly" coords='280,160,320,180,280,200,240,180' href="javascript: template('map_.php', 'x=8&y=10')" onMouseOver="desc('Land', '-', '-', '-')" onMouseOut="desc('Description', '', '', '')">
              <area shape="poly" coords='320,180,360,200,320,220,280,200' href="javascript: template('map_.php', 'x=9&y=10')" onMouseOver="desc('Land', '-', '-', '-')" onMouseOut="desc('Description', '', '', '')">
              <area shape="poly" coords='360,200,400,220,360,240,320,220' href="javascript: xmenu(1068, 818, 0)" onMouseOver="desc('Ricciopoli', 'Riccio', '5', '')" onMouseOut="desc('Description', '', '', '')">
    
              <area shape="poly" coords='80,100,120,120,80,140,40,120' href="javascript: template('map_.php', 'x=4&y=9')" onMouseOver="desc('Land', '-', '-', '-')" onMouseOut="desc('Description', '', '', '')">
              <area shape="poly" coords='120,120,160,140,120,160,80,140' href="javascript: template('map_.php', 'x=5&y=9')" onMouseOver="desc('Land', '-', '-', '-')" onMouseOut="desc('Description', '', '', '')">
              <area shape="poly" coords='160,140,200,160,160,180,120,160' href="javascript: xmenu(1027, 788, 0)" onMouseOver="desc('town_of_kikilim', 'kikilim', '9', '')" onMouseOut="desc('Description', '', '', '')">
              <area shape="poly" coords='200,160,240,180,200,200,160,180' href="javascript: template('map_.php', 'x=7&y=9')" onMouseOver="desc('Land', '-', '-', '-')" onMouseOut="desc('Description', '', '', '')">
              <area shape="poly" coords='240,180,280,200,240,220,200,200' href="javascript: template('map_.php', 'x=8&y=9')" onMouseOver="desc('Land', '-', '-', '-')" onMouseOut="desc('Description', '', '', '')">
              <area shape="poly" coords='280,200,320,220,280,240,240,220' href="javascript: template('map_.php', 'x=9&y=9')" onMouseOver="desc('Land', '-', '-', '-')" onMouseOut="desc('Description', '', '', '')">
              <area shape="poly" coords='320,220,360,240,320,260,280,240' href="javascript: template('map_.php', 'x=10&y=9')" onMouseOver="desc('Land', '-', '-', '-')" onMouseOut="desc('Description', '', '', '')">
              <area shape="poly" coords='40,120,80,140,40,160,0,140' href="javascript: template('map_.php', 'x=4&y=8')" onMouseOver="desc('Water', '-', '-', '-')" onMouseOut="desc('Description', '', '', '')">
    
              <area shape="poly" coords='80,140,120,160,80,180,40,160' href="javascript: template('map_.php', 'x=5&y=8')" onMouseOver="desc('Land', '-', '-', '-')" onMouseOut="desc('Description', '', '', '')">
    
              <area shape="poly" coords='120,160,160,180,120,200,80,180' href="javascript: template('map_.php', 'x=6&y=8')" onMouseOver="desc('Land', '-', '-', '-')" onMouseOut="desc('Description', '', '', '')">
              <area shape="poly" coords='160,180,200,200,160,220,120,200' href="javascript: template('map_.php', 'x=7&y=8')" onMouseOver="desc('Land', '-', '-', '-')" onMouseOut="desc('Description', '', '', '')">
              <area shape="poly" coords='200,200,240,220,200,240,160,220' href="javascript: template('map_.php', 'x=8&y=8')" onMouseOver="desc('Land', '-', '-', '-')" onMouseOut="desc('Description', '', '', '')">
              <area shape="poly" coords='240,220,280,240,240,260,200,240' href="javascript: template('map_.php', 'x=9&y=8')" onMouseOver="desc('Land', '-', '-', '-')" onMouseOut="desc('Description', '', '', '')">
              <area shape="poly" coords='280,240,320,260,280,280,240,260' href="javascript: xmenu(1079, 828, 0)" onMouseOver="desc('B001', 'BlackSlug', '8', '')" onMouseOut="desc('Description', '', '', '')">
    
              <area shape="circle" coords='482,38,15' href="javascript: template('map_.php', 'x=7&y=12')" title="">
              <area shape="circle" coords='77,241,15' href="javascript: template('map_.php', 'x=7&y=10')" title="">
    
              <area shape="circle" coords='482,241,15' href="javascript: template('map_.php', 'x=8&y=11')" title="">
    
              <area shape="circle" coords='77,38,15' href="javascript: template('map_.php', 'x=6&y=11')" title="">
            </map>
            </div>
          <div id="descriptor" style="position:relative; top:-25; left:370;">
              <table class="q_table_desc" style="border-collapse: collapse" width="250" border="1">
                <tr>
                  <td colspan="2" align="center">Description            </tr>
    
                <tr>
    
                  <td width="117" align="center">Player<td></td>
                </tr>
                <tr>
                  <td width="117" align="center">Population<td></td>
                </tr>
                <tr>
    
                  <td width="117" align="center">Alliance<td></td>
    
                </tr>
              </table>
          </div>
    
    Code (markup):
     
    AniMud, Sep 12, 2010 IP