
Originally Posted by
PhillyPhanatic
Hi John,
Thanks for the quick reply.
My site is well-designed, and does automatically display well when images are turned off (at least in my opinion). However, what if someone who prefers text-only is visiting their friend's house and uses their computer which isn't setup for text-only? Aside from navigating the browser settings, I would like for users to have the option to explicitly request a text-only version by clicking my toggle link. More accessibility options seems better than less - not to mention it's a requirement for my project.
I tried using code like the following, but it skips every other <img> tag, so the first <img> on page is replaced, then the second is not replaced, then the third is replaced, then the fourth is not replaced, etc.
var di=document.images;
for(var i=0,mx=di.length;i<mx;i++){
var it=di[i];
var t=document.createElement("span");
t.innerHTML=it.alt || "";
it.parentNode.insertBefore(t, it);
it.parentNode.removeChild(it);
}
Also, this code causes validation errors due to the "mx" portion.
Any ideas how to make something like this work?
Thanks
I would go the other way around?
(I never used a text-only browser but I suspect that some of them might simply skip img tags just like ordinary browsers would skip unknown tags and their attributes)
Evolving your code is a better thought than trying to devolve it.
Imagine you are living in the era when images didn't exist but you have the vision of it and want to share. What would you do?
1. you would try to describe it with the only mean available; words.
2. you would give us directions of the location and the name of place where we could go see it ourselves.
If you agree, than analogous to that you would code something like this:
Code:
<span title="image1.jpg">your image content description here1</span>
<span title="image2.gif">your image content description here2</span>
<span title="image3.png">your image content description here3 </span>
<!-- and so on... -->
<span
title="some image.jpg or imge.jpeg or image.gif etc are used as image extensions">Invalid address specified or ordinary span encountered here!
</span>
So this code is already text-only and browser ready.
The next step would be to make them CSS-only ready to browse using background properties of these spans and adjusting their dimensions, to be able to display images properly if background images are supported placing their description in some other tag that we can further style to suite our design and its purpose. but we will skip that as unrelated to java-scripting problems.
Therefore we will jump strait to the script
uncommented code
Code:
<script type="text/javascript">
var spans2Images = function(i){// b.b. Troy III p.a.e.
var imgData = document.getElementsByTagName("span"),iLen=imgData.length;
if(iLen>i){
if(!(imgData[i].title).match(/\.jpeg$|\.jpg$|\.gif$|\.png$/gi)){
i++;
return spans2Images(i); }
else{
var img = new Image();
img.src = imgData[i].title;
img.alt = imgData[i].innerText||imgData[i].textContent;
img.onerror = function(){this.title = this.src +" error - image not found!"}
imgData[i].parentNode.replaceChild(img,imgData[i]);
return spans2Images(i); }
} return "span2image tag-conversion completed!"
}
var report = spans2Images(0);
(for novices)
comented code
Our first step would be to get spans of our interest that may be scattered all over the document body in one place.
but not unless requested first, therefore we'll declare our function first
Code:
var spans2Images = function(i){
than we'll collect span elements
Code:
var imgData = document.getElementsByTagName("span"),iLen=imgData.length;
and of course their exact length/number in the same turn.
Than we will need some condition to walk down on them and to know when to stop.
So we'll stop walking when our counter gets equal to our collection length.
Yet we will need to discern between ordinary spans and our special image description spans. In most cases checking for Title attribute definition availability would be more than enough but that would impose restrictions to other spans that would for some reason require their title attributes set also. So we will be forced to make our conditional smarter and more sensitive. Therefore we will read these title attributes more carefully.
Code:
if(!(imgData[i].title).match(/\.jpeg$|\.jpg$|\.gif$|\.png$/gi)){
so that only true image addresses get qualified for conversion. And we are comparing against .jpeg;.jpg; ..gif; .png. (one could ad more if needed) that would be more than enough.
-Now that we are secured that only qualified spans will pas through conversion process we will need to count.
Here, we've incremented our counter.
And since this span did not qualify, we will immediately turn back to our next candidate:
Code:
return spans2Images(i); }
or if the current candidate passed our qualification
we will proceed to our main routine
Code:
var img = new Image();
We've just created our new image in DOM 0 super compatible manner.
Code:
img.src = imgData[i].title;
got our image address from our qualified span title attribute assigned.
Code:
img.alt = imgData[i].innerText||imgData[i].textContent;
defined our new image Alt attribute using span image description text.
Now this is optional, but might prove useful.
Code:
img.onerror = function(){this.alt = this.src +" error - image not found!"}
if image is not being able to be served by our server our missing failed image will display our error message.
We can further utilize this behavior. We can for instance leave its alt attribute intact and ad that message to its Title attribute instead, or we can assign a new address to some default custom image missing icon. etc. but I'll leave it as is right now. Since this example is for demonstration purposes only.
Alright, we've arrived to our final step of making it all come true.
Replacing the image-inf span with the actual image.
imgData[i].replaceNode(img);
But since this ingenious method proposed by IE is still not accepted by W3C, and furthermore FX is programmed to throw error even if you only mention it. The beloved W3C is forcing us to call the parent of our perfectly grownup and adult span element before we are able to do anything with it.
"Hey span element! Please, can you call your parent - because I really don't know who that might be - so I can tell him, to tell you, to become full color image?" with the following method:
Code:
imgData[i].parentNode.replaceChild(img,imgData[i]);
Now that its parent came to play and made it all happen - we can turn back to our next candidate...
Code:
return spans2Images(i); }
and after all candidates are gone we will close our audition and write our report.
Code:
} return "span2image tag-conversion completed!"
before closing the main gate
we will execute our idea this way
Code:
var report = spans2Images(0);
And at the end, if we like, we can read our function report
Code:
document.onclick=function(){alert(report)}
or by simply alerting our executioner result
Regards
Bookmarks