PDA

View Full Version : Multiple image links


Law
01-29-2010, 08:23 AM
Hey guys

I have created a menu bar image (770px X 35px) and on the one image I have the words for pages I want to create links for such as home, contact etc.

Now the words are not text from dreamweaver they are all made from the ONE image in Photoshop.

Is there any way I can make links to each page from this one image OR will I have to redesign my menu bar so that each link has its own image? ie one image for home, one image for contact etc etc.

Thanks :)

gentleone
01-29-2010, 09:03 AM
Is there any way I can make links to each page from this one image
Yes, you can! It's called the CSS-sprites technique, but this require that your CSS skills are advanced.

OR will I have to redesign my menu bar so that each link has its own image? ie one image for home, one image for contact etc etc.
This is the most common way when you just start with web design/development, so I guess in your case this is easier for you.

Law
01-29-2010, 09:10 AM
Ok thanks for the help.

I think its going to make more sence to cut the image up :)

Law
01-29-2010, 11:11 AM
Just to make sure I get this right.

I will be using the image as a background for the menu bar then I will add images on top of that for home, contact etc and just add the links to them....simple as that? :D

gentleone
01-29-2010, 11:17 AM
Just to make sure I get this right.

I will be using the image as a background for the menu bar then I will add images on top of that for home, contact etc and just add the links to them....simple as that? :D

Well... of course you could do it like that, but its not really the way it should be.

Use an unordered list for your menu. Look at CSSplay for examples and for how to-do check Listamatic.

http://www.cssplay.co.uk/menus/

http://css.maxdesign.com.au/listamatic/

Law
01-29-2010, 11:38 AM
thanks for the links there, sorry to be a pain but after knowing what I would want to do which is the best page on CSS play?? SO many to pick from!

gentleone
01-30-2010, 12:40 PM
thanks for the links there, sorry to be a pain but after knowing what I would want to do which is the best page on CSS play?? SO many to pick from!

Start first with Listamatic to learn and understand how to set-up a menu with an unordered list (<ul>) and how to style it with CSS. Most of the examples there are pure CSS based. They hardly show examples that are using images, but it is your best starting point IMO.

The same goes actually for CSS play... hardly menu's using images, but using background colors for the different states (active, hover and visited). If you understand the whole point of CSS based menus, then it is easy for you to use background images instead of background colors.

DW has an inbuilt option to use an roll-over menu based on JavaScript, but this has two cons.
1. If a user has JavaScript disabled in their browser then your whole menu falls apart. If you don't make the menu also workable for browsers with JS disabled then the navigation is useless and that visitor won't be able to navigate through your site.
2. You need a preload image script which is also JavaScript based.

Another good thing for you is to read this tut, so that you will understand the basics of HTML and CSS.
http://articles.sitepoint.com/article/html-css-beginners-guide