Checking Browser Image Support for a Dynamic Text Replacement JavaScript Application - Adding image support checking
(Page 3 of 4 )
As you'll surely know, there are many ways to determine whether or not a specific browser has support for images. Solutions to this issue may range from using simple JavaScript snippets to implementing more complex CSS hacks.
In this case, however, I'm going to utilize a neat and efficient technique developed originally by Peter-Paul Koch (you can read more about this technique here) to provide the previous text replacement script with the ability to check the browser for image support.
Having clarified that point, here's how the improved text replacement script now looks:
function replaceTextNodes(elemName){
var testImg=new Image();
testImg.src='test.gif';
testImg.onload=function(){
// select all <elemName> elements on the web page
var elems=document.getElementsByTagName(elemName);
if(!elems){return};
// perform text replacement
for(var i=0;i<elems.length;i++){
// create <img> element
var img=document.createElement('img');
if(elems[i]){
// set <img> attributes
img.setAttribute('src','img'+i+'.gif');
img.setAttribute('width','180px');
img.setAttribute('height','30px');
img.setAttribute('alt',elems[i].firstChild.nodeValue);
// replace text by image
elems[i].replaceChild(img,elems[i].firstChild);
}
}
}
}
As you can see, the above "replaceTextNodes()" function has the ability to determine whether or not the browser supports images via the use of a tiny 1px X 1px transparent image called "test.gif." Successful loading of the text image fires up the execution of the rest of the text replacement script. Otherwise, the function simply will do nothing.
In addition, the modified function could be triggered after the web page has been loaded, in the following way:
window.onload=function(){
if(document.createElement&&document.getElementById&&document.
getElementsByTagName){
replaceTextNodes('h2');
}
}
Actually, the modification that I made to the previous JavaScript function is completely optional, but it doesn't hurt to add some image support checking capabilities. Of course, the final decision regarding the inclusion of this improvement is entirely up to you.
Well, at this point I should assume that you already grasped the technique for determining whether or not support for images has been enabled on the browser. So it's time to include the improved "replaceTextNodes()" JavaScript function into the same (X)HTML file that contains the structural markup and CSS styles of the sample web page that you saw before.
In the next section I will show you the full source code for the text replacement application. This will make it easier to put it into a single source file. You will also have an easier time testing the source code and studying it to make your own modifications. So please, click on the link that appears below and read the last section of this tutorial.
Next: Completing the text replacement application: source code >>
More JavaScript Articles
More By Alejandro Gervasio
/ 7 
