Occasionally in your posts, you might want to add a quick popup window, explaining some concept in slightly more detail.
The normal technique to add detail to an article, beside simply writing more text (D'ohh), would be to write a separate post, and link to that post.
But there's a quicker, more elegant way to do this. And you don't end up with another window, as the link above for "link to that post".
Check it out. Hover your cursor over the words "a quicker, more elegant way" above.
It's not hard to code.
We can add a popup in text, or we can attach it to a picture.
Like everything here, there are details to consider, which may or may not matter to you.
It is helpful, if the "hover caption" differs in colour.
Compare the words "link to that post" with "a quicker, more elegant way" - do you see the colour differences? The former is a link, and may (depending upon the CSS rules in the template) have different values for an unfollowed vs a followed link.
The ability to show the reader a link in a different colour, based upon whether he has or has not clicked on a link to that specific web page, is a neat feature with HTML.
The latter example above, "a quicker, more elegant way", isn't a link, so it doesn't show any colour difference. It makes the text look cleaner. But with no colour difference, how do your readers know where to hover the cursor?
Add a bit more code, and make the "hover caption" stand out.
So add just a bit more code. Look at the example above - "where to hover the cursor".
Add more popup text, and see what limits exist.
Next, let's add a bit more text, and see what the limitations are here.
This may not work, in some older browsers.
This doesn't work in all browsers - Internet Explorer V6 didn't support the "title" tag - the "alt" tag has this function. Other browsers, that use the same engine, may or may not support this. But its does work for Firefox, and for Internet Explorer V7.
And, there are limitations. Check out "add a bit more text" (above), and see if you can spot one.
Here's a few references, and details.
If you're in any way curious about how I setup this page, and showed the HTML so neatly, see my tutorial on anchors and HTML. And you can always examine the code for any specific page element, if you're using Firefox. Or check out the W3 Schools tutorials, that tell you all about each HTML tag, as used above.
The normal technique to add detail to an article, beside simply writing more text (D'ohh), would be to write a separate post, and link to that post.
But there's a quicker, more elegant way to do this. And you don't end up with another window, as the link above for "link to that post".
Check it out. Hover your cursor over the words "a quicker, more elegant way" above.
It's not hard to code.
But there's <a title="This is quick, and easy to do!">a quicker, more elegant way</a> to do this.We can add a popup in text, or we can attach it to a picture.
Like everything here, there are details to consider, which may or may not matter to you.
It is helpful, if the "hover caption" differs in colour.
Compare the words "link to that post" with "a quicker, more elegant way" - do you see the colour differences? The former is a link, and may (depending upon the CSS rules in the template) have different values for an unfollowed vs a followed link.
The ability to show the reader a link in a different colour, based upon whether he has or has not clicked on a link to that specific web page, is a neat feature with HTML.
The latter example above, "a quicker, more elegant way", isn't a link, so it doesn't show any colour difference. It makes the text look cleaner. But with no colour difference, how do your readers know where to hover the cursor?
Add a bit more code, and make the "hover caption" stand out.
So add just a bit more code. Look at the example above - "where to hover the cursor".
But with no colour difference, how do your readers know <a title="Hover the cursor here!" style="color:#5588aa; text-decoration:none;">where to hover the cursor</a>?Add more popup text, and see what limits exist.
Next, let's add a bit more text, and see what the limitations are here.
This may not work, in some older browsers.
This doesn't work in all browsers - Internet Explorer V6 didn't support the "title" tag - the "alt" tag has this function. Other browsers, that use the same engine, may or may not support this. But its does work for Firefox, and for Internet Explorer V7.
And, there are limitations. Check out "add a bit more text" (above), and see if you can spot one.
Here's a few references, and details.
If you're in any way curious about how I setup this page, and showed the HTML so neatly, see my tutorial on anchors and HTML. And you can always examine the code for any specific page element, if you're using Firefox. Or check out the W3 Schools tutorials, that tell you all about each HTML tag, as used above.
Comments
It looks OK in IE V7 here. I'll poke around, and see if I can find any other reports of this being a problem. Do you have any add-ons in your browser?
If you find anything out, that will be great! Thanks!
I tried and it works beautifully. I wonder if it is possible to put the title tag in a way that a picture is still clickable ?
Regards,
Márcia
A mouseover popup for a clickable picture works for me, and you can see it in my demonstration.
thanks a lot for you prompt reply!
I will read and try to read your instructions carefully. Have to confess I´m having lots of unw with this pop-up things.
see you around in the bloggosphere!
There are 2 explicit examples of where to put the codes, in the post. Plus, there are two more examples, in the text, not explicitly shown.
Plus, see the note at the end of the post, and examine the code behind the post.
What you see is what I know. I have not found any options, either. It's just a very simple popup box, containing text. Different truncation for Firefox and IE, too.
For example, when I hover over a word, a small image relating to the word will be displayed in a small popup window.
Thanks in advance.