Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to make every word in the text clickable and send it to the script

I have a text for example

"The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps

over the lazy dog."

When i click on word i must get data from XML or from mysql about this word.

How i can make every word active for click and send it to another script

for example: I click on dog, and in new window i get information about dog? on fox about fox? every word must be clickable

Any ideas, links or examples?

Using php, mysql, jquery, ajax

like image 466
fakson Avatar asked Mar 24 '10 14:03

fakson


People also ask

How do I make text clickable?

<a href=” “> helps one to specify the target. This is followed by adding the text that is clickable in HTML. For example, in the above example, https://testbook.com/ is the link that is attached to the text “Testbook website page”. Finally, to finish it, you can add the </a> tag to indicate where the link ends.

How do I make text clickable in Javascript?

Create an anchor <a> element. Create a text node with some text which will display as a link. Append the text node to the anchor <a> element. Set the title and href property of the <a> element.

How do I display a link in a text?

Right-click anywhere on the link and, on the shortcut menu, click Edit Hyperlink. In the Edit Hyperlink dialog, select the text in the Text to display box. Type the text you want to use for the link, and then click OK.

How do I make a clickable link in HTML?

To make a hyperlink in an HTML page, use the <a> and </a> tags, which are the tags used to define the links. The <a> tag indicates where the hyperlink starts and the </a> tag indicates where it ends. Whatever text gets added inside these tags, will work as a hyperlink.


2 Answers

Wrap each word in its own span, probably with a CSS class to differentiate them as "word spans". Add a hover handler for all spans with that class, that extracts the content and does an ajax request to get the data associated with that word. If you get some data back, pop up a DIV ("tip") containing the information that's tied to the mouse location and has a z-index that allows it to float over the rest of the content. When the mouse isn't over the span, remove the associated "tip".

There are a variety of "tip" plugins for jQuery that you could easily adapt to this requirement.

<span class="word">the</span> <span class="word">quick</span> ...

// use a ficticious tooltip plugin that uses gettip.php and passes
// the content of the DOM element as a parameter
$('span.word').tooltip({ url: '/gettip.php' });

NOTE: you probably only want to do this for words of interest, not every word on the page. That is, have a dictionary of words that need tooltips and only wrap those words on the page that exist in the dictionary. There's little point (unless it's a grammar application) to do this with every possible word.

like image 66
tvanfosson Avatar answered Nov 15 '22 15:11

tvanfosson


Too much questions in one. I'd answer to one from the title. Let's assume you defined a "word" as a space delimited group of characters. So, you can use explode() function and get an array of words

Now you can iterate over it's array and print it out any fashion you want:

$string = "The quick brown fox jumps over the lazy dog";
$array = explode(" ",$string);

foreach ($array as $word) {
  $eword=urlencode($word);
  echo "<a href=getinfo.php?word=$eword>$word</a> ";
}

So, you will have your links and now you have to get an php/mysql beginners book to learn how to write the rest

like image 29
Your Common Sense Avatar answered Nov 15 '22 16:11

Your Common Sense