Disable images in javascript

[Yourself]

Is there anyway of disabling images in javascript, so that the alternative
text appears instead of the images?
I'm trying to do a text-only version of my site.

 

[Laurent Bugnion]

Hi,

Is there anyway of disabling images in javascript, so that the alternative
text appears instead of the images?
I'm trying to do a text-only version of my site.

Do you have to do that on the client? That sounds like a server-side job...

HTH,
Laurent

 

[Yourself]

Hi,


Do you have to do that on the client? That sounds like a server-side
job...

Yeah it would be nice to do it on the server, but the markup is coming from
a CMS which I can't modify.

 

[Laurent Bugnion]

Hi,

Yeah it would be nice to do it on the server, but the markup is coming from
a CMS which I can't modify.

I see.

Well, if you want to hide the pictures from the client, you can
- remove them from the document using DOM Level 2 methods (removeChild)
- hide them using CSS (style.display = "none")

But these two ways are not supported by every client. Especially mobile
clients (PDA) often don't allow this kind of JavaScript manipulations...

What is your target client? And also, what is the purpose of doing that?
If it's just to avoid loading the pictures, then it's not good (because
the pictures will be loaded even if they are hidden).

HTH,
Laurent

 

[Randy Webb]

Yourself said the following on 6/14/2006 7:13 AM:

Yeah it would be nice to do it on the server, but the markup is coming from
a CMS which I can't modify.

onload of the page, you loop through all images in the document.images
collection and set them to a false image that doesn't exist. Then, the
alt text gets displayed. It doesn't act exactly like disabled images (it
still shows the red X in IE) but it comes close.

Testing offline, FF doesn't change the image but online it does.

window.onload = breakImages;
function breakImages()
{
var totalImages = document.images.length;
for (var i=0;i<totalImages;i++)
{
document.images.src = 'fakeImage.jpg';
}
}

 

[Yourself]

Yourself said the following on 6/14/2006 7:13 AM:

Yeah it would be nice to do it on the server, but the markup is coming
from a CMS which I can't modify.

onload of the page, you loop through all images in the document.images
collection and set them to a false image that doesn't exist. Then, the alt
text gets displayed. It doesn't act exactly like disabled images (it still
shows the red X in IE) but it comes close.

Testing offline, FF doesn't change the image but online it does.

window.onload = breakImages;
function breakImages()
{
var totalImages = document.images.length;
for (var i=0;i<totalImages;i++)
{
document.images.src = 'fakeImage.jpg';
}
}

Thanks, that's something to go on!

 

[Evertjan.]

Randy Webb wrote on 15 jun 2006 in comp.lang.javascript:

Testing offline, FF doesn't change the image but online it does.

window.onload = breakImages;
function breakImages()
{
var totalImages = document.images.length;
for (var i=0;i<totalImages;i++)
{
document.images.src = 'fakeImage.jpg';
}
}

Using a container <span></span>:

====================================

<script type='text/javascript'>
window.onload = breakImages;

function breakImages() {
var im, myParent;
var i=document.images.length
while (--i+1) {
im = document.images
myParent = im.parentNode
myParent.innerHTML = im.alt
myParent.style.border='black 1px dotted'
}
}
</script>

<span>
<img src='alt1.gif' alt='My alt text 1'>
</span>
-
<span>
<img src='alt2.gif' alt='My alt text 2'>
</span>
-
<span>
<img src='alt3.gif' alt='My alt text 3'>
</span>

============================

 

[Yourself]

Randy Webb wrote on 15 jun 2006 in comp.lang.javascript:

Testing offline, FF doesn't change the image but online it does.

window.onload = breakImages;
function breakImages()
{
var totalImages = document.images.length;
for (var i=0;i<totalImages;i++)
{
document.images.src = 'fakeImage.jpg';
}
}

Using a container <span></span>:

====================================

<script type='text/javascript'>
window.onload = breakImages;

function breakImages() {
var im, myParent;
var i=document.images.length
while (--i+1) {
im = document.images
myParent = im.parentNode
myParent.innerHTML = im.alt
myParent.style.border='black 1px dotted'
}
}
</script>

<span>
<img src='alt1.gif' alt='My alt text 1'>
</span>
-
<span>
<img src='alt2.gif' alt='My alt text 2'>
</span>
-
<span>
<img src='alt3.gif' alt='My alt text 3'>
</span>

============================

That works well, but having to add a span around each image element is a
drag. It's a pity there is no way of replacing an element or changing an
elements type.

 

[Evertjan.]

Yourself wrote on 15 jun 2006 in comp.lang.javascript:

Using a container <span></span>:

====================================

function breakImages() {
var im, myParent;
var i=document.images.length
while (--i+1) {
im = document.images
myParent = im.parentNode
myParent.innerHTML = im.alt
myParent.style.border='black 1px dotted'

That works well, but having to add a span around each image element is
a drag. It's a pity there is no way of replacing an element or
changing an elements type.

There is, at least in IE6:

==========================

<script type='text/javascript'>
window.onload = breakImages;

function breakImages() {
var im, newNode;
var i=document.images.length
while (--i+1) {
im = document.images
newNode = document.createElement("SPAN");
im.replaceNode(newNode);
newNode.innerHTML = im.alt
newNode.style.border='black 1px dotted'
}
}
</script>


<img src='alt1.gif' alt='My alt text 1'>

<br><br>

<img src='alt2.gif' alt='My alt text 2'>

<br><br>

<img src='alt3.gif' alt='My alt text 3'>

====================