Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 14 of 14
  1. #1
    Regular Coder howie2009's Avatar
    Join Date
    May 2009
    Location
    Ireland
    Posts
    204
    Thanks
    37
    Thanked 0 Times in 0 Posts

    Default image using javascript

    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!

  • #2
    Regular Coder Amphiluke's Avatar
    Join Date
    Jul 2009
    Posts
    312
    Thanks
    3
    Thanked 89 Times in 89 Posts
    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.
    Code:
    function defaultImage() {
       var im = document.getElementById("imgId");
       im.src = (im.src == "") ? "images/default.gif" : im.src;
    }
    Last edited by Amphiluke; 07-28-2009 at 12:28 PM.
    I am still learning English

  • Users who have thanked Amphiluke for this post:

    howie2009 (07-28-2009)

  • #3
    Banned
    Join Date
    Mar 2009
    Posts
    248
    Thanks
    3
    Thanked 68 Times in 66 Posts
    Code:
    <!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>

  • Users who have thanked 12 Pack Mack for this post:

    howie2009 (07-28-2009)

  • #4
    Regular Coder howie2009's Avatar
    Join Date
    May 2009
    Location
    Ireland
    Posts
    204
    Thanks
    37
    Thanked 0 Times in 0 Posts
    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



    Code:
    <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,height=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,height=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>

  • #5
    Banned
    Join Date
    Mar 2009
    Posts
    248
    Thanks
    3
    Thanked 68 Times in 66 Posts
    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.

    Code:
    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";
    				}			 
    			}		
    	}

  • #6
    Regular Coder howie2009's Avatar
    Join Date
    May 2009
    Location
    Ireland
    Posts
    204
    Thanks
    37
    Thanked 0 Times in 0 Posts
    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

  • #7
    Regular Coder howie2009's Avatar
    Join Date
    May 2009
    Location
    Ireland
    Posts
    204
    Thanks
    37
    Thanked 0 Times in 0 Posts
    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

  • #8
    Banned
    Join Date
    Mar 2009
    Posts
    248
    Thanks
    3
    Thanked 68 Times in 66 Posts
    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.

  • #9
    Regular Coder howie2009's Avatar
    Join Date
    May 2009
    Location
    Ireland
    Posts
    204
    Thanks
    37
    Thanked 0 Times in 0 Posts
    No prob. Thanks for helping.

  • #10
    Banned
    Join Date
    Mar 2009
    Posts
    248
    Thanks
    3
    Thanked 68 Times in 66 Posts
    You MUST put my code in the <head> section, including this line:

    Code:
    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?

  • #11
    Regular Coder howie2009's Avatar
    Join Date
    May 2009
    Location
    Ireland
    Posts
    204
    Thanks
    37
    Thanked 0 Times in 0 Posts
    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
    Banned
    Join Date
    Mar 2009
    Posts
    248
    Thanks
    3
    Thanked 68 Times in 66 Posts
    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.

  • #13
    Regular Coder howie2009's Avatar
    Join Date
    May 2009
    Location
    Ireland
    Posts
    204
    Thanks
    37
    Thanked 0 Times in 0 Posts
    ok Thanks

  • #14
    Regular Coder howie2009's Avatar
    Join Date
    May 2009
    Location
    Ireland
    Posts
    204
    Thanks
    37
    Thanked 0 Times in 0 Posts
    Ok new approach to this default image issue as the above is conflicting with the existing set up.

    This is the existing code
    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!


    Code:
    <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';">
    Last edited by howie2009; 07-30-2009 at 01:17 PM.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •