One more thing: anyway to set different URLs in the array? I've listed different URLs for each word but all the links point to the same link.
Printable View
One more thing: anyway to set different URLs in the array? I've listed different URLs for each word but all the links point to the same link.
Code:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title></title>
<style type="text/css">
/*<![CDATA[*/
.example {
position:absolute;left:20px;top:20px;width:400px;height:420px;background-Color:white;border:solid red 1px;padding:5px;
}
.wordcls {
color:#CC00FF;
}
.wordcls2 {
color:green;font-Weight:bold;
}
/*]]>*/
</style>
<script type="text/javascript">
/*<![CDATA[*/
// Word Links (1-Febuary-2013)
// by Vic Phillips http://www.vicsjavascripts.org.uk/
/*
Functional Code Size 0.793K
*/
//****** Functional Code - NO NEED to Change.
function zxcWordLinks(o){
var obj=document.getElementById(o.ID)||document.body,html,ary,wary=o.WordArray,word,txt,cs=typeof(o.CaseSensitive)!='boolean'||!o.CaseSensitive?false:true,s,els,z0=0,z1=0,z2=0,z3=0,z3a;
ary=obj.getElementsByTagName('A');
for (;z0<ary.length;z0++){
s=document.createElement('SPAN');
s.className='ZXC';
ary[z0].parentNode.insertBefore(s,ary[z0]);
s.appendChild(ary[z0]);
}
html=obj.innerHTML.replace(/</g,'zxc')
for (;z1<wary.length;z1++){
reg=new RegExp('('+wary[z1][0]+')','gi');
html=html.replace(reg,'<a>$1</a>');
}
html=html.replace(/zxc/g,'<');
obj.innerHTML=html;
els=obj.getElementsByTagName('SPAN');
for (;z2<els.length;z2++){
if (els[z2].className=='ZXC'){
els[z2].innerHTML=els[z2].innerHTML.replace(/<a>/ig,'').replace(/<\/a>/ig,'')+'</a>'
}
}
ary=obj.getElementsByTagName('A');
for (;z3<wary.length;z3++){
for (z3a=0;z3a<ary.length;z3a++){
word=wary[z3][0];
txt=ary[z3a].innerHTML;
if (!cs){
word=word.toLowerCase();
txt=txt.toLowerCase();
}
a=ary[z3a];
if (!a.href&&!a.href&&a.parentNode.className!='ZXC'&&trim(word)==trim(txt)&&typeof(wary[z3][2])=='string'){
a.className=wary[z3][2];
wary[z3][1]?a.href=wary[z3][1]:null;
a.title=a.href
s=document.createElement('SPAN');
s.className='ZXC';
a.parentNode.insertBefore(s,a);
s.appendChild(a);
}
}
}
}
function trim(string){
return string.replace(/^\s+|\s+$/g,'');
}
/*]]>*/
</script>
<script type="text/javascript">
/*<![CDATA[*/
function Init(){
zxcWordLinks({
WordArray:[
// field 0 = the phrase
// field 1 = the link HREF
// field 2 = the link class name
['defaults','http://www.webdeveloper.com/','wordcls'],
['tooltip','http://www.vicsjavascripts.org.uk/2','wordcls2'],
['Vics Javascripts','http://www.vicsjavascripts.org.uk/','wordcls'],
['Word Tool Tip','http://www.webdeveloper.com/','wordcls2'],
['offsets','http://www.vicsjavascripts.org.uk/5','wordcls'],
['DIV in the HTML code','http://www.vicsjavascripts.org.uk/','wordcls2']
],
ID:'Example1',
CaseSensitive:true
});
}
if (window.addEventListener){
window.addEventListener('load',Init, false);
}
else if (window.attachEvent){
window.attachEvent('onload',Init);
}
/*]]>*/
</script>
</head>
<body>
<div id="Example1" class="example" >
Example 1 (ToopTip activated by 'mouseover')<br />
<br />
<p>
Word Tool Tip<br />
by Vic Phillips <a href="http://www.vicsjavascripts.org.uk/" >Vics Javascripts</a><br />
<br />
</p>
<div>
To display a tooltip popup on mouseover<br /> of a word or phrase.
</div>
<hr />
<p>
Each word or phrase is defined in an array
together with optional tooltip inner html, class names and offsets.
</p>
<a href="http://www.vicsjavascripts.org/" >Script defaults may be</a> used to define the tooltip offsets from the word or phase,
the class name of the word or phrase, the class name of the tooltip,<br />
if the words and phrases are case sensitive,<br />
and the event type to display the tooltip.
<hr />
<div>
Alternatively the tooltip may be a DIV in the HTML code.
</div>
<hr />
<br />
<br />
The HTML may include nested elements and include inline elements<br />
such as images <img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt5.jpg" alt="Image" width="50" height="50" />
and inputs <input name="" size="10" />.
</div>
</body>
</html>
Thanks so much! It's about perfect. Can I be a pain for one more min and ask if it's possible that the phases be exacted? For example the array has 'shop' but it links 'shopping' too.
the quick answer is using a space
I will try and improve the regExpCode:
['shop ','http://www.vicsjavascripts.org.uk/5','wordcls']
Code:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title></title>
<style type="text/css">
/*<![CDATA[*/
.example {
position:absolute;left:20px;top:20px;width:400px;height:420px;background-Color:white;border:solid red 1px;padding:5px;
}
.wordcls {
color:#CC00FF;
}
.wordcls2 {
color:green;font-Weight:bold;
}
/*]]>*/
</style>
<script type="text/javascript">
/*<![CDATA[*/
// Word Links (1-Febuary-2013)
// by Vic Phillips http://www.vicsjavascripts.org.uk/
/*
Functional Code Size 0.793K
*/
//****** Functional Code - NO NEED to Change.
function zxcWordLinks(o){
var obj=document.getElementById(o.ID)||document.body,html,ary,wary=o.WordArray,word,txt,cs=typeof(o.CaseSensitive)!='boolean'||!o.CaseSensitive?false:true,s,els,z0=0,z1=0,z2=0,z3=0,z3a;
ary=obj.getElementsByTagName('A');
for (;z0<ary.length;z0++){
s=document.createElement('SPAN');
s.className='ZXC';
ary[z0].parentNode.insertBefore(s,ary[z0]);
s.appendChild(ary[z0]);
}
html=obj.innerHTML.replace(/</g,'zxc')
for (;z1<wary.length;z1++){
reg=new RegExp('(\\b'+wary[z1][0]+'\\b)','gi');
html=html.replace(reg,'<a>$1</a>');
}
html=html.replace(/zxc/g,'<');
obj.innerHTML=html;
els=obj.getElementsByTagName('SPAN');
for (;z2<els.length;z2++){
if (els[z2].className=='ZXC'){
els[z2].innerHTML=els[z2].innerHTML.replace(/<a>/ig,'').replace(/<\/a>/ig,'')+'</a>'
}
}
ary=obj.getElementsByTagName('A');
for (;z3<wary.length;z3++){
for (z3a=0;z3a<ary.length;z3a++){
word=wary[z3][0];
txt=ary[z3a].innerHTML;
if (!cs){
word=word.toLowerCase();
txt=txt.toLowerCase();
}
a=ary[z3a];
if (!a.href&&!a.href&&a.parentNode.className!='ZXC'&&trim(word)==trim(txt)&&typeof(wary[z3][2])=='string'){
a.className=wary[z3][2];
wary[z3][1]?a.href=wary[z3][1]:null;
a.title=a.href
s=document.createElement('SPAN');
s.className='ZXC';
a.parentNode.insertBefore(s,a);
s.appendChild(a);
}
}
}
}
function trim(string){
return string.replace(/^\s+|\s+$/g,'');
}
/*]]>*/
</script>
<script type="text/javascript">
/*<![CDATA[*/
function Init(){
zxcWordLinks({
WordArray:[
// field 0 = the phrase
// field 1 = the link HREF
// field 2 = the link class name
['defaults','http://www.webdeveloper.com/','wordcls'],
['tooltip','http://www.vicsjavascripts.org.uk/2','wordcls2'],
['Vics Javascripts','http://www.vicsjavascripts.org.uk/','wordcls'],
['Word Tool Tip','http://www.webdeveloper.com/','wordcls2'],
['offsets','http://www.vicsjavascripts.org.uk/5','wordcls'],
['shop','http://www.vicsjavascripts.org.uk/5','wordcls'],
['DIV in the HTML code','http://www.vicsjavascripts.org.uk/','wordcls2']
],
ID:'Example1',
CaseSensitive:true
});
}
if (window.addEventListener){
window.addEventListener('load',Init, false);
}
else if (window.attachEvent){
window.attachEvent('onload',Init);
}
/*]]>*/
</script>
</head>
<body>
<div id="Example1" class="example" >
Example 1 (ToopTip activated by 'mouseover')<br />
<br />
<p>
Word Tool Tip<br />
by Vic Phillips <a href="http://www.vicsjavascripts.org.uk/" >Vics Javascripts</a><br />
<br />
</p>
<div>
To display a tooltip popup on mouseover<br /> of a word or phrase.
<br />
shop and shopping
</div>
<hr />
<p>
Each word or phrase is defined in an array
together with optional tooltip inner html, class names and offsets.
</p>
<a href="http://www.vicsjavascripts.org/" >Script defaults may be</a> used to define the tooltip offsets from the word or phase,
the class name of the word or phrase, the class name of the tooltip,<br />
if the words and phrases are case sensitive,<br />
and the event type to display the tooltip.
<hr />
<div>
Alternatively the tooltip may be a DIV in the HTML code.
</div>
<hr />
<br />
<br />
The HTML may include nested elements and include inline elements<br />
such as images <img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt5.jpg" alt="Image" width="50" height="50" />
and inputs <input name="" size="10" />.
</div>
</body>
</html>
