setting img src attribute conditionally in javascript Support
I'm new to this stuff & am having a tough time understanding how to write a basic if/then condition in an ASP/Javascript page in DreamweaverMX. My page contains a list of records from a db. I have a thumb image associated w/each row. whose source value is set by refererncing the imag location & name, as determined by a value from the dataset, as follows:
<img src="images/properties/<%=(rsListings.Fields.Item("mlsid").Value)%>_thumb.jpg" alt="noPhoto" name="listingPhoto" width="36" height="39" border="0">
This works fine, but I need to set the src value differently if there is no image for the record, as determined by the value of the "webImage" field in the data set.
Referring URL 1: http://www.bigbridge.net/vang/vlistings.asp (this does NOT have the condition, but it shows what I'm trying to do)
Here's my last attempt, without success:
_______________
<%
if (rsListings.Fields.Item("webImage").Value = True)
{
document.write('<img src="images"/properties/'+(rsListings.Fields.Item("mlsid").Value)+'_thumb.jpg alt="noPhoto" name="listingPhoto" width="36" height="39" border="0">');
}
else
{
document.write('<img src="images"/properties/nophoto_thumb.jpg alt="noPhoto" name="listingPhoto" width="36" height="39" border="0">');
%>
_________________
What am I doing wrong? Is there another way to do this? I've tried about 50 different variations and can't get it right. Any help is much appreciated. My page (w/o the condition) is at the referring URL.
Thanks,
CBRUNO
Comments
Hi i have a fix for you!!!!!!!!!!
I have an old fix i used a long time ago on my images. THIS WILL ONLY WORK IN INTERNET EXPLORER!
USE THE FOLLOWING CODE:
<script language="JavaScript">
// I HOPE THIS IS THE ORIGINAL CREDIT FOR THIS SCRIPT IF NOT DONT KILL ME J/K
// (c) 2002 Premshree Pillai,
// Created : July 4th, 2002
// Web : http://www.qiksearch.com,
// http://javascript.qik.cjb.net,
// E-mail : qiksearch@rediffmail.com
function checkImages()
{
if(document.getElementById)
{
var imagesArr = new Array();
var setDefaultErrImg="image_nf.gif"; // Default image to be displayed on error
var setDefaultErrTxt="Image Not Found"; // Default text to be displayed on error
imagesArr = document.getElementsByTagName("img");
for(var i="0;" i<imagesArr.length; i++)
{
if(!imagesArr[0].getAttribute("nc")=="1")
{
var tempimgattrib="imagesArr"[i].getAttribute("alt");
imagesArr[i].setAttribute("alt","");
if(imagesArr[i].width=="28" && imagesArr[i].height=="30")
{
imagesArr[i].src=setDefaultErrImg;
imagesArr[i].setAttribute("alt",setDefaultErrTxt);
}
else
{
imagesArr[i].setAttribute("alt",tempImgAttrib);
}
}
}
}
}
window.onload=checkImages;
</script>
Do not specify the width and height attributes in the <IMG> tag. (The browser will render the image with its actual size)
If, you have an image with dimensions 28 x 30, then add the attribute-value pair nc="1" in the <IMG> tag. The script will ignore such images.
HOPE THIS HELPS YOU AND I HAVE HAD THIS SCRIPT A LONG TIME SO THE CREDIT MIGHT BE WRONG. HAVE FUN AND MAKE SURE YOU CHECK OUT MY OTHER TUTORIALS!
<<< FAIRCHILD118
WEBMASTER@ECHOVOICE.COM
MIKE OLSEN
ECHOVOICE
Ok.
From what I can see the first anwser is a little bit of overkill. What you where doing is close to right. But you have to rember what knid of object it is you are performing the check on. In you case if I am reading right you a performing a check on the Image name in the database. So to be able to determine if you should show the image or an alternative you have to check if the image name field is empty or not. So what you would normally do is somthing like this (this assumes your filed is null when not filed is it is an empty filed you will need to do it slightly different)
if IsNull(rsListings.Fields.Item("webImage").Value = True)
{
document.write('<img src="images"/properties/nophoto_thumb.jpg alt="noPhoto" name="listingPhoto" width="36" height="39" border="0">');
}
else
{
document.write('<img src="images"/properties/'+(rsListings.Fields.Item("mlsid").Value)+'_thumb.jpg alt="noPhoto" name="listingPhoto" width="36" height="39" border="0">');
%>
You may also need to add another check and that is for an empty string so it could be a little like this
if IsNull(rsListings.Fields.Item("webImage").Value) = True OR (rsListings.Fields.Item("webImage").Value = ""
{
document.write('<img src="images"/properties/nophoto_thumb.jpg alt="noPhoto" name="listingPhoto" width="36" height="39" border="0">');
}
else
{
document.write('<img src="images"/properties/'+(rsListings.Fields.Item("mlsid").Value)+'_thumb.jpg alt="noPhoto" name="listingPhoto" width="36" height="39" border="0">');
%>
I am not sure if ISNull is the right function for Javascript aps because I normally use ASP and VBscript I think the function for Javascript is isNaN.
I hope this helps
You must me logged in to write a comment.