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)
}
}
}
}

How to create an array in javascript?

1106

---

Does javascript support automatic type conversion, if yes give example.

1114

---

Why is javascript used for web pages?

1007

---

Is javascript faster than asp script?

1131

---

Describe what u had done today?

2283

---

What is scope chain in javascript?

1029

---

What is a boolean search?

922

---

Can you assign an anonymous function to a variable and pass it as an argument to another function?

925

---

How are event handlers utilized in javascript?

1119

---

Expand BOM and explain it?

981

---

How to shift and unshift using javascript?

1056

---

What is javascript and its advantages?

1063

---

What are a fixed-width table and its advantages in javascript?

964

---

Which built-in method returns the string representation of the number’s value?

1184

---

What are the basic groups of dataypes in JavaScript?

1024

---