PDA

View Full Version : Text change Rollover



rickyd5117
Feb 16th, 2010, 07:28 PM
I am creating some favicons for a class project with some mottos and text. I have gotten the color part down where you can roll over the text and change the color, however I was wondering if anybody could help me with this part. When you roll over the text with the mouse I want the text to be able to read something different. Can anybody please help me with this? I would really appreciate it. Instead of saying Prevail the Light on top I would like for it to say "prvl the lght" same style for the bottom text.

Here is the HTML code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />

<link rel="shortcut icon" type="image/ico" href="img/favicon.ico" />

<title>Prevail the light</title>

<style type="text/css" media="all">
@import url("css/modern.css");
</style>




<body>
<div id="center">

<ol id="emblem">



<a href="" class="colc" "> Prevail the Light </a>


<li>
<div id="favicon">
<ul>
<li class="yellow"></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li class="yellow"></li>
<li class="yellow"></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li class="yellow"></li>
</ul>
<ul>
<li></li>
<li class="yellow"></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li class="yellow"></li>
<li class="yellow"></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li class="yellow"></li>
<li></li>
</ul>
<ul>
<li></li>
<li></li>
<li class="yellow"></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li class="yellow"></li>
<li class="yellow"></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li class="yellow"></li>
<li></li>
<li></li>
</ul>
<ul>
<li></li>
<li></li>
<li></li>
<li class="yellow"></li>
<li></li>
<li></li>
<li></li>
<li class="yellow"></li>
<li class="yellow"></li>
<li></li>
<li></li>
<li></li>
<li class="yellow"></li>
<li></li>
<li></li>
<li></li>
</ul>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li class="yellow"></li>
<li></li>
<li></li>
<li class="yellow"></li>
<li class="yellow"></li>
<li></li>
<li></li>
<li class="yellow"></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li class="yellow"></li>
<li></li>
<li class="yellow"></li>
<li class="yellow"></li>
<li></li>
<li class="yellow"></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li class="yellow"></li>
<li class="yellow"></li>
<li class="yellow"></li>
<li class="yellow"></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<ul>
<li class="yellow"></li>
<li class="yellow"></li>
<li class="yellow"></li>
<li class="yellow"></li>
<li class="yellow"></li>
<li class="yellow"></li>
<li class="yellow"></li>
<li class="yellow"></li>
<li class="yellow"></li>
<li class="yellow"></li>
<li class="yellow"></li>
<li class="yellow"></li>
<li class="yellow"></li>
<li class="yellow"></li>
<li class="yellow"></li>
<li class="yellow"></li>
</ul>
<ul>
<li class="yellow"></li>
<li class="yellow"></li>
<li class="yellow"></li>
<li class="yellow"></li>
<li class="yellow"></li>
<li class="yellow"></li>
<li class="yellow"></li>
<li class="yellow"></li>
<li class="yellow"></li>
<li class="yellow"></li>
<li class="yellow"></li>
<li class="yellow"></li>
<li class="yellow"></li>
<li class="yellow"></li>
<li class="yellow"></li>
<li class="yellow"></li>
</ul>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li class="yellow"></li>
<li class="yellow"></li>
<li class="yellow"></li>
<li class="yellow"></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li class="yellow"></li>
<li></li>
<li class="yellow"></li>
<li class="yellow"></li>
<li></li>
<li class="yellow"></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li class="yellow"></li>
<li></li>
<li></li>
<li class="yellow"></li>
<li class="yellow"></li>
<li></li>
<li></li>
<li class="yellow"></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<ul>
<li></li>
<li></li>
<li></li>
<li class="yellow"></li>
<li></li>
<li></li>
<li></li>
<li class="yellow"></li>
<li class="yellow"></li>
<li></li>
<li></li>
<li></li>
<li class="yellow"></li>
<li></li>
<li></li>
<li></li>
</ul>
<ul>
<li></li>
<li></li>
<li class="yellow"></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li class="yellow"></li>
<li class="yellow"></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li class="yellow"></li>
<li></li>
<li></li>
</ul>
<ul>
<li></li>
<li class="yellow"></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li class="yellow"></li>
<li class="yellow"></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li class="yellow"></li>
<li></li>
</ul>
<ul>
<li class="yellow"></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li class="yellow"></li>
<li class="yellow"></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li class="yellow"></li>
</ul>
</div>
</li>

<li>
<a href="" class="colc" " >The light shines so bright<br/>In the dark sky above us
<br/>Revealing the stars </a>


</li>

</ol>





</div>
</body>
</html>

Here is the CSS code

* {
margin: 0;
padding: 0;
list-style: none;
}

a:hover span.old {
display: inline;
}

a:hover span.new {
display: none;
}

a:focus span.click {
display: inline;
}

a:active span.old {
display: none;
}

.colc {
font-family: san-serif;
font-size: 25px;
color: #000;
text-decoration: none;
background-color: #FF0 ;
}

.colc:hover {
font-family: san-serif;
size: 25px;
color: #FF0;
cursor: help;
background-color: #000 ;
}


.colc2 {
font-family: san-serif;
font-size: 20px;
color: #000;
text-decoration: none;
background-color: #FF0 ;
}

.colc2:hover {
font-family: san-serif;
size: 25px;
color: #FF0;
cursor: help;
background-color: #000 ;
}


#center {
position: relative;
width: 60em;
height: auto;
margin: 0 auto;
text-align: center;
}

#emblem {
position: relative;
width: 30.25em;
height: auto;
}

#emblem li {
position: relative;
}

#motto {
position: relative;
padding: 1.5em 0;
}

#motto h1 {
font: normal 1.5em/1em "times new roman";
}

#favicon li {
float: left;
width: 1.875em;
height: 1.875em;
background-color: #000;
}

.yellow {
background-color: #ff0 !important;
}

Excavator
Feb 16th, 2010, 07:53 PM
Hello rickyd5117,
You should be able to hide some text in a span that becomes visible on :hover. Here's a site that shows how - http://www.communitymx.com/content/article.cfm?page=3&cid=4E2C0

When posting code in the forum, please use the code tags, &#91;code&#93;&#91;/code&#93; - available with the # button in the post edit window.
This will wrap your code in a scroll box which greatly helps the readability of your post.
You can go back and add them to your original post.