Javascript / css menu image help, pls?

Hi guys,

first & foremost, my apologies if this is posted in the wrong zone - feel welcome to move it if necessary.

OK, and on to my situation...

I'm attempting to rewrite my navigation bar (vbulletin) to use images as oppose plain text. I used to frontpage2003 to start me off (I'm absolutely inexperienced to the lowest level). It all works fine (using 'interactive buttons') on frontpage, but it doesn't work one bit when applied to the templates.

I have zero experience in css & java/javascript so really I'm asking for the most basic of assistance to get me going here.

I'd like to have my navbar so it has - similar to daniweb's navbar by chance - an image that says "User CP" in blue... when hovered, the 'ink' changes to a red, and when clicked the whole image changes again to reflect a 'depressed button' and deep blue ink for the text.

I know it's an easy task, and I apologise for asking such easily answered questions, but I have googled for well over an hour now in an effort to find out what I should be doing.

Allt he information I can locate though doesn't appear to be helping me one bit. Thus, here I am... Any help at all, greatly appreciated.

:)

karlm

Newbie Poster

16 posts since May 2007

Reputation Points: 10

Solved Threads: 0

4 Years Ago

Here's a simplified way to do it in CSS.

<html>
<head>
<title></title>
<style type="text/css">
    a:link {
        text-decoration: none;
        color: red;
        background-color: yellow;
    }
    a:visited {
        text-decoration: none;
        color: black;
        background-color: blue;
    }
    a:hover {
        text-decoration: underline;
        color: green;
        background-color: gray;
    }
    a:active {
        text-decoration: none;
        color: silver;
        background-color: cyan;
    }
</style>
</head>
<body>
        <a href="http://www.daniweb.com">Daniweb</a>
</body>
</html>

You can change the colours around between the style tags.

This can be done using your own images using rollover buttons instead.

Cerberus

Junior Poster

162 posts since Sep 2006

Reputation Points: 27

Solved Threads: 14

4 Years Ago

Thank you very kindly, Cerberus, for the head start - I checked it out with frontpage and it works like a dream.
Now, forgive my ignorance - I can see how such a clean script works, using text, but how might I add images?
e.g. say I have three tabs I'd like to use, each has three colours:

tab1-standalone
tab1-hover
tab1-click/ed
tab2-standalone
tab2-hover
tab2-click/ed
etc. etc.
?

thank you again for such a great start on the path to CSS :)

karlm

Newbie Poster

16 posts since May 2007

Reputation Points: 10

Solved Threads: 0

4 Years Ago

I'm not sure how you do three images but i'll start you off with a simple roll over button.

<html>
<head>
<title></title>
<style type="text/css">
    .usercp
    {
        background-image: url(usercp2.png);
        display: block;
        width: 50px;
        height: 30px;
    }

    .usercp a
    {
        display: block;
        width: 50px;
        height: 30px;
    }

    .usercp img {width: 50px; height: 30px; border: 0; }
    .usercp a:hover img{visibility:hidden}
</style>
</head>
<body>
    <div class="usercp">
        <a href=""><img src="usercp.png"/></a> 
    </div>
</body>
</html>

Cerberus

Junior Poster

162 posts since Sep 2006

Reputation Points: 27

Solved Threads: 14

4 Years Ago

Thanks again :) got that working in frontpage.

Is there a means to use css so it's not in the head? Because that's where my issue was with changing navbar before, that i couldn't seem to add css into the header (nor headerinclude).
Thank you again :)

karlm

Newbie Poster

16 posts since May 2007

Reputation Points: 10

Solved Threads: 0

4 Years Ago

Thanks again :) got that working in frontpage.

Is there a means to use css so it's not in the head? Because that's where my issue was with changing navbar before, that i couldn't seem to add css into the header (nor headerinclude). Thank you again :)

Yup just copy and paste the style code (delete the style tags completely) into a seperate file and call it something like mystyle.css. Then put the following code into the head tags...

Cerberus

Junior Poster

162 posts since Sep 2006

Reputation Points: 27

Solved Threads: 14

4 Years Ago

Thank you very much Cerberus, if you click my sig, you'll see i have it working :)
thank you again :)

karlm

Newbie Poster

16 posts since May 2007

Reputation Points: 10

Solved Threads: 0

This question has already been solved

You