Ah, read my mind. That's where I was going to point to. Thanks!
I forgot this thread was here. Some good stuff to share with others.
Printable View
Ah, read my mind. That's where I was going to point to. Thanks!
I forgot this thread was here. Some good stuff to share with others.
I don't know if you want these types, but here are three that I use all the time.
PHP Code:document.getElementsByClassName = function(className,tagName) {
if (!document.getElementsByTagName) {
return false;
}
var elements = document.getElementsByTagName(tagName||"*");
var length = elements.length;
var classElements = new Array();
for (var i = 0; i < length; i++) {
if (elements[i].className.match(className)) {
classElements[classElements.length]=elements[i];
}
}
return (classElements.length>0)?classElements:false;
}
window.addOnloadEvent = function(addToOnload) {
var oldOnload;
if (window.onload) {
oldOnload = window.onload;
window.onload = function(){
oldOnload();
addToOnload();
};
}
else {
window.onload = addToOnload;
}
}
window.addElementOnload = function(elementId,onloadFunction) {
if (document.getElementById && document.getElementById(elementId) != null) {
onloadFunction();
}
else {
setTimeout("window.addElementOnload('"+elementId+"',"+onloadFunction+");",50);
}
}
Short and simple script to replace the images on a web page with a text node containing their alternate text if images have been disabled.
PHP Code:<script type="text/javascript">
// Try to load a small image
var testImage = new Image;
testImage.src = "testimage.jpg";
onload = function(){
if(!testImage.complete){
// If the image has not loaded the user has disabled images in the browser
// Find all of the images on the web page
var documentImages = document.getElementsByTagName("img");
for(var i=0; i<documentImages.length; i++){
// Create and insert a text node after the image using the image's alternate text
var replacementText = document.createTextNode(documentImages[i].alt);
documentImages[i].parentNode.insertBefore(replacementText, documentImages[i]);
// Hide the image
documentImages[i].style.display = "none";
}
}
}
</script>
That is what the alt attribute is for: http://www.cs.tut.fi/~jkorpela/html/alt.htmlQuote:
Originally Posted by Scriptage
No it isn't. This replaces the image with a text node; run the code without the test image and you will see the distinct difference. You could also use the following code to degrade an image based menu into a completely text based menu.Quote:
PHP Code:<script type="text/javascript">
// Try to load a small image
var testImage = new Image;
testImage.src = "testimage.jpg";
onload = function(){
if(!testImage.complete){
// If the image has not loaded the user has disabled images in the browser
// Find all of the images on the web page
var documentImages = document.getElementsByTagName("img");
for(var i=0; i<documentImages.length; i++){
// Create and insert a text node after the image using the image's alternate text
if(documentImages[i].className == "menu"){
var replacementText = document.createTextNode(documentImages[i].alt);
documentImages[i].parentNode.insertBefore(replacementText, documentImages[i]);
// Hide the image
documentImages[i].style.display = "none";
}
}
}
}
</script>
If images have been disabled the user will see the alt value, try it and see.
Anyone with images disabled will almost certainly have JavaScript disabled.
Yes I know they see the alt value but they also see a box around the image and a cross; I sometimes browse with Javascript enabled and images off, I'm sure other people do aswell, especially in low bandwidth environments; I would be interested in seeing any explicit proof that people with images disabled do not have Javascript enabled.Quote:
If images have been disabled the user will see the alt value, try it and see.
Anyone with images disabled will almost certainly have JavaScript disabled.
Only with IE and it indicates that there is more visual information.Quote:
Originally Posted by Scriptage
