Alternative Image

Collapse
This topic is closed.
X
X
Collapse
 
  • Page of 1
  • Time
  • Show
Clear All
new posts
Previous template Next
  • joe
    #1

    Alternative Image

    Hi. Is there a way with Javascript to use a generic image if the one I want
    is not found?
    I'd appreciate if someone can post a code sample, or poit me to one. Thanks
    in advance.


    Tags: None
    • RobB
      #2
      Re: Alternative Image

      joe wrote:[color=blue]
      > Hi. Is there a way with Javascript to use a generic image if the one[/color]
      I want[color=blue]
      > is not found?
      > I'd appreciate if someone can post a code sample, or poit me to one.[/color]
      Thanks[color=blue]
      > in advance.[/color]

      <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
      "http://www.w3.org/TR/html4/strict.dtd">
      <html>
      <head>
      <style type="text/css">

      img {display: block;}

      </style>
      </head>
      <body>
      <img
      src="http://www.google.com/intl/en/images/logo.gif"
      onerror="this.s rc='http://www.sonofsofama n.com/images/photo-not-available-180x240.gif'">
      <img
      src="http://www.google.com/intl/en/images/logo.giff"
      onerror="this.s rc='http://www.sonofsofama n.com/images/photo-not-available-180x240.gif'">
      </body>
      </html>

      Could do this more systematically. ..

        Comment

        • joe
          #3
          Re: Alternative Image

          Ok. I think I found a solution:

          <img src="orig_image .jpg" onerror="this.s rc='alt_image.j pg';">



            Comment

            • Thomas 'PointedEars' Lahn
              #4
              Re: Alternative Image

              joe wrote:
              [color=blue]
              > Ok. I think I found a solution:
              >
              > <img src="orig_image .jpg" onerror="this.s rc='alt_image.j pg';">[/color]

              This is not a standards compliant solution, though. The `img' element
              does not have an `onerror' attribute in Valid (X)HTML markup, and the
              `alt' attribute is required. A standards compliant solution, taking
              into account additional DOM features, could be

              <!-- Transitional HTML or XHTML DOCTYPE, else use `id' instead of `name' -->
              <html>
              <head>
              ...
              <meta http-equiv="Content-Script-Type" content="text/javascript">
              <script type="text/javascript">
              function replaceOnError( img, alt_src)
              {
              if (typeof img.onerror != "undefined" )
              {
              img.onerror = function()
              {
              this.src = alt_src;
              return true;
              }
              }
              }
              </script>
              ...
              </head>

              <body onload="replace OnError(documen t.images['foo'], 'alt_image.jpg' );">
              ...
              <img src="orig_image .jpg" alt="foo" name="foo">
              ...
              </body>
              </html>

              But you rather should consider the ErrorDocument directive of httpd
              compatible Web servers (like the Apache HTTP Server) which will also
              work without client-side script support.


              PointedEars

                Comment

                • commercial
                  #5
                  Re: Alternative Image

                  What garble are you talking about ?

                  Image loads or not and will not error otherwise.

                  I you need to event monitor higher stuff,
                  it may be too late.


                  What error? Do your local newspaper's photos
                  make noises when you pull a copy form the vending box.

                  Which one you thought ?

                  How is your noisy cartoon and TV replacement of a childhood
                  and education playing out after all ?


                  "Alternativ e Image"

                  There is no such thing. I means otherwise, how e.g. blind people
                  ought to be presented an idea of an "invisible picture"
                  in TEXTUAL representation.

                  And that must not make an error or noise on demand only.

                  You sure are not an eye dog in this group.







                  "Thomas 'PointedEars' Lahn" <PointedEars@we b.de> wrote in message
                  news:1188121.KG GzIapAWZ@Pointe dEars.de...[color=blue]
                  > joe wrote:
                  >[color=green]
                  > > Ok. I think I found a solution:
                  > >
                  > > <img src="orig_image .jpg" onerror="this.s rc='alt_image.j pg';">[/color]
                  >
                  > This is not a standards compliant solution, though. The `img' element
                  > does not have an `onerror' attribute in Valid (X)HTML markup, and the
                  > `alt' attribute is required. A standards compliant solution, taking
                  > into account additional DOM features, could be
                  >
                  > <!-- Transitional HTML or XHTML DOCTYPE, else use `id' instead of[/color]
                  `name' -->[color=blue]
                  > <html>
                  > <head>
                  > ...
                  > <meta http-equiv="Content-Script-Type" content="text/javascript">
                  > <script type="text/javascript">
                  > function replaceOnError( img, alt_src)
                  > {
                  > if (typeof img.onerror != "undefined" )
                  > {
                  > img.onerror = function()
                  > {
                  > this.src = alt_src;
                  > return true;
                  > }
                  > }
                  > }
                  > </script>
                  > ...
                  > </head>
                  >
                  > <body onload="replace OnError(documen t.images['foo'], 'alt_image.jpg' );">
                  > ...
                  > <img src="orig_image .jpg" alt="foo" name="foo">
                  > ...
                  > </body>
                  > </html>
                  >
                  > But you rather should consider the ErrorDocument directive of httpd
                  > compatible Web servers (like the Apache HTTP Server) which will also
                  > work without client-side script support.
                  >
                  >
                  > PointedEars[/color]

                    Comment

                    • Thomas 'PointedEars' Lahn
                      #6
                      Re: Alternative Image

                      "commercial " schrieb:
                      [color=blue]
                      > [...]
                      > "Alternativ e Image"
                      >
                      > There is no such thing. I means otherwise, how e.g. blind people
                      > ought to be presented an idea of an "invisible picture"
                      > in TEXTUAL representation.[/color]

                      (This is the only part of your posting with some meaning, so I'll reply
                      to it.)

                      Well, the `alt' property of the respective HTMLImageElemen t and so the
                      `alt' attribute of the related `img' element can be changed as well.
                      That would result in different presentation on error for users without
                      image support, too.
                      [color=blue]
                      > And that must not make an error or noise on demand only.
                      >
                      > You sure are not an eye dog in this group.[/color]

                      I am sure that you are not really know to whom you are replying, or
                      rather yelling, what.
                      [color=blue]
                      > [Top post, full quote][/color]

                      You may also want to read the newsgroup's FAQ and FAQ notes.


                      PointedEars

                        Comment

                        Previous template Next
                        Working...