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 14 of 14
  1. #1
    New Coder
    Join Date
    Jul 2002
    Location
    Oak Park, IL
    Posts
    40
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question BgImage as ImageMap?

    I am trying to design a Web site, and I made an image, to which I would like to use it as the background of the site. However, I also would like to have it be used as an imagemap.

    Is there a way to do this? Or will image mapping only work with an image inside a page?

    Here's the link: http://cwcafe.com/josh

    I need the gold bar on top to have links, and the copyright info on the bottom would have 2 links. I would greatly appreciate the help.


  • #2
    Senior Coder
    Join Date
    Aug 2002
    Posts
    3,467
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Your best bet here would be to absolutely position your links
    Code:
    <style>
    div#navLinks{
    position: absolute;
    left: 0px;
    top: 0px;
    }
    div#navLinksa {
    position: absolute;
    display: block;
    top: 41px;
    height: 11px;
    }
    </style>
    
    <div id="navLinks">
    <a href="index.html" style="left: 154px; width: 34px;"></a>
    <a href="aboutme.html" style="left: 195px; width: 68px;"></a>
    <a href="gallery.html" style="left: 270px; width: 73px;"></a>
    <a href="sports.html" style="left: 350px; width: 64px;"></a>
    <a href="http://cwcafe.com/cgi-bin/dcforum/dcboard.cgi" style="left: 422px; width: 47px;"></a>
    </div>
    And the process can be repeated for the bottom links.

    Now that I've answered you question directly, here's an indirect one: Why on EARTH would you want do make the background of your site one big image??

    P.S. I spent the first 16 years of my life in Park Forest
    My Site | fValidate | My Brainbench | MSDN | Gecko | xBrowser DOM | PHP | Ars | PVP
    “Minds are like parachutes. They don't work unless they are open”
    “Maturity is simply knowing when to not be immature”

  • #3
    New Coder
    Join Date
    Jul 2002
    Location
    Oak Park, IL
    Posts
    40
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks, I'll give it a try.

    I am just trying this technique out ... but if it becomes more trouble than it's worth, I may scrap it.

    Re: Park Forest... that's cool. My cousins lived there for a brief time.

  • #4
    Senior Coder
    Join Date
    Jun 2002
    Location
    The Netherlands, Baarn, Ut.
    Posts
    4,253
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Really BIG image!

    JWGlenn,

    beetle hinted (siq) at it: using a single large image to make up your entire site is highly impractical for a number of reasons:
    [list=1][*]Since it is so large, it takes forever to load;[*]The majority of the image consists out of monocolor dark blue, which can be achieved by a colored background much easier, not to mention a zillion times faster;[*]The layout, like the distance between header and footer, is fixed; in practice this will mean the content will either be to little or to much to ever fit the available space.[/list=1]
    I suggest slicing the large image up into a page header, a menu bar (which supports an image map), and a footer. Incorporate these elements in the page, together with the content, and set them against a solid blue background in the desired color.
    Regards,
    Ronald.
    ronaldvanderwijden.com

  • #5
    New Coder
    Join Date
    Jul 2002
    Location
    Oak Park, IL
    Posts
    40
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Ronald,

    Thanks for your input.

    1. The image is fairly small and only takes 3s to load on a 28.8k modem.

    2. As stated above, the GIF doesn't take long to load at all.

    3. The reason I had made this image the size it is (fixed height and width, is because I wanted to make sure it fit on one page (w/o scrolling) on an 800x600 display.

    I will probably end up just using regular images though, if I cannot find a way to make the background image an imagemap.

    Josh

  • #6
    Senior Coder
    Join Date
    Aug 2002
    Posts
    3,467
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Originally posted by JWGlenn
    3. The reason I had made this image the size it is (fixed height and width, is because I wanted to make sure it fit on one page (w/o scrolling) on an 800x600 display.
    There are better ways to accomplish this.
    My Site | fValidate | My Brainbench | MSDN | Gecko | xBrowser DOM | PHP | Ars | PVP
    “Minds are like parachutes. They don't work unless they are open”
    “Maturity is simply knowing when to not be immature”

  • #7
    New Coder
    Join Date
    Jul 2002
    Location
    Oak Park, IL
    Posts
    40
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Yeah, I'm slowly figuring that out.
    Thanks again for the tips.

  • #8
    Senior Coder
    Join Date
    Jun 2002
    Location
    The Netherlands, Baarn, Ut.
    Posts
    4,253
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Size not important

    Okay, i did a little experimenting and the size argument doesn't hold up. I'm big enough to admit that.
    Still, i think your life will be a lot easier (concering web design, anyway), if you consider page elements as page elements and a background as background. That'll save the hassle with image maps at the same time, and your design will be more flexible.

    Then again, it's your life, your site, your choice.
    Regards,
    Ronald.
    ronaldvanderwijden.com

  • #9
    Senior Coder
    Join Date
    Jul 2002
    Posts
    1,628
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Originally posted by JWGlenn

    3. The reason I had made this image the size it is (fixed height and width, is because I wanted to make sure it fit on one page (w/o scrolling) on an 800x600 display.

    your site says:
    src="images/index.gif" width="1024" height="768"

    but the image will fit in 800x600
    however, the bottom may need to be a little higher up
    Last edited by cg9com; 11-14-2002 at 04:03 PM.

  • #10
    New Coder
    Join Date
    Jul 2002
    Location
    Oak Park, IL
    Posts
    40
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Originally posted by cg9com



    your site says:
    src="images/index.gif" width="1024" height="768"

    but the image will fit in 800x600
    however, the bottom may need to be a little higher up
    Yes, but in order for the image not to tile in a larger resolution, you have to make the image as big as the biggest resolution. That's why it's at 1024x768.

  • #11
    Senior Coder
    Join Date
    Jul 2002
    Posts
    1,628
    Thanks
    0
    Thanked 0 Times in 0 Posts
    couldnt you use css to configure that

  • #12
    Senior Coder
    Join Date
    Aug 2002
    Posts
    3,467
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Originally posted by JWGlenn
    Yes, but in order for the image not to tile in a larger resolution, you have to make the image as big as the biggest resolution. That's why it's at 1024x768.
    JW, what you describe here is what I like to call a 'hack'. Besides, 1024x768 is not the largest resolution by any means. Here's the correct way to do it...
    Code:
    <html>
    <head>
    <title>My Page</title>
    <style type="text/css">
    body {
    margin: 0px;
    background-image: url(images/big_ol_gif.gif);
    background-repeat: no-repeat;
    background-color: #00F; /* Or the correct hexcode-blue */
    }
    </style>
    </head>
    <body>
    </body>
    </html>
    Of course, this is assuming you still want to use that image for the background of your site, which again, I strongly advise against.
    My Site | fValidate | My Brainbench | MSDN | Gecko | xBrowser DOM | PHP | Ars | PVP
    “Minds are like parachutes. They don't work unless they are open”
    “Maturity is simply knowing when to not be immature”

  • #13
    Senior Coder
    Join Date
    Jul 2002
    Posts
    1,628
    Thanks
    0
    Thanked 0 Times in 0 Posts
    yes beetle stated what i had in mind

  • #14
    New Coder
    Join Date
    Jul 2002
    Location
    Oak Park, IL
    Posts
    40
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Originally posted by beetle
    [B]JW, what you describe here is what I like to call a 'hack'. Besides, 1024x768 is not the largest resolution by any means.
    Yes, I am aware that is not the largest resolution. For what it's worth, I removed the gold link bar and the copyright line from the original background image; and made the link bar a seperate image from which I could imagemap. Now I have the desired look I was trying to achieve.

    Thanks to cg9com and beetle.


  •  

    Posting Permissions

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