Toggle Background Img

[jscheuer1]

Mike may define it or characterize it differently but, its all Rock and Roll (read DHTML) to me. The specification for that portion of the code that is CSS is probably the way Mike states it is. Put it together with HTML and javascript, its DHTML. Javascript is always going to be periodically updated until it is finally completely outdated. I don't keep track of such things, last I noticed, we were up to v5 of javascript, I think. If a browser will recognize and use it, any javascript code is valid in that browser. What I consider simple CSS effects, like background images, are supported in virtually all modern browsers as both pure CSS and javascript code, if written to current standards.

[mwinter]

I am still confused however:

We seem to have our wires crossed.

In the link you provided, there is no indication or example of "url(blah)" being used in the middle of a Javascript function.

Don't forget that it's functional notation. It looks like a function call, but it's just a form of delimiter. Anyway, the CSS specification wouldn't discuss use in scripts; it's out of its scope.

Your code:

function changeBackground() {
  var style = this.style;

  if(style && ('string' == typeof style.backgroundImage)) {
    style.backgroundImage = (-1 != style.backgroundImage.indexOf('minus-bg'))
                          ? 'url(/plus-bg.gif)'
                          : 'url(/minus-bg.gif)';
  }
}

This looks an awful lot like a piece of Javascript [...]

That's because it is. Read what I wrote in my previous post. I was only referring to the notation because that's what you quoted. I was ignoring the code block itself, and I hoped I made that distinction clearly. Sorry for confusing you (and anyone else).

I don't keep track of such things, last I noticed, we were up to v5 of javascript, I think.

We're up to ECMAScript (ECMA-262), 3rd Edition in modern, scriptable browsers. Implementations of that include JavaScript 1.5 and JScript 5.5.

Mike

[Wedgy]

I guess its because I am always asking questions that probe the edges.

In my mind, I was thinking, "this is javascript, and there is this 'url(blah)' thing in the middle of a function call. Is it a mistake, or can the Javascript parser understand the piece of CSS being passed to it? Perhaps inside the browser, there is some subroutine that is used to parse and interpret the string, 'url(blah)'. If so, maybe not only does the CSS parsing section of code in the browser call this internal procedure/function, but perhaps in order to save code size, the Javascript code also knows of its existance and calls the code to parse this parameter being passed to the function."

Of course I know so little about interpreters (which I assume JS is one).
My experience has virtually always been in the use of compilers and assemblers.
In fact I don't even know if any of this is meaningful or relevant. Just my curiosity.

[BigBody]

I have got wrong this code

document.body.style.backgroundImage = "url('bg.gif')"

Why? Please help me

[jscheuer1]

I have got wrong this code

document.body.style.backgroundImage = "url('bg.gif')"

Why? Please help me

Looks good, is bg.gif in the same folder as the page? Also, this is javascript not css, pure css would be:

body {
background-image:url('bg.gif');
}

[mwinter]

In my mind, I was thinking, "this is javascript, and there is this 'url(blah)' thing in the middle of a function call.

But that 'thing' was a string. The script interpreter treats it as opaque (with the exception of escape sequences).

Is it a mistake, or can the Javascript parser understand the piece of CSS being passed to it?

I think you're muddling your perception of Javascript with other things.

JavaScript, JScript, and other ECMAScript implementations are just scripting languages. They have a simple complement of built-in objects (Boolean, Number, Object, String, Array, Function, Error, Math, and RegExp), operators, functions, and control structures. By itself, ECMAScript isn't capable of much; it depends on host objects.

Browsers (and other environments - ECMAScript is general purpose) have to provide a great deal of other features. The de facto objects like location and document, as well as proprietary and standardised APIs are entirely separate.

Perhaps inside the browser, there is some subroutine that is used to parse and interpret the string, 'url(blah)'.

Precisely. Modern browsers will implement the DOM 2 Style module that allows authors to obtain information about applied style sheet data, and to manipulate that data. JavaScript and all the others don't have a clue about CSS. However, the host objects that are bound into the language do.

Mike

[BigBody]

Looks good, is bg.gif in the same folder as the page? Also, this is javascript not css, pure css would be:

body {
background-image:url('bg.gif');
}

I'm using javascript not css, and bg.gif is in the same folder as the page. I tried
document.body.background = 'bg.gif'
but it still have wrong

[jscheuer1]

I'm using javascript not css, and bg.gif is in the same folder as the page. I tried
document.body.background = 'bg.gif'
but it still have wrong

What are you trying to do? Is this part of a script? As javascript code, it would need to be in order to do anything. If you have that happening then:

document.body.style.backgroundImage = "url('bg.gif')"

like you had at first, should work fine. BUT, this method can only be used on a body tag that has already been parsed by the browser. In other words, if the code is in the head and not executed 'onload', then there is no body yet, as far as the browser is concerned, so nothing to do. If possible, it is much easier to put the script containing this code in the body section of the page. That way the browser will have already 'seen' the body tag and can assign your style to it.

[Wedgy]

I'm using javascript not css, and bg.gif is in the same folder as the page. I tried
document.body.background = 'bg.gif'
but it still have wrong

I wonder if you have your javascript in the right spot:

i.e., not in the header, unless it is inside a function definition,
and if you want it executed on load, you may have to put something
in the body tag.

Otherwise, if it is in the <BODY> section,
it should be surrounded by <SCRIPT> tags properly filled out,
or else embedded in a mouseover command.