Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3

Thread: Image map help?

  1. #1
    Regular Coder
    Join Date
    Oct 2010
    Location
    Florence, MS
    Posts
    484
    Thanks
    10
    Thanked 33 Times in 32 Posts

    Image map help?

    So, I decided to do a page using CSS and I needed the use of an image map. Well, I created on, or so I think, but it is not working.

    Code:
    <!DOCTYPE html
    PUBLIC "-//W3C//DTD XHTML 1.0 TRANSITIONAL//EN"
    "http://www.w3.org/TR/xhtmll/DTD/xhtmll-transitional.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Cyrus</title>
    <style type="text/css">
    #container {
        width: 900px;
        color: white;
        }
        
    #header {
        width: 900px;
        height: 160px;
        background-image: url(http://i732.photobucket.com/albums/ww329/Chrishick/pageheadername-1.png);
        }
    #leftnav {
        float: left;
        width: 200px;
        height: 400px;
        position:relative;
        background-image: url(http://i732.photobucket.com/albums/ww329/Chrishick/leftnav.png);
        }
    #body {
    width: 900px;
    height: 400px;
    background-color: black;
    }
    
    div#photo {     
    
    width: 200px;      
    
    height: 400px;     
    
    position: relative;       
    
    background-image: url(images/fruity_cones.jpg);    
    
    background-repeat: no-repeat;
    
     } 
    
    div#photo ul {   
    
    margin: 0;   
    
    padding: 0;   
    
    list-style: none;
    
     } 
    
    #photo a {   
    
    position: absolute;       
    
    width: 190px;       
    
    height: 42px;      
    
    text-indent: -1000em; 
    }
    div#photo .forum a {  
    
    top: 36px;   
    
    left: 7px; }
    
    
    #footer {
    clear: both;
    background-color: black;
    width: 900px;
    }
    
        
    </style>
    
    </head>
    
    <body bgcolor="black">
    <div align="center">
    <div id="container">
    <div id="header"></div>
    <div id="leftnav"></div>
    <div id="body">
    <div align="right"><img src="http://i732.photobucket.com/albums/ww329/Chrishick/appearance-2.png"></div></div>
    <div id="photo"> <ul>
    
    <li class="forum"><a href="http://www.roleplayandwritinghaven.com/forum.htm" title="R&W Haven Forum">R&W Haven Forum</a></li> 
    
    </ul> 
    
    </div> 
    
    
    <div id="footer">This page is brought to you by Roleplay and Writing Haven.</div>
    </div>
    </body>
    
    
    </html>
    ^this is the code. What am I doing wrong??

  • #2
    New Coder
    Join Date
    Nov 2006
    Location
    Bristol, UK
    Posts
    85
    Thanks
    6
    Thanked 6 Times in 6 Posts
    There is no code for an image map in there. Is that what you really mean? An image map is links on certain parts of an image...
    Never argue with an idiot... they'll bring you down to their level and beat you with experience...

  • #3
    Senior Coder coothead's Avatar
    Join Date
    Jan 2004
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    1,680
    Thanks
    0
    Thanked 230 Times in 225 Posts
    Hi there Chris Hick,

    try it like this...
    Code:
    
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en">
    <head>
    
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <meta name="language" content="english"> 
    <meta http-equiv="Content-Style-Type" content="text/css">
    
    <title>Cyrus</title>
    
    <style type="text/css">
    body {
        background-color:#000;
     }
    #container {
        width:900px;
        margin:auto;
        color:#fff;
     }
    #header {
        height:160px;
        background-image:url(http://i732.photobucket.com/albums/ww329/Chrishick/pageheadername-1.png);
     }
    #leftnav {
        float:left;
        width:194px;
        height:364px;
        padding:36px 0 0 6px;
        margin:0 0 50px;
        background-image: url(http://i732.photobucket.com/albums/ww329/Chrishick/leftnav.png);
        list-style-type:none;
     }
    #leftnav a {
        display:block;
        width:190px;
        height:42px;
        text-indent:-9999px;
        outline:none;
     }
    #a1 {
        margin-bottom:104px;
     }
    #a2 {
        margin-bottom:105px;
     }
    #right {
        float:right;
        width:466px;
        height:320px;
        background-image:url(http://i732.photobucket.com/albums/ww329/Chrishick/appearance-2.png);
     }
    #footer {
        clear:both;
        text-align:center;
     }
    </style>
    
    </head>
    <body>
    
    <div id="container">
    
    <div id="header"></div>
    
    <ul id="leftnav">
     <li><a id="a1" href="http://www.roleplayandwritinghaven.com/forum.htm" title="R&amp;W Haven Forum">R&amp;W Haven Forum</a></li> 
     <li><a id="a2" href="http://www.roleplayandwritinghaven.com/" title="R&amp;W History">R&amp;W History</a></li> 
     <li><a href="http://www.roleplayandwritinghaven.com/" title="R&amp;W 7 Elders">R&amp;W 7 Elders</a></li> 
    </ul> 
    
    
    <div id="right"></div>
     
    <div id="footer">This page is brought to you by Roleplay and Writing Haven.</div>
    
    </div><!-- end #container -->
    
    </body>
    </html>
    
    coothead


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •