HTML and CSS

Javascript / css menu image help, pls?

Please support our HTML and CSS advertiser: PostgreSQL or MySQL? Compare and contrast the two most popular open source databases

Thread Solved

•

Join Date: May 2007

Posts: 16

Reputation: karlm is an unknown quantity at this point

Solved Threads: 0

karlm

Offline

Newbie Poster

Javascript / css menu image help, pls?

Jul 12th, 2007

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.

What is antimisandry?

•

Join Date: Sep 2006

Posts: 162

Reputation: Cerberus is an unknown quantity at this point

Solved Threads: 14

Cerberus

Offline

Junior Poster

Re: Javascript / css menu image help, pls?

Jul 12th, 2007

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

 Help with Code Tags 
 HTML and CSS Syntax (Toggle Plain Text) 
<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>
<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.

•

Join Date: May 2007

Posts: 16

Reputation: karlm is an unknown quantity at this point

Solved Threads: 0

karlm

Offline

Newbie Poster

Re: Javascript / css menu image help, pls?

Jul 12th, 2007

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

What is antimisandry?

•

Join Date: Sep 2006

Posts: 162

Reputation: Cerberus is an unknown quantity at this point

Solved Threads: 14

Cerberus

Offline

Junior Poster

Re: Javascript / css menu image help, pls?

Jul 12th, 2007

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

 Help with Code Tags 
 HTML and CSS Syntax (Toggle Plain Text) 
<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>
<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>

•

Join Date: May 2007

Posts: 16

Reputation: karlm is an unknown quantity at this point

Solved Threads: 0

karlm

Offline

Newbie Poster

Re: Javascript / css menu image help, pls?

Jul 12th, 2007

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

What is antimisandry?

•

Join Date: Sep 2006

Posts: 162

Reputation: Cerberus is an unknown quantity at this point

Solved Threads: 14

Cerberus

Offline

Junior Poster

Re: Javascript / css menu image help, pls?

Jul 12th, 2007

•

Originally Posted by karlm

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...

<link rel="stylesheet" type="text/css" href="mystyle.css" />