3

Is it possible to pass the url attribute a dynamical query string? E.g url( ./SOME_IMAGE_GENERATOR?image=1 ); where image varies?

I need this attribute to be set via JS: 

$( "#elem" )[ 0 ].style.background = "url( ./renders/circuit.php?circuit=" + dirY + dirX + "&dims=1|1 )";

The link in the url points to a file, that generates and returns an image. The image is generated correctly, but not applied as backround.

Clarification

The image I want to put inside does not exist yet. It is generated and returned by the page circuits.php and depends on the arguments.

The background is well changed, if the image exists. I have noticed that unlike changin the src attribute of the img tag, while the argument creates a request by the browser, sends and recieves headers and info, the background does not.

I'd thought about sending a request to the circuit.php generator, make him save the image on the server and then, with setTimeout, change the background, but I cannot rely on a certain time for the generation.

That is the problem. Now, do you guys have any ideas how to overtake this?

Improve this question
7
  • Show us the relevant CSS, so that your question has some context. Commented May 18, 2012 at 16:15
  • Have you tried style.backgroundImage? Commented May 18, 2012 at 18:10
  • @MrSlayer I've made an update to the topic Commented May 19, 2012 at 12:39
  • could you post a link with working arguments to this image generator that we could use to test solutions with? ie a full url Commented May 20, 2012 at 12:29
  • @DigitalBiscuits the file is on my local server. It returns a png file, size of 22x22 pixels, for a working argument and a blank transparent file of same size for other cases. Commented May 20, 2012 at 14:33

3 Answers 3

Reset to default
3

Working Example

I've replicated your scenario with a Jsfiddle and a image generating script held on my own website.

As you can see it is indeed possible to change the background dynamically with a generated image: http://jsfiddle.net/DigitalBiscuits/Eh8yY/6/

Debugging your code

So....what's wrong with yours? Well firstly if you're using Firefox or Chrome, use the developer tools to check what's going on. Make sure no Javascript errors are showing up in the console.

Then I would suggest you check that your javascript is actually selecting the element, and that it is able to change the background (lets say to a static image). Isolate the code you that's giving you problems and test it out in a new empty page, kinda like the JSfiddle I've linked you to above.

On a side note, your javascript code looks a bit foreign to me.

Instead of:

$( "#elem" )[ 0 ].style.background = ...

try using:

document.getElementById('myImg').style.background = ...

Lastly, ensure that you're setting the correct headers in your php script that generates the images, and that no output is happening before the headers are set.

Improve this answer
Sign up to request clarification or add additional context in comments.

2 Comments

I really don't know, why, but when I provided a full path (including "http://...") it worked. I'd already tried everything you wrote in debuggin before you posted it. P.S. in my script $( "#elem" )[ 0 ] === document.getElementById('elem'). Anyway, your answer solved the problem. V + 1. P.P.S Maybe, when the address is provided localy, like "./renders/..." the browser seeks in local directories and avoids sending headers. I guess, a full path makes the browser to open an HTTP reqeust. That's interesting.
how interesting...well as long as it works now, I guess that's the most important thing. Glad I could help you arrive at an answer.
2

Are you using jQuery? This should be very easy to do.

Store the generated image url in a variable, and then use jQuery to change the CSS background image value, like so:

var imageUrl = "./renders/circuit.php?circuit=" + dirY + dirX + "&dims=1|1";
$('#myDiv').css('background-image', 'url(' + imageUrl + ')');

Here's a a jsfiddle demonstrating the concept. Click the div to see the background-image dynamically changed via JS. http://jsfiddle.net/DigitalBiscuits/F3PUy/2/

Improve this answer

1 Comment

I'm not usins jQuery. That's my own script. $ is just very comfortable =) Please, read topics update.
1

Yes its possible to set on-the-fly images as background images, using CSS.

This is no different to how you can use on-the-fly images for img elements.

Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.