Global script for adding text box to link

**robb11** · 12-08-2011, 01:08 AM

Hi everyone,

I'm looking for a global script which will achieve the following:

Remove the underline from a link
replace it with a shaded box over the link
when moused over provide a popup text box

I have found scripts which will achieve this for a single link, however I would like to know if it is possible to achieve this if the same link appears on multiple web pages.

For example: If the text on my home page (or any page) includes the word 'pensions' (my website is about retirement planning) then I would like this word to be a link which takes the visitor to another page with more detail. The popup text box will also provide a short definition for the visitor. The trick is though, if the word 'pensions' appears another 50 times throughout my website is there any way to have this automatically appear as a link with the attributes described above without having to manualy turn the word 'pensions' into a link where ever it appears?

Hope this makes sense!

Rob.

**djr33** · 12-08-2011, 02:54 AM

1. Please post the script you're using. We'll need that to see what you're doing and it can probably be used as part of the final script.

2. Removing the underline of a link is very easy (although the rest is not). Just use the CSS property text-decoration:none;. That can be applied in your .css stylesheet for all links of a certain class, or as a property on the link itself. Or, although it would be a little more complicated, this can be done using Javascript while you set the other properties. Unlike the rest, though, you don't actually need JS for that part.
And if you just want it to disappear when the mouse is over the link, you can use the following: a.YourClassName#hover { text-decoration:none; }. #hover makes it only appear when the mouse is over the link.

3. To clarify, is this something you want to add to every page? Or is this something that already exists on every page and you want to modify it? It will be MUCH easier if you can do this in the first place when you generate the links. Every time you generate a link including that text, add a property. If not, you'll need to use Javascript to search through the whole page every time you load it and that won't be efficient (or easy to program).

4. Once you have a script set up that "finds" these links (however that is) it should be easy to add it to more pages. After it works on one page, that will be all the code you need. Then just copy the script to the other pages.

**robb11** · 12-08-2011, 03:53 AM

Thanks djr33,

I am not using a particular script yet but I like the look of the DD Speech bubbles tooltip script insofar as the popup text box is concerned. I would still need to change this to remove the underline and replace it with a shadow box (don't know how).

A good example of what I want to achieve is on http://www.superguide.com.au/superan...-contributions

You will notice on this page the highlighted words 'super contributions' without any underline which when moused over become underlined with a text box appearing with a short definition. The link not only appears a few times on this page but on many pages throught the website.

I want to achieve the same thing and if I wrote any content on any page which included the words 'super contributions' I would want this to automatically appear as a link.

I'm assuming it is done automatically somehow on the above website?

thanks for your assistance.

Rob

**robb11** · 12-12-2011, 12:57 AM

Any 'experts' out there?

**vwphillips** · 12-12-2011, 01:49 PM

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[*/

.link {
  color:red;text-Decoration:none;
}

.pop {
  position:absolute;z-Index:101;visibility:hidden;width:150px;height:50px;background-Color:#FFFFCC;
}

/*]]>*/
</style>

<script type="text/javascript">
/*<![CDATA[*/

function Pop(id,lk,lft,top,ms){
 var pop=document.getElementById(id),pos=Pos(lk);
 lk.style.textDecoration='none';
 pop.style.visibility='hidden';
 clearTimeout(pop.to);
 if (lft){
  pop.to=setTimeout(function(){
   lk.style.textDecoration='underline';
   pop.style.left=pos[0]+lft+'px';
   pop.style.top=pos[1]+top+'px';
   pop.style.visibility='visible';
  },ms||500);
 }
}

function Pos(obj){
 var rtn=[0,0];
 while(obj){
  rtn[0]+=obj.offsetLeft;
  rtn[1]+=obj.offsetTop;
  obj=obj.offsetParent;
 }
 return rtn;
}



/*]]>*/
</script>
</head>

<body>
Answer: The answer is no if you’re under the age of 65. Anyone under the age of 65 can make <a href="#" class="link" onmouseover="Pop('pop1',this,50,20);" onmouseout="Pop('pop1',this);" >super contributions</a> whether they are working, rearing children, looking after a sick partner, recovering from illness or on an extended holiday.

If you are aged 65 or over then you must satisfy a work test if you’re seeking to make <a href="#" class="link" onmouseover="Pop('pop2',this,50,20,1000);" onmouseout="Pop('pop2',this);" >super contributions</a>. You must be gainfully employed for at least 40 hours in a consecutive 30-day period in the year in which you make the super contribution.

<div id="pop1" class="pop" >The answer is no</div>
<div id="pop2" class="pop" >you are aged 65 or over</div>
</body>

</html>

Thread: Global script for adding text box to link

Thread Tools

Search Thread

Global script for adding text box to link

Bookmarks

Bookmarks

Posting Permissions