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

    Setting a default image

    Hi,
    Hopefully you can help. I'd like to set a default image if the user chooses not to select and image.

    Below is the html that displays the image if a user uploads one:
    ###################################

    <!-- begin small_image --><a href="{ads_details_url}"><img src="{src}" {width} {height} border="0" vspace="0" hspace="5" alt="{alt}"></a>

    <!-- end small_image -->
    ###################################
    Is there some javascript I can use that says if {src} is empty then use
    image/default.jpg

    THANKS!!!

  • #2
    Regular Coder howie2009's Avatar
    Join Date
    May 2009
    Location
    Ireland
    Posts
    204
    Thanks
    37
    Thanked 0 Times in 0 Posts
    I was looking at:
    function replaceMissingImages(){
    for (var i=0; i<document.images.length; i++){
    img = new Image();
    img.src = document.images[i].src;
    if (img.height == 0)
    document.images[i].src = 'mydefault.jpg';
    }
    }
    but don't know how to customise it

  • #3
    Regular Coder
    Join Date
    Apr 2006
    Location
    Northbrook, IL
    Posts
    394
    Thanks
    8
    Thanked 6 Times in 6 Posts
    this is better done with CSS rather than JS. set the "background-image" property of the links to url("default_image.jpg") or whatever. then if an image doesn't load, the background will be visible.
    Last edited by Leeoniya; 05-17-2009 at 02:34 AM.

  • Users who have thanked Leeoniya for this post:

    howie2009 (05-17-2009)

  • #4
    Senior Coder
    Join Date
    Jun 2002
    Posts
    1,404
    Thanks
    2
    Thanked 32 Times in 32 Posts
    With CSS, you will still get that 'image not found' icon in IE. With FF it'll work, as long as you specify "display:block;" in your CSS, along with the width & height.

    This requires JS, but works in IE as well:

    <img ..... onerror="this.src='src of default image'" />

    Probably not a bad idea to use both. The onerror handler runs when an image fails to load.

  • Users who have thanked adios for this post:

    howie2009 (05-17-2009)

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

  • #6
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,011
    Thanks
    203
    Thanked 2,538 Times in 2,516 Posts
    Quote Originally Posted by adios View Post
    This requires JS, but works in IE as well:

    <img ..... onerror="this.src='src of default image'" />

    The onerror handler runs when an image fails to load.

    A small but important detail -

    In a webpage with an HTML snippit such as the above, a stack overflow
    error occurs if the image file does not exist:-

    onerror = "this.src = 'some-other-non-existent-filename.jpg';">

    So important to ensure that the default image exists in the correct directory.

  • Users who have thanked Philip M for this post:

    adios (05-17-2009)

  • #7
    Banned
    Join Date
    Nov 2008
    Location
    not found
    Posts
    284
    Thanks
    0
    Thanked 53 Times in 51 Posts
    Quote Originally Posted by adios View Post
    This requires JS, but works in IE as well:

    <img ..... onerror="this.src='src of default image'" />

    The onerror handler runs when an image fails to load.
    To prevent recursion in the event of an error loading the replacement, the onerror handler should self-cancel:

    <img ..... onerror="this.onerror=null; this.src='src of default image;'" />

  • Users who have thanked randomuser773 for this post:

    adios (05-17-2009)


  •  

    Posting Permissions

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