...

View Full Version : Default image using javascript



howie2009
07-28-2009, 12:04 PM
Hi Guys,
I originally posted his in HTML forum but reckon it belongs here
I have users uploading images and the image is displayed as

<img src="{src}" {width} {height} border="0" hspace="0" alt="{alt}">

where {src} could be eg images/my_image.jpg i.e the filepath to the image that the user uploads

I would like javascript that would say:

IF {src} is left blank
Then src would be equal to images/default.gif

Here's my attempt

function defaultImage()
{
if(src=="") {
default_image="images/default.gif";
}
}


... syntax is probably wrong tho.
If you can suggest a javascript snippet how would I integrate it into:
<img src="{src}" {width} {height} border="0" hspace="0" alt="{alt}">

THANKS!

Amphiluke
07-28-2009, 01:24 PM
Will you please give some more specific information on when the function has to be called? In most cases, one can set an id attribute (say, id="imgId") to an object and then use the getElementById method.

function defaultImage() {
var im = document.getElementById("imgId");
im.src = (im.src == "") ? "images/default.gif" : im.src;
}

12 Pack Mack
07-28-2009, 01:41 PM
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>None</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript">

function init(){

var nImg = document.images;
for (i=0; i<nImg.length; i++)
{
if (!nImg[i].complete || nImg[i].width < 1)
{
nImg[i].src = "./images/default.jpg"; // default image;
}
}
}

navigator.appName == "Microsoft Internet Explorer" ? attachEvent('onload', init, false) : addEventListener('load', init, false);

</script>
</head>
<body>
<img src="./images/ve2.jpg" width="120" height="90">
<br>
<img src="./images/ve2.jpg" width="120" height="90">
<br>
<img src="./images/ve2.jpg" width="120" height="90">
<br>
<img src="./images/ve2.jpg" width="120" height="90">

</body>
</html>

howie2009
07-28-2009, 02:08 PM
Hi please see code below: Section is in red. where should i place that function please? How also should I alter <img src="{src}" {width} {height} border="0" hspace="0" alt="{alt}"> to suit the function.
THANKS





<NOSCRIPT>
<META HTTP-EQUIV="refresh" content="0;URL=page.php?page=javascript">
</NOSCRIPT>


