PDA

Click to See Complete Forum and Search --> : Dynamically add links/hovers to keywords after page has loaded?

crimson117
10-09-2003, 07:32 AM
On certain websites, http://www.anandtech.com for example, in their articles it dynamically adds a link with a hover to certain keywords. They do this for ads; so if the article mentions Intel, someone pays to have their CPU store linked from the word Intel. This happens after the page loads.

The company that does this is called VibrantMedia.com , and you can read about it here: http://vibrantmedia.com/content/int...ct_page/how.htm

I want to mimic this technology (although it's patented so who knows if I'm allowed to or not) so I can have a dynamic glossary for a web site I'm designing for a group of churches. One of their concerns is that many people don't understand some of the more obscure church lingo; so ideally whenever an obscure word appears, the user can hover over it and get an instant definition to pop up.

Any ideas?
pyro
10-09-2003, 07:40 AM
Just use the title attribute (http://www.w3.org/TR/html401/struct/global.html#h-7.4.3):

<span title="CSS stands for Cascading Style Sheets">CSS</span>
crimson117
10-09-2003, 07:55 AM
Originally posted by pyro
Just use the title attribute (http://www.w3.org/TR/html401/struct/global.html#h-7.4.3):

<span title="CSS stands for Cascading Style Sheets">CSS</span> The problem I have is how to scan the page, check for keywords, and add the span title tags afterwards. I don't want to hard code the title tags into the page.
pyro
10-09-2003, 08:06 AM
Try something like this, then (won't work for those without JavaScript, though):

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Example</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<style type="text/css">
.descrip {
cursor: help;
}
</style>

<script type="text/javascript">
function init() {
//define the words
words = new Array("XHTML","CSS","PHP");
//define the descriptions (the index must correspond with the word above)
descrip = new Array("eXtensible Hypertext Markup Language","Cascading Style Sheets","Hypertext Preprocessor");
obj = document.getElementsByTagName("body")[0];
//find words
for (i in words) {
re = new RegExp("\\b("+words[i]+")\\b", "gi");
str = obj.innerHTML.replace(re,'<span title="'+descrip[i]+'" class="descrip">$1</span>');
document.getElementsByTagName("body")[0].innerHTML = str;
}
}
</script>
</head>
<body onload="init();">
<p>This is some demo text. You could go on to describe XHTML, CSS, and PHP.</p>
</body>
</html>
crimson117
10-09-2003, 08:24 AM
Originally posted by pyro
Try something like this, then (won't work for those without JavaScript, though): <snip> Wow, that is exactly what I was looking for! Thanks! You've earned your Super Moderator title for today ;-)
pyro
10-09-2003, 09:51 AM
Lol... Awesome! :) Glad that's what you needed...