Ad:

HTML and CSS Discussion Thread
Marked Solved
Views: 2277

Jul 12th, 2007

Javascript / css menu image help, pls?

Expand Post »

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.

Similar Threads

css menu in ie7 : a:hover behaviour only on text not on the whole box in HTML and CSS
Selectively Printing only Certain Divs (javascript/css question) in JavaScript / DHTML / AJAX
New Language combines: Asynchronous JavaScript+CSS+DOM+XMLHttpRequest in JavaScript / DHTML / AJAX

karlm

Reputation Points: 10

Solved Threads: 0

Newbie Poster

Offline

16 posts
since May 2007

Permalink

Jul 12th, 2007

Re: Javascript / css menu image help, pls?

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

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.

Cerberus

Reputation Points: 27

Solved Threads: 14

Junior Poster

Offline

162 posts
since Sep 2006

Permalink

Jul 12th, 2007

Re: Javascript / css menu image help, pls?

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

Reputation Points: 10

Solved Threads: 0

Newbie Poster

Offline

16 posts
since May 2007

Permalink

Jul 12th, 2007

Re: Javascript / css menu image help, pls?

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

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>

Cerberus

Reputation Points: 27

Solved Threads: 14

Junior Poster

Offline

162 posts
since Sep 2006

Permalink

Jul 12th, 2007

Re: Javascript / css menu image help, pls?

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

Reputation Points: 10

Solved Threads: 0

Newbie Poster

Offline

16 posts
since May 2007

Permalink

Jul 12th, 2007

Re: Javascript / css menu image help, pls?

Click to Expand / Collapse Quote 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" />

Cerberus

Reputation Points: 27

Solved Threads: 14

Junior Poster

Offline

162 posts
since Sep 2006

Permalink

Jul 12th, 2007

Re: Javascript / css menu image help, pls?

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

thank you again

Last edited by karlm; Jul 12th, 2007 at 11:16 pm.

karlm

Reputation Points: 10

Solved Threads: 0

Newbie Poster

Offline

16 posts
since May 2007

This thread is solved

Either the thread starter or a moderator has marked this thread as solved. You can most likely trust the responses and answers given. There is most likely no reason for any further responses to be posted here. If you have a related question, please start a new thread in this forum instead.

This thread is more than three months old

No one has posted to this discussion for at least three months. Please let old threads die and do not reply to them unless you feel you have something new and valuable to contribute that absolutely must be added to make the discussion complete. Otherwise, please start a new thread in this forum instead.

Previous Thread in HTML and CSS Forum Timeline: Stupid CSS problem...

Next Thread in HTML and CSS Forum Timeline: Doctype difficulties

DaniWeb Message

Cancel Changes

User Name
Password