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 4 of 4
  1. #1
    Regular Coder
    Join Date
    Jul 2003
    Posts
    601
    Thanks
    17
    Thanked 0 Times in 0 Posts

    Setting a Background Image Over an Image - And Making Both Clickable

    Hey All,

    I've got a list of images that I want to apply a background image over the top of. It would just be over the top left corner of the image. The trick is I want the entire area of the main image to remain clickable. Here's the CSS I have:

    .new {
    background: url(new_icon.gif) no-repeat top left transparent;
    width: 65px;
    height: 65px;
    position: absolute;
    display: block;
    }

    And here is the HTML:

    <a href="" title="">
    <span class="new"></span>
    <img src="image.jpg" width="142" height="142" alt="" />
    </a>

    I can get the image to display properly, but I cannot get the entire area to act as clickable. Any ideas on what I might be missing?

    Any suggestions would be appreciated.

    Thanks.

  • #2
    Senior Coder coothead's Avatar
    Join Date
    Jan 2004
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    1,707
    Thanks
    0
    Thanked 237 Times in 232 Posts
    Hi there kraftomatic,

    this appears, to me, to be the simplest method...
    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></title>
    
    <style type="text/css">
    #mylink {
        display:block;
        width:142px;
        height:142px;
        background-image:url(image.jpg);
     }
    #mylink img {
        display:block;
        width:65px;
        height:65px;
        border:0;
     }
    </style>
    
    </head>
    <body>
    
    <div>
     <a id="mylink" href="#" title="">
      <img src="new_icon.gif" alt="">
     </a>
    </div>
    
    </body>
    </html>
    
    coothead

  • #3
    Regular Coder
    Join Date
    Jul 2003
    Posts
    601
    Thanks
    17
    Thanked 0 Times in 0 Posts
    That would work Coot, thanks. Although I have various images, so I wouldn't want to put the main image in the background of the CSS.

    I can keep the overlaying image in the CSS, as that will never change.

    Thanks.

  • #4
    Senior Coder coothead's Avatar
    Join Date
    Jan 2004
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    1,707
    Thanks
    0
    Thanked 237 Times in 232 Posts
    Hi there kraftomatic,

    if you want me to use your code, then the code would look 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></title>
    
    <style type="text/css">
    #mylink {
        position:relative;
        display:block;
        width:142px;
        height:142px;
     }
    #mylink img {
        position:relative;
        top:-65px;
        border:0;
     }
    .new {
        position:relative;
        z-index:1;
        display:block;
        width:65px;
        height:65px;
        background-image:url(new_icon.gif);
     }
    </style>
    
    </head>
    <body>
    
    <div>
     <a id="mylink" href="#" title="two images in one link">
      <span class="new"></span>
      <img src="image.jpg" width="142" height="142" alt="">
     </a>
    </div>
    
    </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
    •