Image Navigation ,how?(not so newbie)

[dantadin]

Hi. I have a problem.
So I've made this website:
http://www.hackstavastergard.com/

At the website you will see this:
* gästhem
* bed&breakfast
* uthyrning
* stipendium
* ledarskap
* möbler
* kontakt

I lined them up like that with css, here is the code:

html:

<div id="nav-main">
<ul>
<li><a href="http://www.hackstavastergard.com/gasthem.html">gästhem</a></li>
<li><a href="http://www.hackstavastergard.com/bed&amp;breakfast.html">bed&amp;breakfast </a></li>
<li><a href="http://www.hackstavastergard.com/uthyrning.html">uthyrning</a></li>
<li><a href="http://www.hackstavastergard.com/stipendium.html">stipendium</a></li>
<li><a href="http://www.hackstavastergard.com/ledarskap.html">ledarskap</a></li>
<li><a href="http://www.hackstavastergard.com/mobler.html">möbler</a></li>
<li><a href="http://www.hackstavastergard.com/kontakt.html">kontakt</a></li>

</ul>
</div>

css:

div#nav-main{
text-align:center;}
div#nav-main ul{
list-style-type: none;
margin : 0 20px;
padding : 0 0 0 20px;
}


div#nav-main ul, div#nav-main li {
display : inline;
margin : 5px;
padding : 0;
list-style-type : none;
}

li{
font-family:Georgia, 'Times New Roman', Times, serif; 
font-weight:normal; 
text-transform:uppercase;}

Now, the problem is that I want to replace the text(gästhem,bead&breakfast and so on) with images. How in the world do i replace those text with images from photoshop? What I predikt here is that the images will be to big or small for their own click-able box. I want them to be perfect in their boxes, pixel by pixel.

But I don't know where to start, I can only guess.
1) I slice(slice tool) the whole webpage I made in Photoshop and save it as html. Then I use the information to build the css(like box width and height).
2) I make pictures bigger than they really are in photoshop. So if I make a image with width:100px and height:30px, then i create a box(div) with width:50 and height:15 px. That way I can move the image with top: X px or left: X px. That way then the image will fit perfect with the rest of the website.

Please help me out!!

[rajesh1158]

Use the below code for all your <li>

<li><a href="http://www.hackstavastergard.com/gasthem.html"><img class="imgstyle" src="source of the image you want"></a></li>

replace "source of the image you want" with the actual image url (example: http://www.mycircle.freevar.com/image4.jpg)

then, remove css code for li and add for imgstyle as below

img.imgstyle{
width:40;
height:40;
border:none;
}

[drjohn]

And remember that google can't read your images, so if there is any text in them, google can't read that. You get a bonus from google if the words used in a link are the words the searcher is looking for. If there are no words, you've thrown away something useful.

It is MUCH better to use text for links, with an image as the background. If it is the same single image every time, the page loads faster, something google also gives a bonus for.

A background image for a link can be made very narrow and tiled horizontally, further increasing the speed with which the page loads. Users and google are both happy now.

[drjohn]

A clever trick is to make one image the background for the ul or the div it is in (your #nav-main), and another image as the background for the link. Then on hover you just remove the link's image and you get an instant response.

css

#nav-main {
.
.
.
background:transparent url(images/your.gif) repeat-x top left;

}

#nav-main ul li a {
.
.
.
background:transparent url(images/otherimage.gif) repeat-x top left;

}

#nav-main ul li a:hover {
.
.
.
background:transparent url();

}

where
.
.
. are any other styles you use.