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 2 of 2
  1. #1
    New Coder
    Join Date
    Apr 2008
    Posts
    48
    Thanks
    5
    Thanked 2 Times in 2 Posts

    hotspots in header

    hi all,

    i have a header that links back to the homepage when clicked, but i want to add a hotspot so that users can click on the part that says "click to email". (see here: http://www.allisonwrote.com/aussie)

    i thought about an image map, but shouldn't headers always be background images inside a div so that they don't need to load with each new page?

    i found some css code that could work, but i have no idea how to implement it. it looks like this:

    Code:
    #header a.headerimagelink{
    border: 1px solid red;
    display: block;
    width: 100px;
    height: 100px;
    position: absolute;
    left: 100px;
    top: 100px;
    text-indent: -9999em;
    }
    right now, for my header i have this:

    CSS:
    Code:
     
    #header{
    	width: 810px;
    	height: 150px;
    	position: relative;
    	margin: 0 auto;
    	background-color: #008800;
    	background-image: url(http://www.allisonwrote.com/images/draft.jpg);
    }
    HTML:
    Code:
    <div id="header" title="return to home" style="cursor:pointer;" onclick="window.location='/index.html';">
    </div>

  • #2
    Senior Coder
    Join Date
    Nov 2003
    Location
    Minneapolis, MN
    Posts
    2,879
    Thanks
    2
    Thanked 65 Times in 56 Posts
    Here is what I would do:

    1. Mark it up in HTML:
      Code:
      <div id="header">
      	<h1>My Website</h1>
      	<p id="email_me"><a href="/contact/">Email me!</a></p>
      </div>
    2. Define dimensions for the header and add a background image for the whole thing in CSS:
      Code:
      #header {
      	width: 700px;
      	height: 200px;
      	background: url(header.jpg) no-repeat left top;
      }
    3. Make the email link large enough to surround the image you want to "hotlink"…
      Code:
      #email_me a {
      	display: block;
      	width: 100px;
      	height: 50px;
      }
    4. …and position it to surround the image:
      Code:
      #header {
      	position: relative;
      	width: 700px;
      	height: 200px;
      	background: url(header.jpg) no-repeat left top;
      }
      
      #email_me a {
      	display: block;
      	width: 100px;
      	height: 50px;
      	position: absolute;
      	bottom: 10px;
      	right: 10px;
      }
    5. Finally, move all the text out of the way so all you see is the final image:
      Code:
      #header h1, #email_me {
      	text-indent: -9999px;
      	overflow: hidden;
      }


    Something like that. I don't end up with this exact code or anything but this is the thought process behind it. Hope that helps.

  • Users who have thanked rmedek for this post:

    allisonwrote (05-26-2008)


  •  

    Posting Permissions

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