PDA

View Full Version : Show and Hide Text When A link clicked on

tucats
08-07-2003, 11:41 PM
I need some help. I have been looking around on a couple javascript sites but am not sure if it is javascript or just plain html. I have seen on a couple sites that I have been to people have it where you can click on a link and text will appear right next to the link. The text actually appears in front of you. Does anyone know how to do this or if it is a javascript can I please have it? Thanks
Graeme Hackston
08-08-2003, 01:27 AM
There are dozens of ways to do this. See if this one does what you need.

<html>
<head>
<title></title>
<style type="text/css">
.link {
color: blue;
}

.link-over {
color: red;
}

.link, .link-over {
cursor: pointer;
cursor: hand;
}

#hidden-text {
visibility: hidden;
}
</style>
<script type="text/javascript">
function go(el_id) {
document.getElementById(el_id).style.visibility = 'visible'
}
</script>
</head>
<body>
<span class="link" onmouseover="this.className='link-over'" onmouseout="this.className='link'" onclick="go('hidden-text')">text</span>
<span id="hidden-text">hidden text</span>
</body>
</html>
tucats
08-08-2003, 01:56 PM
Thanks, this is what I was looking for. Do you know how to make it so when you mouseout the text goes hidden again? I also can't use the text decoration script, <style type=text/css>
A:active { COLOR: #FFFF00; TEXT-DECORATION: none;}
A:hover { COLOR: #FFFF00; TEXT-DECORATION: none;}
</style>

when I use this code. Is there a way to put in text decoration by the red and blue link codes in the hidden text script? thanks.
Graeme Hackston
08-08-2003, 10:33 PM
Hi tucats

Just for your info that's not a script. When someone says "script" they're usually reffering to JavaScript or VBScript.

It's a cascading style sheet (CSS). It says all the <a> tags on the page (links) are to be that colour when clicked on (active) or moused over (hover) and not have underlines (text-decoration: none) I didn't use <a> tags, I used <span> tags.

<span> tags don't act the same as <a> tags with CSS so I used JavaScript to make them act like <a> tags. I changed the colours in the CSS in the example below to match the colours in the CSS you posted.

.link means when the mouse isn't over the <span>

.link-over means when the mouse is over the <span>

If I'm understanding you correctly you can change the colours in the CSS to anything you want.

Let me know if this is clear as mud :)

<html>
<head>
<title></title>
<style type="text/css">
.link {
color: #ffff00;
}

.link-over {
color: #ffff00;
}

.link, .link-over {
cursor: pointer;
cursor: hand;
}

#hidden-text {
visibility: hidden;
}
</style>
<script type="text/javascript">
function go(el_id, off) {
var el = document.getElementById(el_id).style
if (off) {
el.visibility = 'hidden'
} else {
el.visibility = 'visible'
}
}
</script>
</head>
<body>
<span class="link" onmouseover="this.className='link-over'" onmouseout="this.className='link';go('hidden-text','off')" onclick="go('hidden-text')">text</span>
<span id="hidden-text">hidden text</span>
</body>
</html>
Graeme Hackston
08-08-2003, 10:48 PM
Here's another example where I added a different colour when the span is clicked.

Notice the events in the <span> tag (onmouseover, onmouseout and onclick) Each one uses JavaScript to change the class name of the span. The classes are in the CSS (.link, .link-over and .link-clicked ). I used "link" in the class names because they are acting like a link. You can change those names to anything that suits you. As long as you change them in the CSS and in the span tag.

<html>
<head>
<title></title>
<style type="text/css">
.link {
color: #ffff00;
}

.link-over {
color: #ffff00;
}

.link-clicked {
color: red;
}

.link, .link-over, .link-clicked {
cursor: pointer;
cursor: hand;
}

#hidden-text {
visibility: hidden;
}
</style>
<script type="text/javascript">
function go(el_id, off) {
var el = document.getElementById(el_id).style
if (off) {
el.visibility = 'hidden'
} else {
el.visibility = 'visible'
}
}
</script>
</head>
<body>
<span class="link" onmouseover="this.className='link-over'" onmouseout="this.className='link';go('hidden-text','off')" onclick="this.className='link-clicked';go('hidden-text')">text</span>
<span id="hidden-text">hidden text</span>
</body>
</html>
tucats
08-08-2003, 11:08 PM
Thanks a lot for clearing all this up. I understand it now. Thanks!!
Graeme Hackston
08-08-2003, 11:10 PM
Great :)