Making Clickable Home Page Link

[etidd]

Hello everyone,

I am moving on forward on my quest to web development greatness. Again, for my page at: http://www.atlantareviewgroup.com/health.html I have designed a graphic for the home page link. I put it in the footer inside a div element, but I need to place a link inside there. Let me know how I can make it a link. I'm not sure again why this positioning still creates a gap between the body & footer.

I'm thinking I can just use an empty anchor with an id assigned to it, and add these styles in. Is that correct?

[ralph.m]

Let me know how I can make it a link.

With a standard link/anchor element.

<a href="/">

[webdev1958]

to make your graphic a clickable link, just wrap the image in an <a>

<a href="myHome.htm" title="Go to home page"><img src="myGraphic.jpg" alt="" /></a>

[etidd]

Yes, thank you. Now why is there a gap? I'd like to position this link.

[ralph.m]

Yes, thank you. Now why is there a gap? I'd like to position this link.

The gap is caused by

#sectionhomelink {
  background: url("sectionhomelink.gif") repeat scroll 0 0 transparent;
  height: 40px;
  margin: 10px 15px 0 0;
  width: 300px;
}

Change the value in red to 0.

[etidd]

With this markup:

<a href="http://www.atlantareviewgroup.com" title="Home" id="sectionhomelink" alt="Home Page"><img src="sectionhomelink.gif" alt="" /></a>

and these styles:

#sectionhomelink{
	background:url("sectionhomelink.gif");
	width:300px;
	height:40px;
	margin:10px 15px 0 0;
}

#sectionhomelink:hover, #sectionhomelink:focus, #sectionhomelink:active{
	background:url("sectionhomehover.gif");
}

I'm not achieving the desired effect. I want to swap the images on hover to achieve a mouseover effect.
[/CODE]

[ralph.m]

You are better off using a sprite image for a hover effect.

[etidd]

Wow, that was some breakthrough material right there.

Yes, CSS sprites are a useful tool, but my situation is a bit more unique than designing a full layout of images. I have two images that are the exact same size, and I just want to show the other one on hover. So I'm a bit confused how I would be doing this given what I have because all of the examples I've found involve several images and only displaying a certain area of the big picture.

This was in that article, pertaining to 5 buttons with 5 hover states they will show:

#nav li a {background-image:url('../img/image_nav.gif')}
#nav li a.item1 {background-position:0px 0px}
#nav li a:hover.item1 {background-position:0px -72px}
#nav li a.item2 {background-position:0px -143px;}
#nav li a:hover.item2 {background-position:0px -215px;}

My situation is a lot more simple than that. Will you help me through this?

[webdev1958]

In that example they had 10 images - an on/off for each of the 5 icons.

You can still use a sprite for your situation, but you would have a single image (sprite) containing both your on/off images and then you simply display the appropriate portion of your sprite (which contains both images) depending on whether the element is currently hovered on or not.

[etidd]

Here's what I compiled my image into.

sectionhomelink.gif

Here's the code.
HTML

<a href="http://www.atlantareviewgroup.com" title="Home" id="sectionhomelink" alt="Home Page"><img src="sectionhomelink.gif" alt="" /></a>

CSS:

#sectionhomelink{
	background:url("sectionhomelink.gif");
	width:300px;
	height:40px;
	margin:0 15px 0 0;
}

#sectionhomelink:hover, #sectionhomelink:focus, #sectionhomelink:active{
	background-position:0 -40px;
}

On the page, I see a tiny little square. It's not displaying right.

[ralph.m]

It's working fine in Firefox. What browser are you viewing this in? You will, of course, need to put an anchor in there too, so it would be worth getting that done now.

[etidd]

I just updated the files at that page. It's not working still. You should be able to see the new code.

[ralph.m]

OK, with a sprite you don't put the image in the html. Give the <a> element width and height, and set the image as a background image, with a negative top setting for the hover state.

