Small icon to indicate more info available is needed...

How do I indicate that a click will open a window with more information?

[tolachi]

I am one of those people that thinks that the more information somebody has about a product the more likely they are to buy it. Because of that, I have linked many key terms to little popup windows that elaborate on the subject. For example, when the phrase plated widget shows up in the text we link to a page that explains the plating process, the platings available, and any pros and cons. I want to bring attention to these links and make it obvious that if they are clicked on they will present the curious with more information. Any suggestions for the appropriate image in this situation? I'm thinking of something to follow that would follow or be included at the end of a 2 or 3 word link.

TIA

[mrnoisy]

A square with an arrow pointing northeast. Make into a small (12x12?) icon and place after the link text.

(I tried to draw an example but my ascii art sucks.)

[larryhatch]

How about a nice small colorful icon that says "Learn More!" .. one word above the other.

[kaled]

By convention, menu items that lead to dialogs use three dots (ellipsis). A link that includes three dots may convey the required information to the user.

Kaled.

[tolachi]

Thanks for the suggestions. I think that I am going to try mrnoisy's idea and see if that works.

[vkaryl]

I'm in favor of a simple text link which says "More Info..." (Note the ellipsis!) No reason to use a graphic when simple text will be perfect.

[moltar]

Look for QBullets. They got tons of cool icons for free.

[tedster]

I agree with vkaryl that a non-graphic solution is usually best. You might consider a different (and less visually intrusive) link style for phrases that have drill-down information available.

However, if you want an icon, how about a lower case "i" inside a circle.

[TheDoctor]

If you use an icon, remember to give it a title, so that "More info..." (or whatever) appears when the visitor moves a mouse across it. And, of course, include alt text for those who don't load images.

[whoisgregg]

Or how about the question mark cursor for those links?

[moltar]

I like the way Yahoo News do it. They have an icon followed by text. But it can be done even better with CSS.

CSS

a.more {
padding-left: 18px; /* set to width of your icon+2px
background: url("icon.gif") no-repeat left;
}

HTML

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam aliquet, augue in condimentum tristique, nisl ligula tempus turpis, feugiat pellentesque lectus wisi ut tortor. Sed lacus. Ut quis quam quis est ullamcorper luctus. Cras auctor egestas neque. Ut vestibulum tristique dui. Cras eu diam. [b]<a class="more">More info</a>[/b] Quisque scelerisque purus ut pede. In massa mi, rhoncus at, suscipit et, dictum in, orci. Nulla ligula dui, aliquam eget, aliquet quis, egestas in, est. Praesent rhoncus imperdiet turpis. Curabitur euismod. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Suspendisse potenti. Ut ornare lorem id dolor. Aenean eleifend feugiat pede. Suspendisse euismod.</p>

[tedster]

I like CSS solutions too. But when you use this background image approach in this situation, the icon itself is no longer a click-point, or a "hot" link - correct?

[moltar]

The icon is clickable in IE and FF for me.

But i did mess up on the code. I didn't test it. :)

Should be like this:

CSS

a.more { 
padding-left: 18px; /* set to width of your icon+2px */
background: url("icon.gif") no-repeat left; 
}

HTML

Cras eu diam. <a class="more" href="">More info</a> Quisque scelerisque purus ut pede.

- Forgot to close the comment in CSS
- Forgot to add href="" to the link

There is a downside to this. IE has a bug. If your anchor text wraps on a new line, it will messup the icon. It will display it on the right side of the text block.

[tedster]

My mistake - it is clickable. Apologies.

[tolachi]

moltar, that is freakin' elegant. I'll mark up my links with your code and then just experiment with what icon works best. Way to put css to work.

Thanks to all for the suggestions.

[tolachi]

I'm in favor of a simple text link which says "More Info..." (Note the ellipsis!) No reason to use a graphic when simple text will be perfect.

vkaryl

That's normally what I would do, but most of these links are in the middle of a paragraph of text and I wanted a physically small way of highlighting them.