Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 4 of 4

Thread: Imagemap in CSS

  1. #1
    Junior Member
    Join Date
    Jul 2007
    Posts
    4
    Member #
    15601
    I have an image that floats along my webpage that I want to use as a navigation bar.
    The CSS code for it is:

    #float{
    z-index: 2;
    background-image: url("Home-Icons.gif");
    background-repeat: no-repeat;
    position:absolute;
    top:237;
    right:325;
    height: 150px;
    width: 250px;
    }

    How do I turn a background image in css into an image map? I know how to make an image map in HTML, but when I tried using the HTML tags in the CSS file, it just made my image disappear.

  2.  

  3. #2
    Senior Member Steax's Avatar
    Join Date
    Dec 2006
    Location
    Bandung, Indonesia
    Posts
    1,207
    Member #
    14572
    Thats not how you should make navigation bars. As I see it, your code is also rather messy (its not a good idea to use absolutely positioned elements, a single background, and map it somehow). Instead, break up your menu image into smaller pieces, set them as backgrounds for individual <li> elements, and float them in CSS.
    Note on code: If I give code, please note that it is simply sample code to demonstrate an effect. It is not meant to be used as-is; that is the programmer's job. I am not responsible to give you support or be held liable for anything that happens when using my code.

  4. #3
    Junior Member
    Join Date
    Jul 2007
    Posts
    4
    Member #
    15601
    Oh okay, I'll try that. I've only recently started learning CSS so I'm really new at it. Thanks for the suggestion!

    Actually, I forgot to ask how I'd make an image map out of background images. And about the <li> tag, my navbar is horizontal, so I don't think I'd need them if I'm understanding what you're saying.

    But yeah, my main concern is how I can make a background image in css into an image map.

  5. #4
    Senior Member Steax's Avatar
    Join Date
    Dec 2006
    Location
    Bandung, Indonesia
    Posts
    1,207
    Member #
    14572
    Horizontal menus can be done quite easily using unsorted lists. Even tabs.

    There are tons of resources surrounding horizontal menus.

    Most of the above are based on HTML, which you should try to use. It might inspire you to lose those images and pick up CSS.
    Note on code: If I give code, please note that it is simply sample code to demonstrate an effect. It is not meant to be used as-is; that is the programmer's job. I am not responsible to give you support or be held liable for anything that happens when using my code.


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 02:07 AM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com