Groups | Search | Server Info | Keyboard shortcuts | Login | Register [http] [https] [nntp] [nntps]

Groups > comp.lang.javascript > #15911

Re: Background image in <TD>

Followups directed to: comp.lang.javascript

Show key headers only | View raw

Tom de Neef wrote:

> Following html shows the intended behaviour in IE, FF and Chrome: 
> display an image as background to a <TD> element.
> <html>
> <head><title>test</title></head>
> <body>
> <table border="1" cellpadding="2" cellspacing="3">
>   <tr>
>     <td background='expl.bmp'>test</td>
>   </tr>
> </table>
> </body>
> </html>

This is not Valid HTML.  <http://validator.w3.org/>
 
> I try to achieve this with Javascript but I cannot find the proper way.

There is no Javascript.  <http://PointedEars.de/es-matrix>

>        thisTD.background = "expl.bmp";
> works only with IE.

That has to do with the fact that in proper HTML the TD element has no 
`background' attribute, therefore the DOM object that represents it has no 
standards-compliant `background' property:

<http://www.w3.org/TR/html401/struct/tables.html#edef-TD>
<http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-82915075>

And it has to do with the fact that BitMaP images originate from Windows and 
*Microsoft* Internet Explorer is essentially a *Microsoft* Windows browser:

<http://en.wikipedia.org/wiki/BMP_file_format>

You have omitted the DOCTYPE declaration here, so Internet Explorer would 
use Compatibility Mode in which deprecated or even proprietary features are 
supported (as opposed to Standards Mode, which is more like "Almost 
Standards Mode" – CSS1Compat – with MSHTML).

> I've tried
>        thisTD.style.backgroundImage = "expl.bmp";

This is not supposed to work, see 
<http://www.w3.org/TR/CSS2/colors.html#propdef-background-image>

> and
>        if (thisTD.style.backgroundImage) {

If the element represented by the object referred to by `thisTD' does not 
have a background-image specified in its style attribute, then 
`this.style.backgroundImage' will be the empty string.  The empty string 
when converted to Boolean, as it will be in an `if' statement, is `false'.  
So the following Block statement will never be executed …

>          thisTD.style.backgroundImage = "expl.bmp"
>        }
>        else {thisTD.background = "expl.bmp" }
 
… and this `else' branch will always be executed.  The best way to check for 
the existence of a DOM property is (with few exceptions) a `typeof' test:

  if (typeof thisTD.style.backgroundImage != "undefined")
  {
    // …
  }

However, first the `background' element property (as opposed to the 
`background' style property) is proprietary as is the `background' 
attribute, and second …

> but none works in FF or Chrome.

… BitMaP images (uncompressed) are not supposed to be used on the Web as 
they are far too large by comparison, so browsers usually do not support 
them.

Use JPEG, GIF (both support lossy compression), or PNG (lossless 
compression) instead, then use proper CSS value syntax for the value of the 
DOM property.  You can use applications like The GIMP – <http://gimp.org/> – 
to convert from BMP to one of those image formats.

> Can you pls do a suggestion. (I don't know what DOCTYPE is used - the 
> html is generated by a server. If that's important: how can I find out?).

Use the Source, Luke.  Internet Explorer has Edit → View Source; others have 
similar menu items, and Ctrl+U and similar for a shortcut.  You can enable 
DOCTYPE declaration display with an option in Firebug; Chrome Developer 
Tools (also in the Chromium Browser) show it in the Elements pane by default 
(as light-grey text on white background here).  However, the 
document.compatMode property tells you immediately whether you are in 
Quirks/Compatibility Mode ("BackCompat") or in (Almost) Standards Compliance 
Mode ("CSS1Compat").

If it is actually a server-side application that generates such junk code, 
it is most certainly hopelessly borken and should be replaced.  That said, 
given your position in the learning curve as suggested by your posting, you 
are not in a position to tell who the culprit is.  It may very well be that 
you wrote and/or used a bad – static – template, and the server merely does 
what it is supposed to do – to serve it.


PointedEars
-- 
    realism:    HTML 4.01 Strict
    evangelism: XHTML 1.0 Strict
    madness:    XHTML 1.1 as application/xhtml+xml
                                                    -- Bjoern Hoehrmann

Back to comp.lang.javascript | Previous | Next — Previous in thread | Next in thread | Find similar | Unroll thread

Thread

Background image in <TD> "Tom de Neef" <tdeneef@qolor.nl> - 2012-09-15 23:03 +0200
  Re: Background image in <TD> "Evertjan." <exxjxw.hannivoort@inter.nl.net> - 2012-09-15 21:13 +0000
  Re: Background image in <TD> SAM <stephanemoriaux.NoAdmin@wanadoo.fr.invalid> - 2012-09-16 00:21 +0200
  Re: Background image in <TD> Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2012-09-16 01:54 +0200
    Re: Background image in <TD> Martin Leese <please@see.Web.for.e-mail.INVALID> - 2012-09-16 11:16 -0600
  Re: Background image in <TD> evlanovsasha@gmail.com - 2012-09-15 17:06 -0700
  Re: Background image in <TD> "Tom de Neef" <tdeneef@qolor.nl> - 2012-09-16 12:48 +0200
    Re: Background image in <TD> "Jukka K. Korpela" <jkorpela@cs.tut.fi> - 2012-09-16 15:19 +0300
      Re: Background image in <TD> "Tom de Neef" <tdeneef@qolor.nl> - 2012-09-17 09:53 +0200
        Re: Background image in <TD> "Michael Haufe (TNO)" <tno@thenewobjective.com> - 2012-09-17 06:44 -0700
        Re: Background image in <TD> "Michael Haufe (TNO)" <tno@thenewobjective.com> - 2012-09-17 06:46 -0700
        Re: Background image in <TD> Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2012-09-17 21:00 +0200
        Re: Background image in <TD> SAM <stephanemoriaux.NoAdmin@wanadoo.fr.invalid> - 2012-09-18 02:55 +0200

csiph-web