How to assign more than one image to dif links

lostyboy · #1 Oct 19th, 2007, 09:03

please can sum one tell me sum code to asign a differnt image to each link

#nav a {
    width: 109px;
    height: 27px;
    background-image: url(images/aboutus.png);
    background-repeat: no-repeat;
    display: block;
    margin: 0px;
    color:#032478;
    font-size:1px;
    text-decoration:none;
    float: left;

Code: Select all

<div id ="nav">
        <a href="/" title="aboutus">About us</a>
        <a href="/" title="comparison">Comparison</a>
        <a href="/" title="faq">FAQ's</a>
        <a href="/" title="shop">Shop</a>
           <a href

Monie · #2 Oct 19th, 2007, 09:18

give it a class..

Code: Select all

<a href="/" title="aboutus" class="class1" >About us</a>
<a href="/" title="comparison" class="class2">Comparison</a>
<a href="/" title="faq" class="class3">FAQ's</a>
<a href="/" title="shop" class="class4">Shop</a>

and in your css just create a style for each class:

Code: Select all

#nav a .class1{
       ....
       background-image: url(images/image1.png);
       background-repeat: no-repeat;
       ....

Code: Select all

#nav a .class2{
       ....
       background-image: url(images/image2.png);
       background-repeat: no-repeat;
       ....

Monie · #3 Oct 19th, 2007, 09:19

Or you could read this [CSS For Begineer]

lostyboy · #4 Oct 19th, 2007, 10:22

i tried it and it still doesnt work any idea why no images are showing up.

Code: Select all

<div id ="nav">
        <a href="/" title="aboutus" class="class1" >About us</a>
        <a href="/" title="comparison"class="class2">Comparison</a>
        <a href="/" title="faq"class="class3">FAQ's</a>
        <a href="/" title="shop"class="class4">Shop</a>
           <a href="/" title="contactus"class="class5">contact us</a>
</div>

Code: Select all

#nav a .class1 {
    background-image: url(images/aboutus.png);
    background-repeat:no-repeat;
    display:block;
    width: 109px;
    height: 27px;
    margin: 0px;
    color:#032478;
    font-size:1px;
    text-decoration:none;
    float: left;
}
#nav a .class2 {
    background-image:url(images/comp.png);
    background-repeat:no-repeat;
    display:block;
    width: 109px;
    height: 27px;
    margin: 0px;
    color:#032478;
    font-size:1px;
    text-decoration:none;
    float: left;
}
#nav a .class3 {
    background-image:url(images/faq.png);
    background-repeat:no-repeat;
    display:block;
    width: 109px;
    height: 27px;
    margin: 0px;
    color:#032478;
    font-size:1px;
    text-decoration:none;
    float: left;
}
#nav a .class4 {
    background-image:url(images/shop.png);
    background-repeat:no-repeat;
    display:block;
    width: 109px;
    height: 27px;
    margin: 0px;
    color:#032478;
    font-size:1px;
    text-decoration:none;
    float: left;
}
#nav a .class5 {
    background-image:url(images/contact.png);
    background-repeat:no-repeat;
    display:block;
    width: 109px;
    height: 27px;
    margin: 0px;
    color:#032478;
    font-size:1px;
    text-decoration:none;
    float: left;
}

karinne · #5 Oct 19th, 2007, 11:59

What does the image look like? A link would help so we can see what is going on!

lostyboy · #6 Oct 19th, 2007, 13:26

www.juxdesigns.com/New/index.html
thats the link thankyou for helping me

karinne · #7 Oct 19th, 2007, 13:33

Ugh! Please add a mute button or and off button for that thing! I think I woke up the those 6th floor in my department.

lostyboy · #8 Oct 19th, 2007, 15:40

sorry abut that i havent put the mute button on yet have you managed to figure out what my problem is tho

Marc · #9 Oct 19th, 2007, 16:24

What type of image is it??? There are no naviagtion images on that page.. That i can recognise..

karinne · #10 Oct 19th, 2007, 16:29

When I heard the sound and didn't see an off or mute button I left ...

AdRock · #11 Oct 19th, 2007, 19:25

Are you after some sort of rotating image like an animated gif for each link?

lostyboy · #12 Oct 19th, 2007, 20:40

no just a normal image its a png because its got round edges on the images i dont even want a roll over just asign a differnt image to each one and nothing comes up is my class wrong.

AdRock · #13 Oct 19th, 2007, 21:07

why don't you just use something like

HTML: Select all

<a href="whateverpage.htm"><img src="image.png"></a>

Monie · #14 Oct 22nd, 2007, 04:15

Quote:

Originally Posted by AdRock

why don't you just use something like

HTML: Select all

<a href="whateverpage.htm"><img src="image.png"></a>

That's it!
It a simple solution!

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
Image links	Kwabena	Website Planning	0	May 20th, 2007 22:59
Rollover image with links on new image	stoob	JavaScript Forum	2	Feb 8th, 2007 22:05
One whole image w/ links	Tetrisface	Graphics and 3D	8	Jan 14th, 2007 10:42
Blured Links (image links)	bruno89	Web Page Design	2	Jul 25th, 2006 14:48
Assign a Port No to web site in IIS	humair	Classic ASP	4	Apr 26th, 2004 19:33

		Webforumz.com > Main Forums > Design Your Website > Web Page Design
How to assign more than one image to dif links