PDA

View Full Version : Menus/Buttons



webmom
11-30-2005, 03:43 AM
I would like someone to explain to me where to actually put the buttons I want to use on my html page that I want to have the hover effect that is linked to an external style sheet. Do I put just the first button (mouse in on that page and the mouse out button where does it go? I want to custom make my own buttons to have the hover effect. Am I asking this question correctly? I've searched and searced for help on this, but nothing tells you where to put the buttons I make.
Thanks for anyone that can help.

jscheuer1
11-30-2005, 06:37 AM
Where do I put my buttons? I like that, has a nice ring to it, would make a great title for a pop psychology book. Hmm where to begin? Consider that your buttons are in reality just bits of magnetic and/or electrical charge on your disk and/or in memory and/or in the data stream and/or stored on the server. These represent bits of data that when interpreted by certain software represent images. All you want to do is to tell the software where in its interface with the user to represent these images. Some HTML code is the best bootstrap for this in a browser. Something straight forward like:


<img src="button1.gif">

can go anywhere on your page and will get the ball rolling. Using a hover effect generally requires that the image be used as a background for a link (IE requires it be a link, other browsers are less limiting) though, so:


<a class="butt" href="some.html">Link Text</a>

This too, can go anywhere on your page that you like. Now we can have style for the butt class:


.butt {
background-image:url('button1.gif');
display:block;
width:75px;
height:23px;
}

.butt:hover {
background-image:url('button2.gif');
}

The width and height should be that of the image. Other styles can be used as well but, these are the basics. If you need help with external stylesheets and linking them to your page, let me know. The actual images, button1.gif and button2.gif would go in the same directory as the stylesheet they are called from unless you use a path for them on the stylesheet. If you use a path on the stylesheet, it can be absolute like:


background-image:url('http://www.somedomain.com/images/button1.gif')

or relative to the style sheet, like if the stylesheet is in the directory 'styles' off of the root of the site and the buttons are in the directory images off of the root:


background-image:url('../images/button1.gif')