Live Background Previewer Script

[Jumpy]

I've used this script for years in IE and now it has quit working. I also tested it with your sample and it doesn't work either. I have updated IE as required so I have to assume that the "stop working" function has something to do with new IE. Anyone know if there is a resolution or has the time come to forget the script and remove it from our pages?

[traq]

Please read the posting guidelines before starting a new thread.

We need more information in order to even guess what might be wrong. Please post a link to the script in question here on Dynamic Drive, and a link to the script on your site (or a demo that shows the problem, for example, on jsfiddle).

Please describe your problem more clearly as well.

What do you mean by "quit working"? does it show the wrong images? does it break other script(s) on the page? does it freeze your browser? does it simply do nothing?

What do you mean by "new IE"? Which version(s) of IE does this problem occur in? Which version(s) of IE does it work properly in? Do you have the same problem in other major browsers?

Your question is unclear.
Please provide more information, and be as specific as possible.

• What do you want to accomplish?
• What have you already tried?
• What problems did you encounter?

Please be sure that you have included all relevant code and/or a link to the page in question.
You might also consider making a reduced test case using an online tool like jsfiddle

[Jumpy]

This is a link to your page:
http://www.dynamicdrive.com/dynamicindex3/document1.htm

This is a link to my page:
http://www.webcreationsbyjumpy.com/s...sino_backs.htm

It has worked just fine for years but now nothing happens. I realize it has never worked in Firefox or Crome. But now it doesn't work in IE too.

[traq]

Again, what version of IE does it work / not work in? Again, what do you mean by "doesn't work"?

I don't know if you noticed, but this is a very old script. It was designed for IE5 (IE6 was released in 2001; microsoft dropped all support for IE5 in 2005. The current version is 10).

This script was written using the global event object, which (IIRC) went out with IE8, and never existed in [most?] other browsers at all. In modern browser, the event object is instead passed as an argument to the function.

Let's try some changes:

/* original function (rewritten below):

function tile(){
if (!document.all)
return
var source=event.srcElement
if (source.tagName=="IMG")
document.body.style.backgroundImage="url("+source.src+")"
}
*/

/* use this instead */
function tile( event ){
    /* this stops the event from continuing up the DOM.
      because we have another listener on the body that _removes_ the bg image,
      if we let the event continue up it would simply cancel out what we do here
      (you probably wouldn't even see the bg image; it would look like nothing happens).
     */
    event.stopPropagation();

    /* this checks .target (the standard property) first, and falls back on .srcElement for old IE versions */
    var source = event.target || event.srcElement;

    if( source.tagName === "IMG" ){
        document.body.style.backgroundImage = "url(" + source.src + ")";
    }
}

You'll also need to make a minor change in how you call it, and pass in the event object as an argument:

<div onclick="tile(event);">
    <img src="http://example.com/image.png">
    <!--  . . .

This should work in all modern browsers, and as far back as IE6, maybe IE5 (not that IE5 is remotely important anymore. I've tested in other browsers, but I don't have IE). It's still not the best way to do things, however. I think I'll look into rewriting this script for the DD library. I'll let you know what I come up with.

[Jumpy]

Thanks for your reply. I am using IE11 and as far as I can tell IE11 is where it quit working. I think at this point I'll just remove the script from my pages since it never did work in any other browsers and for the better part I now use Firefox anyway. Thanks for your assistance.

[traq]

no problem. I'll post back here when I get an updated script working, just in case you're interested.