<script type="text/javascript" src="lightbox/js/prototype.js"></script>
<script type="text/javascript" src="lightbox/js/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="lightbox/js/lightbox.js"></script>
<style type="text/css">
<!--
.style31 {color: #0000FF}
-->
</style>
<head>
<script type="text/javascript">
<!--
function popup(){
window.open('tell_a_friend.php', 'tellafriend_script','scrollbars=1,statusbar=1,resizable=1,width=400,height=510');
}

function MM_openBrWindow(theURL,winName,features) { //v2.0
window.open(theURL,winName,features);
}


//-->
</script>
<link rel="stylesheet" href="lightbox/css/lightbox.css" type="text/css" media="screen">

<style type="text/css">
<!--
body {
background-color: #FFFFFF;
}
.style24 {
color: #0000FF;
font-weight: bold;
}
.style25 {color: #FFFFFF}
.style29 {font-size: 12px}
.style30 {font-size: 12px; color: #000000; }
-->
</style>
<div class="block-ads-details">
<table width="100%" cellspacing="0" cellpadding="0" border="0" class="titleTop">
<tr>
<td class="titleTopLeft"><img src="images/tr.gif" class="titleTopImgLeft" alt=""></td>
<td class="titleTopCenter">
<table border=0 align="left" cellpadding=0 cellspacing=0>
<tr><td><div>..:: {item_title} ::.. </div></td></tr></table> </td>
<td width="14%" align="right" class="titleTopCenter">
<a href="{ads_print_href}?item_id={item_id}"></a><a onClick="window.open('{tell_friend_href}','tell_friend','toolbar=no,scrollbars=yes,resizable=no,width=425,hei ght=400');return false;" href="{tell_friend_href}"></a> </td>
<td width="12%" align="right" class="titleTopCenter"><a href="/ireland/report_ad/report_ad.html" target="_blank"></a></td>
<td width="14%" class="titleTopRight">&nbsp;</td>
</tr>
</table>
<table width="100%" border="0" cellspacing="0" cellpadding="0" class="block">
<tr>
<td class="blockTD">

<!-- begin no_item -->
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr><td align="center" class="padding10px"><div class="errorbg">{NO_AD_MSG}</div><td></tr>
</table>
<!-- end no_item -->

<!-- begin item -->
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td class="padding10px">
<!-- start item table -->
<form name="form_{item_id}" action="{ads_details_href}" method="post">
<table width="100%" border="0" cellspacing="0" cellpadding="3">
<tr>
<td width="25%" height="264" align="left" class="defaultimage">
<!-- begin big_image --><a href="{ads_details_href}?item_id={item_id}&category_id={category_id}"><img src="{src}" {width} {height} border="0" hspace="0" alt="{alt}"></a><!-- end big_image --> </td>
<td align="left" valign="top">
<div>
<table width="594" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="291"><img src="../../../logo_small.gif" width="241" height="43" /></td>
<td width="98"><div align="center"><a onClick="window.open('{tell_friend_href}','tell_friend','toolbar=no,scrollbars=yes,resizable=no,width=425,hei ght=400');return false;" href="{tell_friend_href}"><img src="../../../tell_a_friend.gif" alt="{TELL_FRIEND_TITLE}" width="64" height="64" hspace="5" border="0" align="absmiddle"></a></div></td>
<td width="98"><div align="center"><font style="cursor:pointer">
<img src="../../../report_ad.gif" alt="Click To Report This Ad" width="64" height="64" hspace="5" border="0" align="absmiddle" onclick="MM_openBrWindow('report_this_ad.htm','ReportAd','width=700,height=550')"></font></div></td>
<td width="107"><div align="center"><font style="cursor:pointer"><img src="../../../print_this_page.gif" alt="{PRINTER_FRIENDLY_MSG}" width="64" height="64" border="0" align="absmiddle" onmousedown="MM_openBrWindow('{ads_print_href}?item_id={item_id}','print','scrollbars=yes,width=950,height=800')"></a></font></div></td>
</tr>
<tr>
<td>&nbsp;</td>
<td> <div align="center" class="style31">Tell A Friend </div></td>
<td> <div align="center" class="style31">Report Ad </div></td>
<td><div align="center" class="style31">Print This Page </div></td>
</tr>
</table>
<p>&nbsp;</p>
<p><b>{TYPE_MSG}</b>:&nbsp;{type_name}<br>
<b>{PRICE_MSG}</b>:&nbsp;<font class="ourprice">{price}</font><br>
<!-- begin user_block -->
<b>{AD_SELLER_MSG}</b>:&nbsp;{user_name}<br>
<!-- end user_block -->
<!-- begin quantity_block -->
<b>{AD_QTY_MSG}</b>:&nbsp;{quantity}<br>
<!-- end quantity_block -->
<!-- begin availability_block -->
<b>{AD_AVAILABILITY_MSG}</b>:&nbsp;{availability}</font><br>
<!-- end availability_block -->
<!-- begin location_block -->
<b>{AD_LOCATION_MSG}</b>:&nbsp;{location}</p>
<p><br>
<!-- end location_block -->
</p>
</div>

<!-- begin properties --> <b>{property_name}</b>: {property_value}<br> <!-- end properties --> </td>
</tr>
</table>
</form>

</td>
</tr>
</table>
<!-- end item -->


<!-- begin tabs -->
<table border="0" cellspacing="0" cellpadding="5">
<tr>
<!-- BEGIN tab_desc -->
<td class="usualbg">&nbsp;</td><td class="{tab_style}"><a href="{tab_href}" class="{tab_style}">{AD_DESCRIPTION_MSG}</a>&nbsp;</td>
<!-- END tab_desc -->
<!-- begin tab_spec -->
<td class="usualbg">&nbsp;</td><td class="{tab_style}">&nbsp;<a href="{tab_href}" class="{tab_style}">{AD_SPECIFICATION_MSG}</a>&nbsp;</td>
<!-- end tab_spec -->
<!-- begin tab_images -->
<td class="usualbg">&nbsp;</td><td class="{tab_style}">&nbsp;<a href="{tab_href}" class="{tab_style}">{IMAGES_MSG}</a>&nbsp;</td>
<!-- end tab_images -->
</tr>
</table>
<table width="100%" border="0" cellspacing="0" cellpadding="0" class="tabline">
<tr><td height=2><img src="images/tr.gif" width="1" height="2" border="0"></td></tr>
</table>
<!-- end tabs -->


<!-- begin description_block -->
<!-- begin title_desc -->
<table width="100%" border="0" cellspacing="0" cellpadding="6">
<tr>
<td height="27" class="middlebg3"><div class="style30"> <span class="style25"><strong>..::</strong> {AD_DESCRIPTION_MSG}<strong> ::.. </strong></span></div></td>
</tr>
</table>
<!-- end title_desc -->
<table width="100%" border="0" cellspacing="0" cellpadding="10">
<tr>
<td height="39"><!-- begin description -->
<div>{full_description}</div><!-- end description --></td>
</tr>
</table>
<!-- end description_block -->


<!-- begin specification -->
<!-- begin title_spec -->
<br>
<table width="100%" border="0" cellspacing="0" cellpadding="6">
<tr>
<td class="middlebg"><div class="bigtitle">&nbsp;{AD_SPECIFICATION_MSG}</div></td>
</tr>
</table>
<!-- end title_spec -->
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr><td class="padding10px">
<!-- begin groups -->
<table cellspacing=0 cellpadding=0 width="100%" align=center class=headerbg border=0>
<tr><td>
<table cellspacing=1 cellpadding=4 width="100%" align=center border=0>
<tr>
<td class="headerbg" colspan=2><b>{group_name}</b></td>
</tr>
<!-- begin features -->
<tr>
<td class="middlebg" valign=top width="35%">{feature_name}</td>
<td class="usualbg" valign=top>{feature_value}</td>
</tr>
<!-- end features -->
</table>
</td></tr>
</table>
<!-- end groups -->
</td></tr>
</table>
<!-- end specification -->


<!-- begin images -->
<!-- begin title_images -->
<br>
<table width="100%" border="0" cellspacing="0" cellpadding="6">
<tr>
<td class="middlebg3"><div class="style29"><span class="style25"><strong>..:: </strong>{IMAGES_MSG}<strong> ::.. </strong></span></div></td>
</tr>
</table>
<!-- end title_images -->
<br>
<table cellSpacing=0 cellPadding=5 width="100%" align=center border=0>
<!-- begin images_rows -->
<tr valign="top" align="center">
<!-- begin images_cols -->
<td height="138">
<div class="title"></div>
<p>&nbsp;</p>
<table width="260" border="0">
<tr>
<td align="center"><div align="center" class="style24">
<div align="left">{image_title}</div>
</div></td>
<td align="center">&nbsp;</td>
</tr>
<tr>
<td colspan="2"><div align="center">
<table width="100%" border="0" align="left">
<tr>
<td align="left"><div align="left"><a href="{image_large}" target="_blank" rel="lightbox" title="&copy;theFreeAdsWebsite.com: {image_title}"><img src="{image_small}" alt="Click To View Larger Image" border="0" {image_width} {image_height} /></a><a href="{image_large}" target="_blank" rel="lightbox" title="&copy;theFreeAdsWebsite.com: {image_title}"></div></td>
<td align="left"><a href="{image_large}" target="_blank" rel="lightbox" title="&copy;theFreeAdsWebsite.com: {image_title}">
<div align="left"><img src="../../preview.gif" alt="Click To View Larger Image"width="39" height="47" style="border:none;" /></div></td>
</tr>
</table>
</div></td>
</tr>
<tr>
<td colspan="2" align="center"><div align="left">{image_description}</div></td>
</tr>
<tr>
<td colspan="2"><div align="left"></div></td>
</tr>
</table>
<p><a href="{image_large}" target="_blank" rel="lightbox" title="&copy;theFreeAdsWebsite.com: {image_title}"></p>
<div class="smallText"></div>
</td>
<!-- end images_cols -->
</tr>
<tr><td colspan="2">&nbsp;</td></tr>
<!-- end images_rows -->
</table>
<!-- end images -->

</td>
</tr>
</table>
<table width="100%" cellspacing="0" cellpadding="0" border="0" class="titleBot">
<tr>
<td class="titleBotLeft"><img src="images/tr.gif" class="titleBotImgLeft" alt=""></td>
<td class="titleBotRight"><img src="images/tr.gif" class="titleBotImgRight" alt=""></td>
</tr>
</table>


<table width="100%" cellspacing="0" cellpadding="0" border="0" class="titleTop">
<tr>
<td class="titleTopLeft"><img src="images/tr.gif" class="titleTopImgLeft" alt=""></td>
<td class="titleTopCenter">
<table cellspacing=0 cellpadding=0 border=0><tr><td><div>{AD_REQUEST_TITLE}</div></td>
</tr></table>
</td>
<td class="titleTopRight"><img src="images/tr.gif" class="titleTopImgRight" alt=""></td>
</tr>
</table>
<table width="100%" border="0" cellspacing="0" cellpadding="0" class="block">
<tr>
<td class="blockTD">

<table width="100%" cellspacing="0" cellpadding="0" border="0">
<tr class="usualbg">
<td valign="top" class="padding10px">

<table width="100%" border="0" cellspacing="1" cellpadding="4" align="center">
<form name="review" action="{ads_details_href}" method="post">
<input type="hidden" name="rnd" value="{rnd}">
<input type="hidden" name="operation" value="1">
<input type="hidden" name="item_id" value="{item_id}">
<input type="hidden" name="category_id" value="{category_id}">

<tr class="usualbg"><td colspan="2">&nbsp;</td></td>
<!-- begin request_sent -->
<tr class="usualbg">
<td colspan="2" align="center"><div class="messagebg"><b>{AD_SENT_MSG}</b></div></td>
</td>
<!-- end request_sent -->
<!-- begin errors -->
<tr class="usualbg">
<td colspan="2" align="center" class="errorbg">&nbsp;{errors_list}</td>
</td>
<!-- end errors -->
<tr class="usualbg">
<td>&nbsp;{PRICE_MSG} ({currency_sign})</td>
<td><input class="text" type="text" name="offer_price" size="50" value="{offer_price}" maxlength="64"></td>
</tr>
<tr class="usualbg">
<td>&nbsp;{AD_OFFER_MESSAGE_MSG} *</td>
<td><textarea name="offer_message" cols="50" rows="10">{offer_message}</textarea></td>
</tr>
<tr class="middlebg">
<td></td>
<td>
<span class="submit"><input class="submit" type="submit" value="{AD_REQUEST_BUTTON}"></span>
</td>
</tr>
</form>
</table>

</td>
</tr>
</table>

</td>
</tr>
</table>
<table width="100%" cellspacing="0" cellpadding="0" border="0" class="titleBot">
<tr>
<td class="titleBotLeft"><img src="images/tr.gif" class="titleBotImgLeft" alt=""></td>
<td class="titleBotRight"><img src="images/tr.gif" class="titleBotImgRight" alt=""></td>
</tr>
</table>
</div>

12 Pack Mack
07-28-2009, 02:17 PM
You don't need to do anything to the <img> tags. The code works upon all the images in the document, automatically. Any image that fails to load, will be replaced by the default image src, automatically.

Set the default image width and height, as shown in red.


function init(){

var nImg = document.images;
for (i=0; i<nImg.length; i++)
{
if (!nImg[i].complete || nImg[i].width < 1)
{
nImg[i].src = "./images/Cleve1.jpg"; // default image;
nImg[i].style.width = "120px";
nImg[i].style.height = "90px";
}
}
}

howie2009
07-28-2009, 02:30 PM
Thanks,

the function did something alright but the default image doesnt show. Ther must be a conflict. The images are replaced by placeholders. see http://www.thefreeadswebsite.com/ireland/999.html

The existing newspaper image is a background image i was testing.

Thanks

howie2009
07-28-2009, 02:34 PM
Hi,
maybe u can incorporate if the image is null into the function? The function is placed at top of the page if it matters
Thanks

12 Pack Mack
07-28-2009, 02:35 PM
Check the path of the default image. I have set to a folder named: "images", which is in the root folder.

Or, maybe your host doesn't allow you to control things like this, because of those "placeholders."

Nothing more I can do.

howie2009
07-28-2009, 02:35 PM
No prob. Thanks for helping.

12 Pack Mack
07-28-2009, 02:41 PM
You MUST put my code in the <head> section, including this line:


navigator.appName == "Microsoft Internet Explorer" ? attachEvent('onload', init, false) : addEventListener('load', init, false);


All of the code must be in the <head> section.

The init() function won't run without the above line also being in the <head>

I posted a complete .html document. Did you not understand?

howie2009
07-28-2009, 02:58 PM
Thanks was just trying different variation. I did as u suggested again but it still doesnt produce the image for some reason. I think its a conflict with some php code.
Thanks for the advice.

12 Pack Mack
07-28-2009, 03:09 PM
No. I don't think so. All PHP code has stopped running when the page is loaded.

Why not just copy the code I posted (with the corrections I made for width and height -- in a later post), save it as an .html document, then upload it to the server?

Open it in your browser and see if the images are replaced by your default image. Unless and until you get it to work like that, then there's no hope of getting it to work in your existing document.

Again, make sure the path/filename for the default image is correct.

howie2009
07-28-2009, 03:11 PM
ok Thanks

howie2009
07-30-2009, 02:04 PM
Ok new approach to this default image issue as the above is conflicting with the existing set up.

This is the existing code


<input class="text" type="text" size="50" maxlength="255" name="image_small" value="{image_small}">


The default value in the textbox for a user uploading an image is{image_small}. If a user uploads and image the filepath to the image is set equal to {image_small} eg {image_small} would be equal to images/ads/small/my_random_image.jpg

I need code that says if {image_small} is empty or null then {image_small} is equal to eg images/ads/small/default.jpg. I tried the below but no joy. Can somebody recommend a solution and how I should edit the code below before my missus never talks to me again? THANKS A MILLION GUYS!




<input class="text" type="text" size="50" maxlength="255" name="image_small" value="{image_small}" onerror="this.onerror=null; this.value='images/ads/small/image001_2.jpg';">



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum