Probably a nooby HTMl/CSS question question, but still....

[suarve]

Hi,

i have noticed on a few sites that upon clicking a link some text is revealed below e.g. some detail about a link. I'm not sure how this is done tbh. Also is the method (whatever it may be) web standards complaint, as i would like to implement this on a site that must work/look the same in the major browsers.

Thanks for any info.

 

[xirokx]

u got an example?

 

[gord]

After clicking the link? sounds odd. I believe you can apply alt text to links to describe what they do but that would just be when you hover over the link with the mouse.

 

[Mr_L]

The easiest way is to add the title attribute to the link. An example being:

<a href="your URL" title="your description">Link Text</a>

I'm not sure if you're after a more advanced tooltip, though. If you are then just google for it, there are plenty of tutorials for it.

 

[Augmented]

If I'm thinking of the right thing, then it's usually done using javascript in some manner - an event handler is added to the bit you want 'clickable'. This in turn will toggle the display of the other element with the text in - either dynamically adding and removing it from the DOM, or toggling the CSS display/visibility property.

Yes, it is "web standards complaint".

Couple of examples (google something like "unobtrusive javascript expand collapse"):
http://www.onlinetools.org/tools/domcollapse/index.html
http://www.weberdev.com/get_example-4263.html

 

[suarve]

If I'm thinking of the right thing, then it's usually done using javascript in some manner - an event handler is added to the bit you want 'clickable'. This in turn will toggle the display of the other element with the text in - either dynamically adding and removing it from the DOM, or toggling the CSS display/visibility property.

Yes, it is "web standards complaint".

Couple of examples (google something like "unobtrusive javascript expand collapse"):
http://www.onlinetools.org/tools/domcollapse/index.html
http://www.weberdev.com/get_example-4263.html

excellent link, exactly what i had in mind! esreality gave me the idea. E.g. click the "quake 4 attendies" link from this article

 

[Augmented]

Yep, that link just changes the display property of a specific element from 'none' to 'block'. Not the cleanest implementation, but should work in the overriding majority of modern browsers .

Markup:

<a onclick="flip('results1'); return false;" href="#">Quake 4 Attendees</a>
...
<div id="results1" style="display: none;"></div>

JS:

function flip(rid)
{
current = (document.getElementById(rid).style.display == 'none') ? 'block' : 'none';
document.getElementById(rid).style.display = current;
}

 

[Mr_L]

Pfft, sounded like tooltips to me!

I've used domCollapse on a little website in my sig - web design resources. It's very easy to implement, that's the one I'd go for.