I created a blog about the Classical Gas segment on the Glen Campbell show, and kind of recreated it on that web page; it's now the theme of the slideshow in the upper left hand corner of my home page. Unfortunately that slideshow also introduced a problem on my home page. Once in a while I'd display a picture where the image file was missing; normally not a problem, because you just display some text about the picture, instead. However, the screen size allotted for the missing image would change, sometimes. Changing the size of the picture messes up the rest of my home page, sometimes. All of those sometimes means I would have to troubleshoot the issue too find out why I was getting this display anomaly.
I finally got around to troubleshooting the display problem, today. The first thing I did was make sure there were no errors in my HTML. No HTML problem, but I added a style statement in the <img> tag too make sure I wasn't getting a huge border added to the image by the web page I was getting the image from:
document.getElementById("targetDiv").innerHTML = "<img src= " + text + " width=\"300\" + height=\"240\" alt=\"Image file is missing\" style=\"border-width: 0; margin: 0\">";
...and I still got the infrequent change of image size. The next thing to try was changing the the alt text to the URL of the image. This way I could (hopefully) find out what <img> statements were messing up my home page. When I finally got a blank image that messed with the display size, I also stopped getting an alt text!
The <img> tag contains the URL of the image file it displays; src=URL (obviously passed to in in my code through a string called "text"). alt="Text message displayed when no image file is found in the attribute src=URL" isn't good enough when there is no value for src. I was still getting the message "image file is missing", but also incurred a display problem; the screen real estate for the image changed (to width="100%", the height didn't change). So the fix was testing for a substring in the variable "text" that had to be there. This change was put into the function that changes the image on my home page:
function callback(text)
{
if (text.toLowerCase().indexOf("http") == -1)
{
text = "http://community-info.org/DavePics/BuccaneerCheerleader.jpg";
}
document.getElementById("targetDiv").innerHTML = "<img src= " + text + " width=\"300\" + height=\"240\" alt=\"Image file is missing\"
style=\"border-width: 0; margin: 0\">";
setTimeout( "getDataReturnText('http://community-info.org/scripts/data.txt', callback);",1000);
}
The way this works is described in my blog you can view at http://community-info.org/web_images.html but to recap it here, I do the following:
(1) A web crawler (I wrote it in Perl) looks for <img> tags on the Internet too get the URL of the image files in those tags.
(2) The web crawler opens up a text file, data.txt, and puts the URL in that file.
(3)
My web page has an <img> tag in the upper left hand corner; a JavaScript
function changes the src attribute once a second by
a. opening the text file from step (2).
b. reads a string from the text file and sets the
value of a string, "text" to the value of that string.
c. Changes the value of the <img> tag's src
attribute with the string "text".
...but now if nothing is found in the string "text", I set it's value to BuccaneerCheerleader.jpg (it's an image of a Buccaneer cheerleader, in case you were wondering), and my screen doesn't get messed up anymore.