Web Hosting Talk : Web Hosting Main Forums : Web Design and Content : Rollover on buttons

[demomen]

Hi, I would like to make these buttons I have on my site like the
ones on the site below how I do that:

http://premium.uploadit.org/musicmatters/rolohhw.JPG


How do I make them do this - the red rollover ..

http://www.hostingmetro.com/

[rcmv]

There are several ways to accomplish this task. You can use a Javascript rollover script (do a search on google for prewritten ones) You can also use CSS to do this.

I would use CSS personally and do something like this.


Step 1. Cut out one of your menu buttons and remove the text.
Step 2. Save this as menubutton.gif or menubutton.png
Step 3 Change the background of this image to the new color
you want (Red?) and save this image as
menubuttonover.gif (png)
Step 4. Create a CSS file with at least the following code in it

Disclaimer: this code has not been tested or validated in any way.

/* This is what the button will look like when the user has selected a link . ( lets the user know where they are ) ( Will be red background in this case)*/
.navhere
{
display: inline ;
padding: 0 8px 0 0 ; /* change numbers */
margin: 0 0 0 0 ;
background:URL(path/to/menubutton1.jpg) #848484;
background-repeat: no-repeat ;
height:auto ;
width:180px ; /* change width */
font-weight: bold ;
font-size: 12px ;
font-family: arial, verdana, sans-serif ;
color:red ; /* this is the text color */
text-decoration:none ;
text-align:center ;
}

.navbutton
{
display: inline ;
padding:0 12px 0 0 ;
margin: 0 0 0 0 ;
background: URL(path/to/menubutton.jpg) #848484;
background-repeat: no-repeat ;
height:auto ;
width:180px ; /* adjust width */
font-weight: bold ;
font-size: 12px;
font-family: arial, verdana, sans-serif ;
color: black ;
text-decoration:none ;
text-align:center;
}

a.navbutton:visited
{
display: block ;
padding:0 12px 0 0 ;
margin: 0 0 0 0 ;
background-image: URL(path/to/menubutton1.jpg)
#848484 ;
background-repeat: no-repeat ;
height:auto ;
width:180px ;
font-weight: bold ;
font-size: 12px;
font-family: arial, verdana, sans-serif ;
color: black ;
text-decoration:none ;
text-align:right ;
}

a.navbutton:hover
{
display: inline ;
padding:0 12px 0 0 ;
margin: 0 0 0 0 ;
background: URL(path/to/menubutton1.jpg) #848484 ;
background-repeat: no-repeat ;
height:auto ;
width:180px ;
font-weight: bold ;
font-size: 12px;
font-family: arial, verdana, sans-serif ;
color: green ;
text-decoration:none ;
text-align:center ;
text-transform: uppercase ;
}

Step 5. Use the following code in your html file inside a table.

NOTE: you will have to change the
class="navhere" for each page, eg it is currently set for the home page.
For the About Us page you would have to change the code from class="navbutton" to class="navhere" and also change the code in the home link from class="navhere" to class="navbutton"

<td >
<!-- Left Side Navigation Buttons in cell -->
<a href="home.htm" class="navhere">Home</a>
<A HREF="about.htm"class="navbutton">About Us</A>
<A HREF="support.htm" class="navbutton">Support</A>
<A HREF="cart.htm" class="navbutton">Your Cart</A>
<A HREF="services.htm" class="navbutton">Services</A>
<A HREF="contact.htm" class="navbutton">Contact Us</A>
</td>

HTH, if not then post again and I will offer any help I can
cheers
RCMV

[Pixabit]

Or you can and SHOULD use dreamweaver for all your HTML needs and it will do it for you. Imageready built in with photoshop can accomplish this as well... but I suggest dreamweaver, use it, he is your friend.

[sonicgroup]

Don't take this the wrong way, PIXABIT, but that's the worst advice I've ever heard.

If you're going to make a website, you should understand HTML and know how to make it work.

If you're going to make a website, you should make it accessible and cross-platform.

If you're going to make a website that is the above, you should know the standards.

If you've done this for any length of time, you'd know that ImageReady, Dreamweaver, FrontPage, and any other WYSIWYG HTML editor inserts extraneous and useless tags. You also know that it doesn't make valid code.

These are all important things to recognize and work for when designing a website. It may be harder, but you will have a website that works in any browser, on any platform, and is accessible.

[Pixabit]

75% of the code for a rollover is javascript - if you have the time to go out and learn the entire javascript language to accomplish this task, then go for it

Sonic,

Dreamweaver is now an industry standard. It will save you time and it is easy to use. Dreamweaver inserts the code for you, rather than looking up one and inserting it. You can then modify the code if you would like. Using dreamweaver can be used as just a plain html editor, like notepad, which is what I use it for. And for special things like rollovers, it has a special function built in. Dreamweaver becomes more validated with each release. To call it's code unvalid is just silly. And if you were familiar with the program, it does not add extraneous code.

How is this bad advice? he asked for a way, so I gave him the easiest/industry standard. Imageready is only bad when slicing entire websites in it, and keeping the html page that way.

I know for a fact from a personal friend at 2advanced.com, their entire company uses dreamweaver and they create world class websites for some of the biggest companies in the world.

If he asked for a specific Javascript I would have probably given it to him along with my same dreamweaver advice.