[etidd]

Okay, now I tried:
markup:

<a href="http://www.atlantareviewgroup.com" title="Home" id="sectionhomelink" alt="Home Page">&nbsp;</a>

style:

#sectionhomelink{
	background-image:url("sectionhomelink.gif");
	width:300px;
	height:40px;
}

#sectionhomelink:hover, #sectionhomelink:focus, #sectionhomelink:active{
	background-position:0 -40px;
}

I still have something incorrect as I see only a space length of the image. The size of the image is dependent with the amount of anchor text I put inside the <a> element.

[ralph.m]

From what I can see, you still have the image in the HTML.

The ideal would actually be to have the Home text in place, and then an absolutely placed span element over the top of it with the sprite on that. Here is an example by Paul O'Brien that shows how to do it:

http://www.pmob.co.uk/temp/headerreplacement3.htm

He uses a header element there, but you could use a <p> element if you prefer, or not even bother with either, though I prefer to have a block element in there somewhere.

[etidd]

Neato! What a necessary technique. I'll need to do something like this for the header portion on the home page of my site in case images are turned off on the visitor's browser.

Well, I got the image to show with the following code, but the header text is in view blocking the image.

markup:

<span id="sectionhomelink"><a href="http://www.atlantareviewgroup.com" title="Home" alt="Home Page"><h3>Back to Home Page</h3></a></span>

styles:

#sectionhomelink{
	background-image:url("sectionhomelink.gif");
	width:300px;
	height:40px;
	position:absolute;
}

#sectionhomelink:hover, #sectionhomelink:focus, #sectionhomelink:active{
	background-position:0 -40px;
        visibility:visible;
}

The link is only active when the mouse is level with the h3 element. I've done something wrong here.

I'll update the files now.

[etidd]

The whole thing is clickable with this, only with the header text on top of the image.

<a href="http://www.atlantareviewgroup.com" title="Home" alt="Home Page"><span id="sectionhomelink"><h3>Back to Home Page</h3></span></a>

[ralph.m]

Wow, you've got it totally around the wrong way. Didn't you look at Paul's code?

Try this:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Experiment</title>
	
<style media="all">
h3#sectionhomelink {
  height: 40px;
  position: relative;
  width: 300px;
}

#sectionhomelink a {
  height: 40px;
  width: 300px;
}

#sectionhomelink span {
  background: url("sectionhomelink.gif") no-repeat 0 0;
  height: 40px;
  position: absolute;
  width: 300px;
  top:0;
  left:0;
}

#sectionhomelink a:hover span {
  background-position:0 -40px;
  height: 40px;
  width: 300px;
}
</style>
</head>


<body>

<h3 id="sectionhomelink"><a alt="Home Page" title="Home" href="http://www.atlantareviewgroup.com">Back to Home Page<span></span></a></h3>
</body>

</html>

[etidd]

I did look at the source of that example site. He has different elements in the mix, so I got thrown off. My attempt at the CSS styles was way off, I agree.

If I were to position this image replacement concoction, say 50px to the left and 20px down, What target would I use to grab these elements and move them?

[ralph.m]

Everything in my example above is contained in the h3, so you could target ti with

#sectionhomelink {}

[etidd]

Nifty! Thanks for all your help. Uh, um.. in my positioning , I kinda made the image disappear somehow... I updated the files again so you can see the absence of the image. http://www.atlantareviewgroup.com/health.html

[ralph.m]

You left out position: absolute;

#sectionhomelink span {
  background: url("sectionhomelink.gif") no-repeat scroll 0 0 transparent;
  height: 43px;
  left: 0;
  top: 0;
  width: 300px;
  position: absolute;
}

[etidd]

Ah. There was a typo.. it said position:bsolute. Awesome!

[ralph.m]

Ah, I see. Because there was a typo, nothing showed up at all in Firebug.

[etidd]

I "bsolute" you, Ralph!