website design - mouseover color change

TAYCEOMAG

New Member
first post :) i am looking for a quick rundown of the idea/structure of these "mouseover changing" website designs people are using now days. for example, lets say on a furniture website the furniture set pictured has red fabric, but when you drag across the colors below it with your mouse the furniture fabric changes to the color your mouse is on. everyone has seen this i just cant seem to find an answer to how it is done and the software used. thankss
 

alfonsamayor

New Member
hi,



Using Dreamweaver, open the web page containing the link you want to modify.

Click "Format | CSS Styles | New..." from the menu. That is, click the "Format" menu at the top of the Dreamweaver window. When a menu appears, click the "CSS Styles" line. This will expand a submenu. Click the "New..." item in that submenu.

A dialog box entitled "New CSS Rule" will appear. Click the arrow beside the drop down box under "Selector Type". A drop down box will appear. Click the line "Compound (based on your selection)".

Click the drop down box under "Selector Name" to expand it. Click the "a:hover" line in the list that appears. If you don't see it, scroll down till you find it. Dreamweaver will fill the field with the words "a:hover". (If it doesn't, it means you didn't click the correct spot in the drop down box. Try again.)

In the "Rule Definition" section, you are given a few choices. If you want the rollover effects you are creating here to apply only to one web page, that is, the page you're modifying, select "(This document only)" from the drop down menu. If you want it to apply to all the web pages on your website, and you've used my main Dreamweaver tutorial series to create your site, you should be able to see a line that says "twoColLiqLtHdr.css" in the drop down menu. This is the main CSS style sheet for your entire site that Dreamweaver created for you in the first chapter. Select it.

Click the "OK" button.

A new dialog box, entitled either "CSS Rule Definition for a:hover" or "CSS Rule Definition for a:hover in twoColLiqLtHdr.css" (the exact title is different depending on whether you chose to apply to rule to your entire site or just the web page you're changing), will appear.

The dialog box will give you the appearance of links when a mouse is hovering over them. In particular, you can change the font (the "Font-family" field), the font size (the "Font-size" field), whether you want the link to appear in bold (the "Font-weight" field) or italics (the "Font-style" field), have an underline (the "underline" checkbox), etc. You can also change the colour of the text itself, using the "Color" box (just click the square box beside "Color" to open the colour picker, from which you can choose a different colour for the text).

To change the background colour of the link, that is, the colour that appears underneath the text, click the "Background" line in the leftmost column of the dialog box. When you do that, you should be able to see a "Background-color" square box which you can click to reveal the colour picker.

When you've finished changing the hover colours, click the "OK" button. The dialog box will disappear. Remember to save your changes by clicking "File | Save All" from the menu. Notice I said to use the "Save All" item from the File menu and not the usual "Save". That is because when you made those colour changes, Dreamweaver modified your CSS file as well, so simply clicking "File | Save" will not preserve all your changes.
 

brpcraig

New Member
JavaScript is definitely the way to go here. CSS will be a little bit more difficult for someone new to web design.
 
Top