Normally if you try to display an image on your web pagebut the image file is missing, the browser will display ALT text.
For my homepage slideshow, I no longer do that; I display a picture
of this Ferrari 512S from 1969.
Normally if you try to display an image on your web pageThe trick is to not use the <img> tag, but use the <object> tag! It's amazing that html text books don't even bother to go into this. There are html chapters about how to write great ALT tags, so your viewers can read about the image they're supposed to be viewing, but nothing about how to display an alternate image if the one you were originally trying to display has gone missing. Actually, I did get my idea from an html textbook about how to emulate the <img> tag with an <object> tag, but it talked about how to get ALT text to show up when embedding an object inside another object (so if one image wasn't supported, the embedded image would be displayed)!
Today's browsers support jpeg, png and gif files, so it's not necessary to use
<object> tags too support different image file types. ...but you have to use
the <object> tag so you can embed an <img> tag into it. If the file in
the <object> tag is missing, the file in the <img> tag will be displayed,
not ALT text. If the image file in the <img> tag is also missing, then the ALT text
in the <img> tag will be displayed. Here's my html:
<html>
<head>
<title>Classical Gas</title>
<script type="text/javascript" language="javascript">
var SpockArr = [];
SpockArr[0] = "http://community-info.org/DavePics/Spock/AlternateUniverse.jpg";
SpockArr[1] = "http://community-info.org/DavePics/Spock/Cat.jpg";
SpockArr[2] = "http://community-info.org/DavePics/Spock/Combat.jpg";
SpockArr[3] = "http://community-info.org/DavePics/Spock/Disbelief.jpg";
SpockArr[4] = "http://community-info.org/DavePics/Spock/Fascinating.jpg";
SpockArr[5] = "http://community-info.org/DavePics/Spock/GirlFriend.jpg";
SpockArr[6] = "http://community-info.org/DavePics/Spock/GuideToDating.jpg";
SpockArr[7] = "http://community-info.org/DavePics/Spock/LiveLongAndProsper.jpg";
SpockArr[8] = "http://community-info.org/DavePics/Spock/Logic.jpg";
SpockArr[9] = "http://community-info.org/DavePics/Spock/MindMeld.jpg";
SpockArr[10] = "http://community-info.org/DavePics/Spock/MovieSpock.jpg";
SpockArr[11] = "http://community-info.org/DavePics/Spock/One.jpg";
SpockArr[12] = "http://community-info.org/DavePics/Spock/Phaser.jpg";
SpockArr[13] = "http://community-info.org/DavePics/Spock/Pilot.jpg";
SpockArr[14] = "http://community-info.org/DavePics/Spock/RaisedEyebrow.jpg";
SpockArr[15] = "http://community-info.org/DavePics/Spock/ArcherVulcanSaute.jpg";
SpockArr[16] = "http://community-info.org/DavePics/Spock/SpockAndUhuru.jpg";
SpockArr[17] = "http://community-info.org/DavePics/Spock/SpockInside.jpg";
SpockArr[18] = "http://community-info.org/DavePics/Spock/SpockOnVulcan.jpg";
SpockArr[19] = "http://community-info.org/DavePics/Spock/SpockOutside.jpg";
SpockArr[20] = "http://community-info.org/DavePics/Spock/SpockRedBackground.jpg";
SpockArr[21] = "http://community-info.org/DavePics/Spock/SpockShip.jpg";
SpockArr[22] = "http://community-info.org/DavePics/Spock/StarWars.jpg";
SpockArr[23] = "http://community-info.org/DavePics/Spock/Sunset.jpg";
SpockArr[24] = "http://community-info.org/DavePics/Spock/T'Pol.jpg";
SpockArr[25] = "http://community-info.org/DavePics/Spock/T'PolAndDoctor.jpg";
SpockArr[26] = "http://community-info.org/DavePics/Spock/T'PolBaby.jpg";
SpockArr[27] = "http://community-info.org/DavePics/Spock/T'PolBridge.jpg";
SpockArr[28] = "http://community-info.org/DavePics/Spock/T'PolPhaser.jpg";
SpockArr[29] = "http://community-info.org/DavePics/Spock/T'PolTrip.jpg";
SpockArr[30] = "http://community-info.org/DavePics/Spock/Tricorder.jpg";
SpockArr[31] = "http://community-info.org/DavePics/Spock/VulcanLegionOfHonor.jpg";
SpockArr[32] = "http://community-info.org/DavePics/Spock/WhiteBackground.jpg";
SpockArr[33] = "http://community-info.org/DavePics/Spock/Surak.jpg";
SpockArr[34] = "http://community-info.org/DavePics/Spock/T'PolArmed.jpg";
SpockArr[35] = "http://community-info.org/DavePics/Spock/T'PringAndSpock.jpg";
SpockArr[36] = "http://community-info.org/DavePics/Spock/Selfie.jpg";
function getDataReturnText(dataSource, callback)
{
var XMLHttpRequestObject = false;
if (window.XMLHttpRequest)
{
XMLHttpRequestObject = new XMLHttpRequest();
}
else if (window.ActiveXObject)
{
XMLHttpRequestObject = new
ActiveXObject("Microsoft.XMLHTTP");
}
if(XMLHttpRequestObject)
{
XMLHttpRequestObject.open("GET", dataSource);
XMLHttpRequestObject.onreadystatechange = function()
{
if (XMLHttpRequestObject.readyState == 4 &&
XMLHttpRequestObject.status == 200)
{
callback(XMLHttpRequestObject.responseText);
}
}
XMLHttpRequestObject.send(null);
}
}
function callback(text)
{
var cntr = randomnumber=Math.floor(Math.random()*SpockArr.length);
if ((text.toLowerCase().indexOf("http") == -1) || (text.toLowerCase().indexOf("trans.gif") > -1))
{
text = "SpockArr[cntr]";
}
if (text.toLowerCase().indexOf('trans') > -1)
{
text = "http://community-info.org/DavePics/MB300SLR.jpg";
}
if (document.getElementById("imageObject").naturalWidth == 0)
{
text = "http://community-info.org/DavePics/BettyPageBikini.jpg";
}
document.getElementById("targetDiv").innerHTML = '<object width="100%" height="100%" id="imageObject" data=' + text + ' type="image/jpeg">
<img src="http://community-info.org/DavePics/512SProduction.jpg"
alt="Ferarri 512S" /></object>';
setTimeout( "getDataReturnText('http://community-info.org/scripts/data.txt', callback);",10);
}
</script>
</head>
<body onload="getDataReturnText('http://community-info.org/scripts/data.txt', callback)">
<div id="targetDiv">
<OBJECT id="imageObject" data="http://cinematicpassions.files.wordpress.com/2011/05/nicksfix183.jpg" type="image/jpeg">
<img src="http://community-info.org/DavePics/512SProduction.jpg" alt="Ferrari 512S" />
</OBJECT>
</div>
</body>
</html>
I already had a BettiePageBikini.jpg file in my picture directory, so I named this one
BettyPageBikini.jpg Check the code out and you'll see I show Vulcan pictures if I can't
determine the full url of the image file or if it's name is 'trans.gif' (a very common spacer
file on the Internet). If I still get the string 'trans' in the file name, I display a Mercedes
Benz 300SLR; a very rare event. I've never seen the Bettie Page picture come up, but that only
would happen if the original picture had a size of zero; just testing for a possible case. I also
tweaked up my Perl script that crawls the Internet for image files; that helps the slideshow, but
is off topic for this blog (maybe I'll do another blog about it).