Answer Posted / satish mahato

There are already many solutions to the problem, each of
them using CSS to hide, move, or stack the images and the
text. The forum entries related to Joe Clark’s FIR article
propose several.

By using JavaScript, we have an opportunity none of these
solutions give us: the markup can be plain vanilla XHTML,
with no need for any special IDs or CSS tricks in it.

Non-JavaScript users will simply see the headlines as they
are, and designers still have the chance to style the
plain-text versions with CSS.

The only users whose experience is negatively affected are
those with JavaScript turned on and images turned off. These
users will see the text replacement for the image. An
exception are Mozilla users — but more on that later.
Enough talk, show us the goods

Take a look at the demo page and you’ll see the technique in
action. This is achieved by using one script together with
an array of image names.

replaceImages = new Array(
’About us|about.gif’,
’History|history.gif’,
’Contact Us|contact.gif’
);

function firdom(){
if(document.getElementsByTagName && document.createElement){
for (l=1;l<=6;l++){
h1s=document.getElementsByTagName(’h’+l);
scanandreplace(h1s,’h’+l);
}
}
}
function scanandreplace(h1s,tag){
for(i=0;i<h1s.length;i++){
for(f=0;f<replaceImages.length;f++){
chunks=replaceImages[f].split(’|’);
thish1=document.getElementsByTagName(tag)[i];
if(thish1.firstchild.nodevalue==chunks[0]){
newimg=document.createElement(’img’);
newimg.setattribute(’alt’,chunks[0])
newimg.setattribute(’src’,chunks[1])
// or newimg.src=chunks[1];
}
}
}
}
window.onload=firdom;

The array replaceImages needs to be defined either once in
an external JavaScript or for each page individually. It
tells the script which headline to replace with which image.

The text that will be replaced and the URL of the
replacement image are separated with a “|”.

In the below example, any headline with the content “About
Us” will be replaced with the image “about.gif”, any
headline with the content “History” with ”history.gif” and
so on.

replaceImages = new Array(
’About us|about.gif’,
’History|history.gif’,
’Contact Us|contact.gif’
);

All you need to know to use the technique is how to assemble
this array. Then you can add the array to your page, include
the script via its own script tag, and enjoy the graphical
headlines.

If you are not familiar with the DOM and you don’t want to
know about it, skip the next bit and proceed to “Where it
fails.”
Under the hood — how it works

So you want it more technical, then? Okay, firdom() does the
following:

First we check if our browser can deliver what we need by
testing for DOM capabilities. This prevents old browsers
from trying to do what they can’t.

if(document.getElementsByTagName && document.createElement){

Then we loop through all possible headline levels (<H1> to
<H6>) and call another function, asking that one to find and
replace all headlines with the current level.

for (l=1;l<=6;l++){
h1s=document.getElementsByTagName(’h’+l);
scanandreplace(h1s,’h’+l);
}

This function, scanandreplace(), takes each one of these
headlines and compares its content (the nodeValue of its
first child) with the text preceding the “|” in each element
of the array replaceImages.

function scanandreplace(h1s,tag){
for(i=0;i<h1s.length;i++){
for(f=0;f<replaceImages.length;f++){
chunks=replaceImages[f].split(’|’);
thish1=document.getElementsByTagName(tag)[i];
if(thish1.firstChild.nodeValue==chunks[0]){

If there is a match, we create a new image element and set
its source to the text following the “|” in the current
element of replaceImages.

To take an additional accessibility precaution, we set the
alt attribute of the new image to the text of the headline.

newImg=document.createElement(’img’);
newImg.setAttribute(’alt’,chunks[0])
newImg.setAttribute(’src’,chunks[1])

All that remains to be done is to replace the original text
content of the headline (its first child), with the newly
created image — and voila, we have graphical headlines.

thish1.replaceChild(newImg,thish1.firstChild)
}
}
}
}

What does window.print() do in Javascript?

1082

---

Explain typecasting in javascript?

912

---

hello sir my name is naga sekhar i completed my b-tech in 2011 with 61% in IT streme.I completed my core and advanced java coure before 8months back.Still i did not get the job.i tried so many times.and i went to some interviews but no use.now i want to get the job in software sector

2344

---

Is javascript free to install?

970

---

Will javascript be replaced?

907

---

How to detect the operating system on the client machine?

924

---

What kind of conditional statements does JavaScript support?

975

---

what is the difference between the below two statements:- (1) var myname = "akiii"; (2) myname = "akiii";

904

---

In Java coding we will write a public static void main()? Why won't we write as a static public void main()

2609

---

What is the naming conventions for the variables in javascript?

1019

---

What is webpack used for?

869

---

How can we detect os of the client machine using javascript?

1096

---

How to Object.entries( ) In JavaScript ?

1043

---

What is lazy loading java?

885

---

Are there any training Institutions on iphone Automation testing?

2300

---