PDA

View Full Version : Check if image exists?

wuffy77
10-17-2007, 05:47 PM
Hi,

I've created (well no, not really - Coothead's created!) a very clever gallery and the only remaining quirk is that for some of the generated links, no image will exist.

So is it possible to write a script that will check if an image exists, ie:

Have a link in my doc called:
<img src="image1.jpg" alt=""/>

And if image1.jpg doesn't exist, change it to a different image that I could have a 'no image present' text on?

Not sure if this is even possible, so please let me know if I'm wasting my time! :burnt:
BonRouge
10-17-2007, 11:46 PM
You can do this with php...<?php
if (file_exists($image_file_name)) {
$image=$image_file_name;
}
else {
$image=$no_image_file_name;
}
echo "<img src=\"$image\" alt=\"\" >";
?>

I hope that helps.
wuffy77
10-18-2007, 02:08 AM
hmm unfortunately it's for an offline app, so javascript's all I've got really.

could something like this work?

<img src="test.jpg" onError="document.write('No pic possible')">

If that works, would it be possible to have an onError that rewrites the src= to my custom '404.jpg'?

(sorry I may be just making the above up!
BonRouge
10-18-2007, 02:35 AM
Try this:window.onload=function() {
var imgs=document.getElementsByTagName('img');
for (i=0; i<imgs.length; i++) {
var iWidth=imgs[i].offsetWidth;
if (iWidth<29) { // IE says that the the no-image X is 28px wide
imgs[i].src="404.jpg";
}
}
}
wuffy77
10-18-2007, 01:00 PM
Hi BonRouge - very clever!

That looks like it'll work a treat - I've got it working on it's own, but when I integrate it with the below script that Coothead kindly invented it doesn't work any more:

Could this be because they both have onload functions? If so, is there a way to work around this?


var preload=new Array('../../../Textures/color/armor001_colo.png','../../../Textures/color/armor002_colo.png','../../../Textures/color/armor003_colo.png','../../../Textures/color/armor004_colo.png','../../../Textures/color/armor005_colo.png','../../../Textures/color/armor006_colo.png');
var loader=new Array();
for(i= 0;i< preload.length;i++){
loader[i]=new Image();
loader[i].src=preload[i];
}
window.onload=function() {
anc=document.getElementById('imglist').getElementsByTagName('a');
for(c=0;c<anc.length;c++) {
anc[c].onmouseover=function() {
swapImage(this.href);
}
}
}
function swapImage(pic) {
document.getElementById('targetImg').src=pic;
}
wuffy77
10-18-2007, 01:19 PM
hmm, thought I was being clever with the below, but it doesn't work:



***** start of external file ********
var preload=new Array('../../../Textures/color/armor001_colo.png','../../../Textures/color/armor002_colo.png','../../../Textures/color/armor003_colo.png','../../../Textures/color/armor004_colo.png','../../../Textures/color/armor005_colo.png','../../../Textures/color/armor006_colo.png');
var loader=new Array();
for(i= 0;i< preload.length;i++){
loader[i]=new Image();
loader[i].src=preload[i];
}

function hover() {
anc=document.getElementById('imglist').getElementsByTagName('a');
for(c=0;c<anc.length;c++) {
anc[c].onmouseover=function() {
swapImage(this.href);
}
}
}
function swapImage(pic) {
document.getElementById('targetImg').src=pic;
}

***** end of external file ********



<script type="text/javascript">
function null() {
var imgs=document.getElementsByTagName('img');
for (i=0; i<imgs.length; i++) {
var iWidth=imgs[i].offsetWidth;
if (iWidth<29) { // IE says that the the no-image X is 28px wide
imgs[i].src="404.jpg";
}
}
}
</script>
<script type="text/javascript" src="../../js/hover.js"></script>

</head>


<body onload="hover();null()">
BonRouge
10-18-2007, 09:51 PM
I'm not sure what you're doing with the rest of the stuff there, but what I gave you does work.
BillyGalbreath
10-18-2007, 10:48 PM
var preload=new Array('../../../Textures/color/armor001_colo.png','../../../Textures/color/armor002_colo.png','../../../Textures/color/armor003_colo.png','../../../Textures/color/armor004_colo.png','../../../Textures/color/armor005_colo.png','../../../Textures/color/armor006_colo.png');
var loader=new Array();
for(i= 0;i< preload.length;i++){
loader[i]=new Image();
loader[i].src=preload[i];
}
function setRollovers() {
anc=document.getElementById('imglist').getElementsByTagName('a');
for(c=0;c<anc.length;c++) {
anc[c].onmouseover=function() {
swapImage(this.href);
}
}
}
function swapImage(pic) {
document.getElementById('targetImg').src=pic;
}
function chkImgs() {
var imgs=document.getElementsByTagName('img');
for (i=0; i<imgs.length; i++) {
var iWidth=imgs[i].offsetWidth;
if (iWidth<29) { // IE says that the the no-image X is 28px wide
imgs[i].src="404.jpg";
}
}
}
window.onload=function() {
setRollovers();
chkImgs();
}


;)
wuffy77
10-19-2007, 01:58 AM
ah! clever BillyGalbraith - thanks very much - that makes perfect sense.
wuffy77
10-19-2007, 04:49 PM
ok so is it possible to have the javascript delete li item that doesn't match?


