Changing Text with mouse

  Boy Zone 14:32 10 Nov 2003

Hi to all,
Im very new to web design. I'm trying to use Dreamweaver MX.
What I want to do is, create text and when the mouse goes over the text it changes colour, as in a navigation bar.
Would appreciate your help.
Then do I put the text into layers or frames, which is the best, or some other way?

  Talented Monkey 17:03 10 Nov 2003

Best way to do this is to use CSS cascading style sheets. This isn’t as difficult as it sounds. I haven’t used dreamweaver or front page etc, so can not comment on its use within them, but I am sure someone said there is a style sheet option.

click here and take a look

This is a good example of CSS to change your link and mouse over style. It shouldn’t be too hard to work out what is going on, and can be easiliy changed to create totaly different effects, you can even create 3d buttons which can appear to light up or depress when moused over using this.

Essentially you have all these values saved in a separate text file say style.css and have it linked to it in the <head> part of the HTML code.
<link type="text/css" rel="stylesheet" href="/style/style.css">

then when you want to have some text or other entity such as a table to take on the appearance you simple specify it as <a class=”mainnav” href etc…> where class=” the name you require.

Of course you can have a “defult “ setting by omitting the class name: eg. For <h1> tag

Background : #fffff0;
Color : #663300;

now you can just specify <h1>some text</h1> without having to call a class.

Ithink I will stop here or I will turn this into a lecture and i think you get the idea. I would recommend that people do try to use CSS as its far much quicker and efficient way to create menus and other layout tags. Also alot of the style elements are being made obselete, such as font=" " and bgcolor=" " etc. you normally put within a tag. eg <b color="red">

Anyway i hope this gives you some insight. dont hesitate to ask anything, no matter how silly.

  Boy Zone 17:24 10 Nov 2003

Thanks for your reply,
Are you sure this is in english? I am NOT ofay with CSS coding so this is another learning curve for me.
I would though really appreciate as much help as possible.

  Ben Avery 18:57 10 Nov 2003

In between your <HEAD> tags paste thi following code and change colour & font accordingly:


<style type = text/css>
all.clsMenuItemNS{font: bold x-small Verdana; color: white; text-decoration: none;}
.clsMenuItemIE{text-decoration: none; font: bold xx-small Verdana; color: white; cursor: hand;}
A:hover {color: red;}

********************END CODE**********************

Change "A:hover {color: ?????;}" to your colour and experiment with fonts.


  Talented Monkey 19:02 10 Nov 2003

Ok so I wrote it in a bit of a techno babble way. For all those still scratching their heads Ill try better:

There comes a time when you are fed up with just using the standard font sizes and colours and table appearance on your webpage black text on white isn’t quite what we want. Therefore a whole host of commands were created to change the appearance and format of these.

Lets look at the humble <p> tag as its rather simple and easy creature to use. Here is a simple line of HTML code:

<p>This is a line of text </p>

Not very exciting is it. Now we can add a few changes to it such as change its colour, most people will be inclined to use something like

<font color=”#ff0000”>
<p> This is red </p>

<font color=”#00ff00”>
<p> this is green</p>

This is rather messy and ugly way of doing things. Just take a look at table <table><Tr><td> tags. You can insert all sorts of text and layout settings within these, such as alignment, colors for fonts, background, borders , and so on . Take a look at some code spewed out by Front Page or Dreamweaver and you will see all this for yourself.

Imagine a more effective , simpler and organized way of creating all these different effects and formats, such as writing some simple instructions for different colors and sizes, then simply telling a HTML tag to use those settings. Well you can. Its CSS.

It is possible to put the CSS instructions in the HTML, but to keep things tidy and for when you can end up with hundreds of lines, we use a separate file, nothing special, you can use a notepad file called style.css if you wish.

back on to the above example. In the file style.css, simply write the following into it: {
background : transparent;
color : #ff0000;
background : transparent;
color : #00ff00;

and then save it, We now have to tell the HTML file where to find all its text and layout instructions, or in otherwords the CSS file we just created. We do this by putting the following line of code somewhere at the top of the HTML code between the <head> </head> tags:
<link type="text/css" rel="stylesheet" href="style.css"> Where href is the path and filename to where your css file was uploaded.

Now we can change all our colours easily in the HTML code and remove the <font> </font> tags:

<p class=”red”> THIS line is RED </p>
<p class=”green”>This line is green</p>

There isn’t that easy! Non of this <font color= messing about

Imagine that you have 50 web pages all with red and green text, you decide that the red is too bright and want to tone it down. Prepare for a few hours of text editing! But wait we used <p class=”red”> through out the 50 web pages.. that’s great news! All we do is go into style.css and change the { color : #ff0000 to #cc3300 and hey presto, all your 50 web pages are now changed to the new colour!

Now once you get used to this simple way, you can start adding allsorts of amazing things, such as font types , padding, borders etc.

Now lets look at this bit again{
background : transparent;
color : #00ff00;

take the The p refers to the tag name, in this case <p> then we follow it with a full stop, followed by any name you like, but one to describe what it does. In this case green. When we use the html code <p class=” “ we simply put te name that we want the text to become, so <p class=”green”> will turn text to green.

Look at our link menu text again. click here first line A.mainnav A refers to the tag <A > and the name mainnav is the class name ie <a class="mainnav" > all the lines create the coloured background panel, font size, colours etc..

However, we need to specify a bit more than that, we need to tell the code what to do for visited , hovered and active. This is where the four smaller sections begin starting with A.mainnav:link all I have done is told it to change colour, hence only background and color exist, howeer if you want you can tell it to change all sorts of things, including changing font size background size, even a background picture!

Hope this makes it clearer.. if not dare i say tough luck !

  Ben Avery 19:04 10 Nov 2003


<style type = text/css>

A:hover {color: red;}


********************END CODE**********************

Much simpler and this will preserve your current font and size. For more variety in colour, use a Hex number (to find this out, browse dreamweaver colour chart and look for number in format of "#xxxxxx" where 'x' represents a number.


  Ben Avery 19:05 10 Nov 2003

Didn't mean ignore talented monkey, just me!



  PurplePenny 23:11 10 Nov 2003

I've not looked through this tutorial on CSS but it might help:

click here

If that one is no good just do a search - you'll find lots more online tutorials.

It really is worth learning how to create and use cascading style sheets for two reasons. The first is that using tags like <font> within the HTML is no longer considered good practice and the second is that it is so much easier to do it all in one place. As Talented Monkey says you change one bit of code in the style sheet instead of every single instance on every single page.


This thread is now locked and can not be replied to.

Elsewhere on IDG sites

Galaxy Note 8 vs iPhone X

This is what design agencies will look like in 2032

How to update iOS on iPhone or iPad

WhatsApp : comment lire vos messages sans que l’expéditeur le sache