Post by SubDevo on Oct 5, 2009 23:49:04 GMT -8
Title on Image/Link Hover by SubDevo
Tested in IE, FF, Opera and Safari
Some background...
When you hover over an image (if using Internet Explorer), you will see a tooltip (hover text). IE uses the "alt" attribute for this. Other browsers (FF, Opera, Safari...) do NOT use "alt", and users of those browsers will NOT get any tooltips. Those browsers require the "title" attribute. What this code does is go through all images on a page, checks to see if it has a title. If it doesn't, it sets the "alt" of the image as the "title". Administrators (using non-IE browsers), will especially notice all the new tooltips on the "Customize Images" page. And members will appreciate having tooltips on the UBBC icons when posting. At last you will know what each of those images/codes do!
You can optionally do this for all text links too. Why do that? On a lot of forums, they have their links set up so there is no change of the link on hover (color, underline etc.). A tooltip will help the user know exactly what link their mouse pointer is over.
Enjoy!!!
SubDevo
Variable Descriptions: Edit the Maroon portions.
var remBrace=0; // Remove Brackets "[]"? 1=Yes, 0=No
Set this to "1" to remove the "[]" from the tooltips. This is just a visual preference.
I just threw this one in there, since I was looping through the images anyways.
var doLinks=1; // Give Hover Titles to Non-Image Links? 1=Yes, 0=No
Set this to "1", to give all the text links on your page a hover tooltip.
Location: Global Footer
Best place is at the bottom of your footer. So, it catches any images or links created by other codes.
<script type="text/javascript">
<!--
/* Title on Image/Link Hover by SubDevo */
/* Global Footer - Please leave this header intact. Do not repost. */
/* interoceandesigns.proboards.com or lsdp.proboards.com */
var remBrace=0; // Remove Brackets "[]"? 1=Yes, 0=No
var doLinks=1; // Give Hover Titles to Non-Image Links? 1=Yes, 0=No
var n=document.images; var a=document.links;
for(var x=0;x<n.length;x++){with(n[x]){if(!title){title=(remBrace)?alt.replace(/\[|\]/g,""):alt;}}}
if(doLinks){for(x=0;x<a.length;x++){with(a[x]){
var nx=a[x]; while(nx.firstChild){nx=nx.firstChild;}
if(!title&&nx.nodeName.match(/text/i)){title=nx.data;}}
}}
//-->
</script>
Tested in IE, FF, Opera and Safari
Some background...
When you hover over an image (if using Internet Explorer), you will see a tooltip (hover text). IE uses the "alt" attribute for this. Other browsers (FF, Opera, Safari...) do NOT use "alt", and users of those browsers will NOT get any tooltips. Those browsers require the "title" attribute. What this code does is go through all images on a page, checks to see if it has a title. If it doesn't, it sets the "alt" of the image as the "title". Administrators (using non-IE browsers), will especially notice all the new tooltips on the "Customize Images" page. And members will appreciate having tooltips on the UBBC icons when posting. At last you will know what each of those images/codes do!
You can optionally do this for all text links too. Why do that? On a lot of forums, they have their links set up so there is no change of the link on hover (color, underline etc.). A tooltip will help the user know exactly what link their mouse pointer is over.
Enjoy!!!
SubDevo
Variable Descriptions: Edit the Maroon portions.
var remBrace=0; // Remove Brackets "[]"? 1=Yes, 0=No
Set this to "1" to remove the "[]" from the tooltips. This is just a visual preference.
I just threw this one in there, since I was looping through the images anyways.
var doLinks=1; // Give Hover Titles to Non-Image Links? 1=Yes, 0=No
Set this to "1", to give all the text links on your page a hover tooltip.
Location: Global Footer
Best place is at the bottom of your footer. So, it catches any images or links created by other codes.
<script type="text/javascript">
<!--
/* Title on Image/Link Hover by SubDevo */
/* Global Footer - Please leave this header intact. Do not repost. */
/* interoceandesigns.proboards.com or lsdp.proboards.com */
var remBrace=0; // Remove Brackets "[]"? 1=Yes, 0=No
var doLinks=1; // Give Hover Titles to Non-Image Links? 1=Yes, 0=No
var n=document.images; var a=document.links;
for(var x=0;x<n.length;x++){with(n[x]){if(!title){title=(remBrace)?alt.replace(/\[|\]/g,""):alt;}}}
if(doLinks){for(x=0;x<a.length;x++){with(a[x]){
var nx=a[x]; while(nx.firstChild){nx=nx.firstChild;}
if(!title&&nx.nodeName.match(/text/i)){title=nx.data;}}
}}
//-->
</script>