function chkImgs() {
var imgs=document.getElementsByTagName('img');
for (i=0; i<imgs.length; i++) {
var iWidth=imgs[i].offsetWidth;
if (iWidth<29) { // IE says that the the no-image X is 28px wide
imgs[i].src="404.jpg";
}
}

I guess I could just have a separate script that goes down the <li> and if it fails the above check, it deletes that <il>? Is that possible?

I'm sure I saw a .deletechild thing somewhere...?
wuffy77
10-20-2007, 03:57 AM
Hmm I've got an array set up like this:


<script type="text/javascript">
var preload=new Array('../../../Textures/color/armor001_colo.png','../../../Textures/color/armor002_colo.png','../../../Textures/color/armor003_colo.png','../../../Textures/color/armor004_colo.png','../../../Textures/color/armor005_colo.png','../../../Textures/color/armor006_colo.png');


And this array corresponds to the ordering of the <li>s (ie the first item in the array is the first listed item and so on...)

So I tried making a loop that goes through based on BonRouge's code, that changes it to a 404.jpg:

var imgs=document.getElementsByTagName('img');
for (i=0; i<imgs.length; i++) {
var iWidth=imgs[i].offsetWidth;
if (iWidth<29) { // IE says that the the no-image X is 28px wide
imgs[i].src="404.jpg";
}
}
}


So I tried changing this line:
imgs[i].src="404.jpg";

to this:

document.getElementById('imglist').child[i]=this.parentNode.removeChild(i);

Thought I was being clever, but it doesn't work! ;)

Here's the UL in question:
<ul id="imglist" name="imglist">
<li><a href="1_colo.png">1</a></li>
<li><a href="2_colo.png">2</a></li>
<li><a href="3_colo.png">3</a></li>
<li><a href="4_color.png">4</a></li>
<li><a href="5_colo.png">5</a></li>
<li><a href="6_colo.png">6</a></li>
</ul>

Please help!
BonRouge
10-20-2007, 08:32 AM
Are you sure about the html you posted there? You have links to images rather than images themselves? If that's so, then the code I gave you shouldn't be working for you. I thought you had the images in a list.
wuffy77
10-20-2007, 09:50 AM
Hi BonRouge - yeah it's a little complicated as I'm integrating two scripts:

- one cool script by you
- one cool script by Coothead

Effectively I've got a page with a large centre image appearing and then a right navigation that will change the main image when you hover over the list items (if you click the right navigation it loads the original images (hence the links).

So I've just posted the html for the UL (rather than several pages of html for the full thing).

Your code worked great for the image - but after getting it working, I realised (as you have) that the menu would still have links to the image!

So now I'm thinking if I used your exact same code, but instead of triggering an image change, I triggered the deletion of the menu item, it'd work perfectly.

Sorry if I'm unclear, I'm happy to send any extra code if it helps - I'm hoping Coothead might pop in as he wrote a lot of the code there (apart from your bit, so he probably understands it better than I do!)
BonRouge
10-20-2007, 10:07 AM
So the numbers in the list are just numbers? There's no image there? Where are the images? I think I need to see the rest of the html.
wuffy77
10-20-2007, 10:22 AM
Hi BonRouge - ok I've uploaded here (http://www.cgenie.net/temp/armor001-test.html):

Hopefully this'll give you an idea (as the images are 6 megs each, I've left them out for now! ;) )
BonRouge
10-20-2007, 12:58 PM
OK, I really hope this helps, because it's taken me ages to figure it out... http://bonrouge.com/demos/remove_item.htm
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>remove list item when the image it links to doesn't exist</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<script type="text/javascript">


function checkImages() {
var list=document.getElementById('imglist');
var lItems=list.getElementsByTagName('li');
var imgs=[];
for (b=0; b<lItems.length; b++) {
imgs.push(lItems[b].getElementsByTagName('a')[0].href);
}
for (i=0; i<imgs.length; i++) {
var img = new Image;
img.onerror=function(){
for (j=0; j<lItems.length; j++) {
if(lItems[j].getElementsByTagName('a')[0].href==this.src) {
lItems[j].parentNode.removeChild(lItems[j]);
}
}
}
img.src = imgs[i];
}
}
window.onload=checkImages;
</script>
</head>
<body>
<ul id="imglist">
<li><a href="images/wine.jpg">wine</a></li>
<li><a href="images/breer.jpg">beer</a></li>
<li><a href="images/whisky.jpg">whisky</a></li>
</ul>
</body>
</html>


(Notice the 'beer' image that is linked to doesn't exist because it's spelt wrong).
wuffy77
10-20-2007, 01:45 PM
that's superb BonRouge! You've no idea how much that's helped - incredibly clever!

Thank you so much!
BonRouge
10-20-2007, 11:56 PM
Cool. :)