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
  1. #1
    New to the CF scene
    Join Date
    Jun 2006
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Background Image within Image Map

    I've been trying and failing to create an image map that contains a tiled background image underneath the main image.

    My image map is 600px in height. I want the main image (img_bottom.jpg) to only cover the bottom 100px of the map (and the background to fill the rest of the space).

    The height of the main image will change, which is why I want to leave the empty space as a tiled background image.

    Code:
    #my_map {
    	display: block;
    	height: 600px;
    	width: 1000px;
    	margin: 0px auto;
    	margin-bottom: 10px;
    	position: relative; 
    	top: 0px; 
    	left: 0px; 
    	border: 2px solid #51595C;
    	border-top: none;
    	background: url(../images/ob09_5.jpg) repeat top left;
    }
    
    #imap {
    ***/ Not sure what to put here **/
    }
    
    <map name="my_map" id="my_map"></map>
    
    <img name="imap" id="imap" src="./images/img_bottom.jpg" ismap usemap="#my_map" />
    Any suggestions on how to get this working in all browsers?

  • #2
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,302
    Thanks
    28
    Thanked 276 Times in 270 Posts
    Assuming that I understand you correctly:
    Code:
    CSS:
    div {
      position: relative;
      background: …;
      }
    img {
      position: absolute;
      bottom: 0;
      }
    
    HTML:
    <div>
      <img …/>
    </div>
    Attributes must be expanded in XHTML, so ismap would be ismap="ismap".
    For every complex problem, there is an answer that is clear, simple, and wrong.

  • #3
    New to the CF scene
    Join Date
    Jun 2006
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    thanks buddy, your post pushed me in the right direction.

    It seems IE doesn't like setting styles to <map> for some reason. A div worked perfectly.


  •  

    Posting Permissions

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