text visible using css

I'm trying to create a webpage where each button when it is rolled over reveals different text on the front page. I used to use Image ready to do this but I'd like to use css. There can be copy on the front page but when a button is rolled over, I want the copy to change to relavant copy.
designaireAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Jason C. LevineNo oneCommented:
Hi designaire,

Are you trying to have a tooltip type of effect or do you want one region to change based on mouseover in another region?

In either case, CSS alone won't really do this.  You will need javascript to make it work.
0
designaireAuthor Commented:
Can you direct me to example javascript code?
0
Jason C. LevineNo oneCommented:
Actually, I take it back.  You can do disjointed rollovers with just CSS:

http://alt-web.com/DEMOS/CSS-Disjointed-Text-Rollover.shtml
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
The Ultimate Tool Kit for Technolgy Solution Provi

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy for valuable how-to assets including sample agreements, checklists, flowcharts, and more!

remorinaCommented:
Hi designaire,

You can also use the example below to show a div which can contain any amount of elements when hovering onto a list buttons



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<style type="text/css">
    body {margin:10px;}
    #wrapper {width:1000px;background:#f2f2f2;margin:0 auto;}
    #leftColumn {float:left;width:100px;}
    ul {margin:0;padding:0;position:relative;overflow:visible;}
    ul li {list-style:none;margin:0;padding:0;}
    ul li a.button:link, ul li a.button:visited {width:63px;height:15px;display:block;text-decoration:none;margin-bottom:10px;}
    ul li.red a.button {background:red url(http://www.golden-orb.com/images/button_range.jpg) no-repeat -229px -4px;}
    ul li.green a.button {background:green url(http://www.golden-orb.com/images/button_range.jpg) no-repeat -229px -60px;}
    ul li.grey a.button{background:gray url(http://www.golden-orb.com/images/button_range.jpg) no-repeat -229px -32px;}
    ul li div {position:absolute;border:solid 1px #333;width:200px;left:150px;top:0;display:none;}
    ul li:hover div {display:block;}
    
</style>
<script type="text/javascript">
    
</script>

</head>
<body>
    <div id="wrapper">
        <div id="leftColumn">
            <ul>
                <li class="green">
                    <a href="#" class="button">&#160;</a>
                    <div>
                        <h2>Example 1</h2>
                        <p>Content EXample here</p>
                    </div>
                </li>
                <li class="red">
                    <a href="#" class="button">&#160;</a>
                    <div>
                        <h2>Example 2</h2>
                        <p>Content EXample here</p>
                    </div>
                </li>
                <li class="grey">
                    <a href="#" class="button">&#160;</a>
                    <div>
                        <h2>Example 3</h2>
                        <p>Content EXample here</p>
                    </div>
                </li>
            </ul>
        </div>
    </div>
</body>
</html>

Open in new window

0
designaireAuthor Commented:
Thanks I like both suggestions. I just realized however that I need it to replace type that already exists. I have a feeling this can't be done.. (I will give credit for what you posted) Maybe with javascipt. I used to do it with imageready but it's type not graphics...thanks.
0
designaireAuthor Commented:
I wanted to split the points between the 2
0
designaireAuthor Commented:
One of these should work, thanks...
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
CSS

From novice to tech pro — start learning today.