Creating mouseover text with HTML 1 Using <SPAN> Tag 2 Using <A> Tag
(1.) Using <SPAN> Tag...................... NO CLICKING
Mouseover text is simple to make.
When you are editing a page, click on <HTML> button on the toolbar.
What you'll want to do is enclose whatever text you'd like to have a mouseover in span tags. those look like this: <span>This is the text I want to have a mousover</span>. You can do this by either finding the text you want in the HTML editor, or by typing it yourself.
To add the mouseover text though, you'll need to take advantage of the span's title attribute. Assigning a value to an attribute looks like this:
<span title="I am hovering over the text">This is the text I want to have a mousover</span>
Note that attribute values are always in quotes.
And voila! You're done. The text should now have a mouseover pop-up. You can see an example below. Spans can also be used to give custom css to a section of text (see the bottom of this page for some brief notes on how this is done).
This is the text I want to have a mouseover
(2.) Using <A> Tag...............NEED TO CLICK
Mouseover text is pretty simple to create. Basically, what you're going to want to do is to create a link with an empty reference attribute (so clicking it doesn't take you anywhere), and use the title attribute to create whatever mouseover text you would like.
To create an empty link, you're going to have to use the google sites html editor (click the button that says <HTML> in the page editor).
the link uses the tag <a>. So a link might look like <a>This is the text I want to show</a>. (ALWAYS REMEMBER TO USE THE CLOSING TAG - in this case, </a>)
But links also need a location, given by the "href" attribute. so to add that, <a href="http://mysite.com">This is a link to my site</a>. (attribute values are ALWAYS in quotes). We don't want the link to actually take people anywhere, so instead of providing the href attribute with an actual url, just use empty quotes: " ". So: <a href=" ">This is a link to my site</a>.
We now have our link. to add mouseover text, just use the "title" attribute, like so: <a href=" " title="This is some text I want to display.">This link has mouseover text.</a> (see the next line to check this out in action.)
This link has mouseover text.
The unfortunate result of this is that your link will have the same styles as all the rest of the links on your site (e.g. a different background color or having blue colored text). However, we can override this with the "style" attribute, which allows you to add inline CSS to virtually any HTML tag. To change the background color to white, the text color to black, and remove the underline from the link we'll write:
<a href=" " title="This is some text I want to display." style="background-color:#FFFFFF;color:#000000;text-decoration:none">This link has mouseover text.</a>
Notice that the color attributes (backgroundcolor for...the background color, and color for the text color) use hexadecimal to determine the color. In general, the first two hex characters represent the amount of red in the color, the second two the green, and the final pair represent how blue the color is, RGB. For a full reference of colors and their hex values, see http://www.december.com/html/spec/color.html
And that's it! We now have a sentence with text that appears when you hover your mouse over it, and doesn't look like a link. Mouseover the sentence below to check out the final product.
This link has mouseover text.
MAKE mouseover word in one color different from URL link.
CANON in RED..... <p><a style="background-color: #ffffff; color: #990000; text-decoration: none;" title="A biblical canon is a list of texts which a particular religious community regards as authoritative scripture." href="https://my.photodeck.com/medias/">canonical</a></p>
EVANGELIST.....<p><a style="background-color: #ffffff; color: #990000; text-decoration: none;" title="A biblical canon is a list of texts which a particular religious community regards as authoritative scripture." href="https://my.photodeck.com/medias/">Evangelist</a></p>
ARIAN......<p><a style="background-color: #ffffff; color: #990000; text-decoration: none;" title="A biblical canon is a list of texts which a particular religious community regards as authoritative scripture." href="https://my.photodeck.com/medias/">Arian</a></p>
APOSTLE....<p><a style="background-color: #ffffff; color: #990000; text-decoration: none;" title="A biblical canon is a list of texts which a particular religious community regards as authoritative scripture." href="https://my.photodeck.com/medias/">Apostle</a></p>
DISCIPLE.....<p><a style="background-color: #ffffff; color: #990000; text-decoration: none;" title="A biblical canon is a list of texts which a particular religious community regards as authoritative scripture." href="https://my.photodeck.com/medias/">disciple</a></p>