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

Groups > comp.lang.javascript > #15905 > unrolled thread

Background image in <TD>

Back to article view | Back to comp.lang.javascript

Contents

  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

#15905 — Background image in <TD>

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

[toc] | [next] | [standalone]

#15906

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)

[toc] | [prev] | [next] | [standalone]

#15908

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

[toc] | [prev] | [next] | [standalone]

#15911

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

[toc] | [prev] | [next] | [standalone]

#15915

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: please@see.Web.for.e-mail.INVALID
Web: http://members.tripod.com/martin_leese/

[toc] | [prev] | [next] | [standalone]

#15912

воскресенье, 16 сентября 2012 г., 1:03:03 UTC+4 пользователь Tom de Neef написал:
> 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

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

[toc] | [prev] | [next] | [standalone]

#15913

"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

[toc] | [prev] | [next] | [standalone]

#15914

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/

[toc] | [prev] | [next] | [standalone]

#15918

"Jukka K. Korpela":
>
>> 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).
>

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 

[toc] | [prev] | [next] | [standalone]

#15920

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

[toc] | [prev] | [next] | [standalone]

#15921

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/>

[toc] | [prev] | [next] | [standalone]

#15929

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).

[toc] | [prev] | [next] | [standalone]

#15945

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>

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

[toc] | [prev] | [standalone]

Back to top | Article view | comp.lang.javascript

csiph-web