He didn't ask for all the things you listed, cross browser, any platform etc... even though the dreamweaver code would work just fine as the program has adapted nicely to all internet needs.

You are right though, hand coding should be learned! It is like bunting in baseball. It is a lost art, that should be used more often and can be vital to certain circumstances.

[D4hosting]

a good place i saw a long time ago was Ozones:

ozones dot com

he is from sweden i think, and does tons of graphic work and web programming, lots of tutorials on his site.

[sonicgroup]

I am familiar with Dreamweaver. It slows me down. But that's beside the point.

If you want rollover code that is compliant, fast, and works on anything, I can show you how to do it in less than 8 lines of code, versus Dreamweaver's 3-4 functions, each with that much or more code.

My point is that Dreamweaver is good for some things, but, look at it this way:

If you're doing business on the web, you want to make your site available to as many potential customers as possible. That means making allowances for standards, cross-platform, and accessibility. Dreamweaver does not handle these things very well. You'll need to go back and hand-edit the code it produces in order to have these things.

To my mind, that takes almost as long as doing it all from scratch in a text editor.

WYSIWYG editors are one of the biggest reasons (aside from IE) that web standards is such a joke right now. When anyone can pump out a website in 30 minutes in Dreamweaver that works in IE, nobody bothers to think about the other points I've made.

[demomen]

Originally posted by rcmv
There are several ways to accomplish this task. You can use a Javascript rollover script (do a search on google for prewritten ones) You can also use CSS to do this.

I would use CSS personally and do something like this.


Step 1. Cut out one of your menu buttons and remove the text.
Step 2. Save this as menubutton.gif or menubutton.png
Step 3 Change the background of this image to the new color
you want (Red?) and save this image as
menubuttonover.gif (png)
Step 4. Create a CSS file with at least the following code in it

Disclaimer: this code has not been tested or validated in any way.

/* This is what the button will look like when the user has selected a link . ( lets the user know where they are ) ( Will be red background in this case)*/
.navhere
{
display: inline ;
padding: 0 8px 0 0 ; /* change numbers */
margin: 0 0 0 0 ;
background:URL(path/to/menubutton1.jpg) #848484;
background-repeat: no-repeat ;
height:auto ;
width:180px ; /* change width */
font-weight: bold ;
font-size: 12px ;
font-family: arial, verdana, sans-serif ;
color:red ; /* this is the text color */
text-decoration:none ;
text-align:center ;
}

.navbutton
{
display: inline ;
padding:0 12px 0 0 ;
margin: 0 0 0 0 ;
background: URL(path/to/menubutton.jpg) #848484;
background-repeat: no-repeat ;
height:auto ;
width:180px ; /* adjust width */
font-weight: bold ;
font-size: 12px;
font-family: arial, verdana, sans-serif ;
color: black ;
text-decoration:none ;
text-align:center;
}

a.navbutton:visited
{
display: block ;
padding:0 12px 0 0 ;
margin: 0 0 0 0 ;
background-image: URL(path/to/menubutton1.jpg)
#848484 ;
background-repeat: no-repeat ;
height:auto ;
width:180px ;
font-weight: bold ;
font-size: 12px;
font-family: arial, verdana, sans-serif ;
color: black ;
text-decoration:none ;
text-align:right ;
}

a.navbutton:hover
{
display: inline ;
padding:0 12px 0 0 ;
margin: 0 0 0 0 ;
background: URL(path/to/menubutton1.jpg) #848484 ;
background-repeat: no-repeat ;
height:auto ;
width:180px ;
font-weight: bold ;
font-size: 12px;
font-family: arial, verdana, sans-serif ;
color: green ;
text-decoration:none ;
text-align:center ;
text-transform: uppercase ;
}

Step 5. Use the following code in your html file inside a table.

NOTE: you will have to change the
class="navhere" for each page, eg it is currently set for the home page.
For the About Us page you would have to change the code from class="navbutton" to class="navhere" and also change the code in the home link from class="navhere" to class="navbutton"

<td >
<!-- Left Side Navigation Buttons in cell -->
<a href="home.htm" class="navhere">Home</a>
<A HREF="about.htm"class="navbutton">About Us</A>
<A HREF="support.htm" class="navbutton">Support</A>
<A HREF="cart.htm" class="navbutton">Your Cart</A>
<A HREF="services.htm" class="navbutton">Services</A>
<A HREF="contact.htm" class="navbutton">Contact Us</A>
</td>

HTH, if not then post again and I will offer any help I can
cheers
RCMV

Thanks, I will try this out another day

[the_pm]

75% of the code for a rollover is javascript - if you have the time to go out and learn the entire javascript language to accomplish this task, then go for it

One of the great faults of Dreamweaver (amongst the many previously listed by sonicgroup) is that it relies solely on JavaScript for its rollover functions, when in nearly all cases a CSS equivalent exists that can do the job more universally with astonishingly more efficient code.

Not to mention Dreamweaver's JavaScript is heinously bloated, even when a JS solution is necessary. The only reason it looks difficult to do is because Dreamweaver makes it much more difficult than it really is.

But these are the pieces you don't learn when you come to rely on Dreamweaver. You won't run a very fast race if you train on crutches...

[James K]

Dreamweaver is in no way the industry standard. It may be the standard in this forum, but this does not reflect the industry.