SitePoint Sponsor

User Tag List

Results 1 to 11 of 11
  1. #1
    SitePoint Wizard simplecode's Avatar
    Join Date
    Jun 2006
    Posts
    1,129
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    How to hyperlink background image.

    How to hyperlink background image.

    We have a header section which is having no. of div styling etc. One div is having CSS background image assigned to it and we need to make it hyper link.

    Any suggestions

  2. #2
    SitePoint Enthusiast willsmith727's Avatar
    Join Date
    May 2006
    Posts
    90
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hey, I'm not sure if this will help, but it could be worth a try. Its some jQuery which allows you to make block elements clickable.

    http://www.webdesignerwall.com/demo/...clickable.html

    Its from this article: http://www.webdesignerwall.com/tutor...for-designers/

  3. #3
    SitePoint Wizard simplecode's Avatar
    Join Date
    Jun 2006
    Posts
    1,129
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks thought but not complete block and all its content but only few are of the image is required to be hyperlinked

  4. #4
    Mouse catcher silver trophy Stevie D's Avatar
    Join Date
    Mar 2006
    Location
    Yorkshire, UK
    Posts
    5,892
    Mentioned
    123 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by simplecode View Post
    How to hyperlink background image.

    We have a header section which is having no. of div styling etc. One div is having CSS background image assigned to it and we need to make it hyper link.
    You can't make a background image hyperlinkable - that's why it's in the background. Any images that you want to be clickable should be part of the content, and so in place with <img> elements.

  5. #5
    SitePoint Mentor bronze trophy
    John_Betong's Avatar
    Join Date
    Aug 2005
    Location
    City of Angels
    Posts
    1,889
    Mentioned
    74 Post(s)
    Tagged
    6 Thread(s)
    I have recently made the static images on my site into sprites and here is the code for a sprite background image which is linkable:
    HTML Code:
    <!-- the CSS -->
    .fll {float:left}
    .dib {display:block}
    .sprites {{background-image:url(/afiles/images/sprites.jpg);background-color:transparent;background-repeat:no-repeat}}
    #jb_still_gif	{width:62px;	height:122px;	background-position:-834px -0px}
    #twitter_logo_header_png{width:69px;	height:16px;	background-position:-677px -0px}
    
    <!-- the new code -->
    <a href='http://twitter.com/Johns_Jokes' id='twitter' onclick="newLocation()">
      <strong class="fll dib sprites" id="jb_still_gif">
      </strong> 
      <br />
      <strong class="fll dib sprites" id="twitter_logo_header_png">
      </strong> 
      <br />
      me for 
      <br />
      updates
    </a>
    
    <!-- the old code -->
     <!-- img src="/afiles/images/jb_in_shorts.gif"  style='border:0;float:left; width:62px;height:122px' alt="JB in red shorts" / -->
    If you happen to visit the site then check the loading time in the bottom right-hand corner. Sprites make a big difference.
    Last edited by John_Betong; Aug 4, 2010 at 05:43. Reason: grammar: not my forty :)
    Learn how to be ready for The New Move to Discourse

    How to make Make Money Now with a *NEW* look

    Be sure to congratulate Wolfshade on earning Member of the Month for August 2014

  6. #6
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,658
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    Make the anchor display block and give it the demensions of the div.

  7. #7
    SitePoint Member
    Join Date
    Aug 2010
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    If its a link, then you need some content to tell the user where the
    link goes. If its content, it should be in the HTML, not in the
    presentation layer. Use an <img> instead.

  8. #8
    SitePoint Wizard donboe's Avatar
    Join Date
    Jun 2010
    Location
    Netherlands
    Posts
    2,163
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I presume it's your logo!

    Code:
    #header{
    /* whatever the width etc.. */
    }
    
    #header .logo {
    /* whatever the width of logo */  
    }
    
    #header .logo a {
    /* whatever the height of the logo; whatever the margins you want to use; */ text-indent:-9999px; background: url(/* your background image */) no-repeat;  
    }
    and then your html:
    Code:
    <div id="header">
        <div class="logo">
        <a href="#" title="">Your text</a>
        </div>
    
    </div>
    Hope this helps

  9. #9
    SitePoint Wizard simplecode's Avatar
    Join Date
    Jun 2006
    Posts
    1,129
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Its a big image and we have no. of content over it (logo, text etc) and this img is bg img. Now i wanted to hyperlink some section of it wired i know

    After looking at the suggestions i think my question is odd and dont have answers because we are breaking the rules.

  10. #10
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,658
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    Make the anchor position absolute and give it a height/width and left/right.

  11. #11
    SitePoint Member
    Join Date
    Jan 2009
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'm using a stylesheet to place a small 'background image' in the; > upper left corner of several pages. Is there a simple way of making; ... A solution which relies on image loading and css will fail when browsed by Lynx. A solution that relies instead on floating the image, and making that a hyperlink, will not fail...



    Thanks
    ----------------


Bookmarks

Posting Permissions

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