Google Groups no longer supports new Usenet posts or subscriptions. Historical content remains viewable.
Dismiss

Background image in <TD>

15 views
Skip to first unread message

Tom de Neef

unread,
Sep 15, 2012, 5:03:02 PM9/15/12
to
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>

I try to achieve this with Javascript but I cannot find the proper way.
thisTD.background = "expl.bmp";
works only with IE.
I've tried
thisTD.style.backgroundImage = "expl.bmp";
and
if (thisTD.style.backgroundImage) {
thisTD.style.backgroundImage = "expl.bmp"
}
else {thisTD.background = "expl.bmp" }

but none works in FF or Chrome.
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?).
TIA
Tom



Evertjan.

unread,
Sep 15, 2012, 5:13:53 PM9/15/12
to
Tom de Neef wrote on 15 sep 2012 in comp.lang.javascript:
> <td background='expl.bmp'>test</td>

<td style='background-image:url("expl.bmp")'>

--
Evertjan.
The Netherlands.
(Please change the x'es to dots in my emailaddress)

SAM

unread,
Sep 15, 2012, 6:21:40 PM9/15/12
to
Le 15/09/12 23:03, Tom de Neef a �crit :
>
> I try to achieve this with Javascript but I cannot find the proper way.
> thisTD.background = "expl.bmp";
> works only with IE.

how do you get "thisTD" ?


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

thisTD.style.backgroundImage = "url(expl.bmp)";


> and
> if (thisTD.style.backgroundImage) {
> thisTD.style.backgroundImage = "expl.bmp"
> }
> else {thisTD.background = "expl.bmp" }


if(thisTD)
{
var styl = thisTD.style? thisTD.style : thisTD;
styl.backgroundImage = 'url(expl.bmp)';
}
else alert('no such element !');


--
St�phane Moriaux avec/with iMac-intel

Thomas 'PointedEars' Lahn

unread,
Sep 15, 2012, 7:54:02 PM9/15/12
to
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

evlano...@gmail.com

unread,
Sep 15, 2012, 8:06:59 PM9/15/12
to
воскресенье, 16 сентября 2012 г., 1:03:03 UTC+4 пользователь Tom de Neef написал:
Your code didn't work because you missed: url() and single quote after this.style.backgroundImage =. In this case, your code should be seems like that:

thisTD.style.backgroundImage = 'url(put_here_path_to_image)';

For more information how is it work you should be read article http://www.w3schools.com/cssref/pr_background-image.asp

Tom de Neef

unread,
Sep 16, 2012, 6:48:57 AM9/16/12
to
"Tom de Neef" wrote:
> 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>
>
> I try to achieve this with Javascript but I cannot find the proper way.

Thank you all.
I used a combination of your suggestions: url( ), changed bmp to png, placed
the image reference in a global style definition and achieve the desired
effect by changing the className of the TD element.
Tom


Jukka K. Korpela

unread,
Sep 16, 2012, 8:19:48 AM9/16/12
to
2012-09-16 13:48, Tom de Neef wrote:

> I used a combination of your suggestions: url( ), changed bmp to png, placed
> the image reference in a global style definition and achieve the desired
> effect by changing the className of the TD element.

So what did we learn? *I* learned, through my testing inspired by this
thread, that the old BMP format is still widely supported, to my mild
surprise; even Android supports it. So changing the image format is not
relevant to the problem; the choice of format is a different issue and
should depend on the nature of the image.

Let's consider items and questions in your original post:

"<td background='expl.bmp'>test</td>"

This is nonstandard but widely supported by browsers. There's hardly any
reason to use it any more, now that you can use CSS and there's a chance
that some future browser implements the specifications more strictly
than popular browsers.

And there's really no reason "to achieve this with Javascript", unless
you want to do it dynamically (as this message of yours suggests, but
the original one didn't).

"I try to achieve this with Javascript but I cannot find the proper way.
thisTD.background = "expl.bmp";
works only with IE."

If you use inspection mode (F12) e.g. in Firefox or Chrome, you will see
that the element node does not contain the property "background". So the
support to the nonstandard background attribute is not reflected in the
DOM in browsers in general (except IE).

So you were right when trying to use the style property instead, because
that's as standard as you can get:

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

What is really needed here is just to put the image URL in the url(...)
notation, as per CSS specifications:

thisTD.style.backgroundImage = "url(expl.bmp)"

The rest of the thread is just confusion or distraction or, at best,
about unrelated issues. Whatever "placed the image reference in a global
style definition" means, it is apparently irrelevant to the issue.

You could alternatively set thisTD.style.background (which is different
in the sense of setting all other background properties to their initial
values).

You also wrote:

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

It's surely important, because Quirks vs. Standards Mode is affected by
it, and this means dozens of essential differences in browser behavior, see
http://www.cs.tut.fi/~jkorpela/quirks-mode.html

You can see the DOCTYPE by viewing the HTML document source in a
browser. It's on the first line there (or should be, to make all
browsers go to Standards Mode.

In JavaScript, you can use the document.doctype object to inspect the
DOCTYPE declaration in a structured form (of type DocumentType). But you
probably don't want to do that. What really matters is the browser mode,
and for this the de-facto standard is the variable document.compatMode;
it has a string value, and the value "CSS1Compat" indicates Standards
Mode (for obscure historical reasons).

--
Yucca, http://www.cs.tut.fi/~jkorpela/

Martin Leese

unread,
Sep 16, 2012, 1:16:44 PM9/16/12
to
Thomas 'PointedEars' Lahn wrote:
...
> Use JPEG, GIF (both support lossy compression), or PNG (lossless
> compression) instead,

GIF is lossless (although limited to 8-bit
images).

--
Regards,
Martin Leese
E-mail: ple...@see.Web.for.e-mail.INVALID
Web: http://members.tripod.com/martin_leese/

Tom de Neef

unread,
Sep 17, 2012, 3:53:08 AM9/17/12
to
"Jukka K. Korpela":
That is very constructive of you.
The exercise was to change appearance of a menu on mouseover, where the html
is generated by a server - mostly out of my hands.
I find that coding in Javascript takes me ages. This must have to do with
the lack of a proper development environment. I am used to one (Delphi)
where the IDE checks spelling, offers a list of possible properties/methods,
warns against unassignments, dubious assignments, etc. With Javascript I
have to use a simple editor and none of such help is available. The result
is that you may get stuck without a clue. I must learn to call upon JSlint
in such cases. But here I didn't. I followed what was happening in
inspection mode. thisTD.style.backgroundImage = "expl.bmp" did not raise an
exception and yet the attribute remained as was (empty string). I tried
url() but may have made a mistake with the quotes. I checked if the image
existed. After getting your various suggestions I started anew and defined a
stylesheet rule (with url() ), gave the TD a class, changed to PNG and it
worked.
I've learned one thing and hope to keep it at heart: validate html, css and
script before posting
That would have told me everything I needed, I think.
Thank you
Tom


Michael Haufe (TNO)

unread,
Sep 17, 2012, 9:44:28 AM9/17/12
to
On Sep 17, 2:53 am, "Tom de Neef" <tden...@qolor.nl> wrote:

[...]
> I find that coding in Javascript takes me ages. This must have to do with
> the lack of a proper development environment. I am used to one (Delphi)
> where the IDE checks spelling, offers a list of possible properties/methods,
> warns against unassignments, dubious assignments, etc. With Javascript I
> have to use a simple editor and none of such help is available. The result
> is that you may get stuck without a clue. I must learn to call upon JSlint
> in such cases.
[...]

Aptana and Webstorm do relatively well in this area. They aren't
perfect, but it is better than notepad:

<http://aptana.com/>
<http://www.jetbrains.com/webstorm/>

The first one is free to use, but has a few bugs which get irritating.

The latter has a trial period, but its code analysis is fa

Michael Haufe (TNO)

unread,
Sep 17, 2012, 9:46:42 AM9/17/12
to
On Sep 17, 2:53 am, "Tom de Neef" <tden...@qolor.nl> wrote:

[...]

> I find that coding in Javascript takes me ages. This must have to do with
> the lack of a proper development environment. I am used to one (Delphi)
> where the IDE checks spelling, offers a list of possible properties/methods,
> warns against unassignments, dubious assignments, etc. With Javascript I
> have to use a simple editor and none of such help is available. The result
> is that you may get stuck without a clue. I must learn to call upon JSlint
> in such cases.  But here I didn't.

[...]

Aptana and Webstorm are some of the better IDEs available. The former
is free but has a few bugs which can get irritating. The latter has a
trial period, but superior code analysis.

<http://aptana.com/>
<http://www.jetbrains.com/webstorm/>

Thomas 'PointedEars' Lahn

unread,
Sep 17, 2012, 3:00:12 PM9/17/12
to
Tom de Neef wrote:

> I find that coding in Javascript takes me ages. This must have to do with
> the lack of a proper development environment. I am used to one (Delphi)
> where the IDE checks spelling, offers a list of possible
> properties/methods, warns against unassignments, dubious assignments, etc.
> With Javascript I have to use a simple editor

There still is no "Javascript" and no, you don't.

> and none of such help is available.

You might want to try Eclipse JavaScript Development Tools (JSDT) [1]. It
is the best ECMAScript and DOM editor that you can get for free that I have
encountered for years; it can do what you ask, and more. It still has some
language bugs, though; primarily because it is based on a Java parser that
cannot deal with the very dynamic nature of the language and the different
patterns this allows. I am using it for all my ECMAScript-based scripts;
JSX includes some of the JSdoc comments only for JSDT (for example,
`@memberOf').

> The result is that you may get stuck without a clue. I must
> learn to call upon JSlint in such cases.

No, you don't.

> But here I didn't. I followed what was happening in
> inspection mode. thisTD.style.backgroundImage = "expl.bmp" did not raise
> an exception and yet the attribute remained as was (empty string).

That is strong indication that the value right-hand side was invalid. The
setter of the style property prevented the change of the current property
value to an invalid value. That is as close as you can get with DOM
properties; an exception does not need to be thrown. See also
jsx.dom.setStyleProperty() (and an improvement for that is coming to my mind
now).

> I tried url() but may have made a mistake with the quotes.

Quotes in the `url(…)' value are optional per the Specification. Some non-
conforming layout engines used to make a difference there, but I am not
convinced they are relevant anymore.

> I've learned one thing and hope to keep it at heart: validate html, css
> and script before posting

ACK.

Trim your quotes to the relevant minimum, please. [3]


PointedEars
___________
[1] <http://www.eclipse.org/webtools/jsdt/>
[2]
<http://PointedEars.de/websvn/filedetails.php?repname=JSX&path=%2Ftrunk%2Fdom%2Fcss.js>
[3] <http://jibbering.com/faq/notes/posting/>
--
When all you know is jQuery, every problem looks $(olvable).

SAM

unread,
Sep 17, 2012, 8:55:24 PM9/17/12
to
Le 17/09/12 09:53, Tom de Neef a �crit :
>
> The exercise was to change appearance of a menu on mouseover, where the html
> is generated by a server - mostly out of my hands.

You have absolutely no need of JavaScript to make a reactive mouse over
menu !


<ul id="menu">
<li><a href="1.htm">page 1</a></li>
<li><a href="2.htm">page 2</a></li>
<li><a href="3.htm">page 3</a></li>
</ul>

<style type="text/css">
#menu {
float:left;
list-style:none;
margin:0; padding:0;
text-align:center
}
#menu li { margin:0;padding:0; /* width: 20em */ }
#menu a {
display : block;
border: 1px solid;
text-decoration: none;
background: url(menu.jpg) no-repeat center center yellow;
color: black;
margin: 3px 0;
padding: 3px 10px;
}
#menu a:hover {
background: url(menuOver.jpg) pink;
color: red;
}
</style>


See : <http://www.w3.org/TR/CSS21/indexlist.html>
0 new messages