Hover link coding problem

fender1100 · Dec 1, 2008

Hi,

I'm quite new to web design and especially to coding, and I'm having a few problems making a hover effect on links.

I've started making a template menu for my site and I've managed to position my menu items fine on the menu bar, as well as assign links to them, however when I try to make the images different upon hovering over them, it does not work properly. I have tried out the hover effect on the 'about' item on the bar, and you can view this here:

Untitled Document

You will see that between the 'Home' and 'Listen' menu items, there is an 'O', this is a section of the word 'About', except that it was cutoff. It seems like the actual hover effect has worked on it (as when the mouse goes over the 'O' the picture goes orange/yellow instead of the normal red, this is what I was looking for), just that the word is cut off and I don't know why.

If you think you may know what could be going wrong I would really appreciate any advice you can give!

Thanks a lot,

Jamie

CrimsonRequiem · Dec 1, 2008

I think something went horrible wrong when you did your image slicing or something. It doesn't look like a coding problem, because after I click on the O I see the whole picture of the word about.

fender1100 · Dec 1, 2008

hey,

when you say you see a whole 'about', is that in the seperate 'who are we?' page?

This is an old version of the code, without any :hover coding, so the word is fine.

It's only when I put in the :hover coding that I get the cut-off problem :S

JGruber · Dec 1, 2008

Fixed it for ya... change this

PHP:

<div id="footer">
	  <p><a href="Index2.html" alt="Home" class="menuhome"> <img src="http://intranet.lcc.arts.ac.uk/srs/tandt/tandtgc/jamie/pictures/menu-buttons/home.png" border="0"></a>
       <a href="About.html" alt="About" class="menuabout"> </a>
	    <a href="Listen.html" alt="Listen" class="menulisten"> <img src="http://intranet.lcc.arts.ac.uk/srs/tandt/tandtgc/jamie/pictures/menu-buttons/listen.png" border="0"></a>
	    <a href="Contact.html" alt="Contact" class="menucontact"> <img src="http://intranet.lcc.arts.ac.uk/srs/tandt/tandtgc/jamie/pictures/menu-buttons/contact.png" border="0"></a>

      <a href="Links.html" alt="Links" class="menulinks"> <img src="http://intranet.lcc.arts.ac.uk/srs/tandt/tandtgc/jamie/pictures/menu-buttons/links.png" border="0"></a></p>


 <p><a class="siteownedby"> <img src="http://intranet.lcc.arts.ac.uk/srs/tandt/tandtgc/jamie/pictures/site-owned-and-created-by-jamie.png"> </a></p>

</div>

To this:

PHP:

<div id="footer">
	  <p><a href="Index2.html" alt="Home" class="menuhome"> <img src="http://intranet.lcc.arts.ac.uk/srs/tandt/tandtgc/jamie/pictures/menu-buttons/home.png" border="0"></a>
       <a href="About.html" alt="About" class="menuabout"> <img src="http://intranet.lcc.arts.ac.uk/srs/tandt/tandtgc/jamie/pictures/menu-buttons/about.png" border="0"></a>
	    <a href="Listen.html" alt="Listen" class="menulisten"> <img src="http://intranet.lcc.arts.ac.uk/srs/tandt/tandtgc/jamie/pictures/menu-buttons/listen.png" border="0"></a>
	    <a href="Contact.html" alt="Contact" class="menucontact"> <img src="http://intranet.lcc.arts.ac.uk/srs/tandt/tandtgc/jamie/pictures/menu-buttons/contact.png" border="0"></a>

      <a href="Links.html" alt="Links" class="menulinks"> <img src="http://intranet.lcc.arts.ac.uk/srs/tandt/tandtgc/jamie/pictures/menu-buttons/links.png" border="0"></a></p>


 <p><a class="siteownedby"> <img src="http://intranet.lcc.arts.ac.uk/srs/tandt/tandtgc/jamie/pictures/site-owned-and-created-by-jamie.png"> </a></p>

</div>

The error is at this section -

PHP:

<a href="About.html" alt="About" class="menuabout"> </a>

You forgot to include the location of the image.

fender1100 · Dec 1, 2008

hey!

thanks for the fast replies

I had tried adding in the location of the image there but it didnt work with it in neither, and i thought as the location of the image was already written under 'background-image' in the a.about part of the css style, it didnt need to be in the html as well...

I've added the img src html coding in and re-uploaded the page to the same link:

Untitled Document

as you can see, there are now two 'about' images, one with hover, one without...!

cheers for your help

J.

JGruber · Dec 1, 2008

Try removing this from the style

PHP:

a.menuabout{
	padding-left:15px;
	position:relative;
 	top:25.2px;
 	width:149px;
	height:74px;
 	background-image: url(http://intranet.lcc.arts.ac.uk/srs/tandt/tandtgc/jamie/pictures/menu-buttons/about.png);
	background-repeat: no-repeat;
	background-position: center;

}

fender1100 · Dec 1, 2008

hmm i think I had tried that already :S ...this is what happens when I do that:

Untitled Document

JGruber · Dec 1, 2008

Without inspecting it more, I don't know what the problem is. I'm almost positive it has to do with the coding in the style, when I code something, I normally don't use images for hoverovers, or keep the style in the same page, I use a separate style sheet.