Jay wrote:
> <> wrote in message
> news: ups.com...
>
>>Hello,
>>
>>Anyone that can think of a way to programmaticaly determine the word on
>>an HTML page that the user clicked on will be my hero for life.
>
>
> wouldn't each word have to be inside a container in order to get an event to
> fire? say a <div> or a <a href>
> You could put each word in a <href> and give it a name attribute. Hope you
> don't have too many words!
> You could change the text to not be link colour, not be underlined and not
> change the cursor using CSS.
>
> You could then find out which word was clicked based on the "name"
If attempting this, <span> would likely be a better element to use as
its effect on styles is more neutral while providing similar
functionality (it can be given an id and onclick).
Here is some play code that puts a <span> around each word, gives it
an ID and an onclick function. Note that it totally screws any
internal markup, but that could be fixed with a better parsing
algorithm - the script just splits on word boundaries, then when
putting stuff back in it only adds spans & onclicks to things that
contain only word characters.
Have fun.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title> Every word clickable </title>
<meta http-equiv="Content-Type"
content="text/html; charset=ISO-8859-1">
<script type="text/javascript">
function addClicks(){
var x, i=arguments.length;
while ( x = arguments[--i] ) {
addSpans(document.getElementById(x));
}
}
function addSpans(t) {
var s, w = t.firstChild.data.split(/\b/);
var n = t.id;
while (t.firstChild && t.removeChild(t.firstChild));
for (var i=0, len=w.length; i<len; i++){
if ( /\W/.test(w[i]) ) {
s = document.createTextNode(w[i]);
} else {
s = document.createElement('span');
s.id = n + '-' + i;
s.appendChild(document.createTextNode(w[i]));
s.onclick = function() {
alert('This is ' + this.id + ', it contains:'
+ '\n' + this.firstChild.data);};
}
t.appendChild(s);
}
}
</script>
</head>
<body onload="addClicks('p1','p2','p3')">
<p id="p1">here is some text in a document. It will become
clickable when the page loads.</p>
<p id="p2">Counter-measure 63 shows that hyphenated words are
a bother, they get split in two as do decimal numbers like
8797.9879.</p>
<p id="p3">Any HTML markup <b>really</b> makes a mess</p>
</body>
</html>
--
Rob
Similar Threads
