Changing Background Image Actions?

New at this. Just wondering, are there scripts available that can make the background image change?

Thanks,

Robert


actionsdev mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

There’s an Action that fades the background color from one solid color to another, but nothing that switches background images. If I get some time later I’ll see about putting an Action together to do this.

Walter


actionsdev mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Wow!!! That would be really cool!

I would love to have my large background images change as the visitor goes to a certain category. Like Honeymoon Island, of which I have several nice, large images suitable for a background. When they go to that section, they can just stay on that page and wait for the page to change images, or they can go to the links that take them to all the scenery and photos for this one beach. And then I have about 18 such local beaches all one after another in a row to do the same to. It is going to be a lot of work, but I want to build an entire website that is based on background images. The start of it can be found at: http://st-petersburg-ramada-inn-hotel-motel-wedding-reception-banquets.com/

Thanks,

Robert


actionsdev mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Couldn’t this also be done with multiple style sheets, each one with a different background reference?


actionsdev mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Multiple stylesheets would be the way to do it if you didn’t want the background to change within a single page load. The Action would allow you to change the background in response to a rollover or a click somewhere.

Walter


actionsdev mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

What if I just wanted the background to change on a timer, like 15 seconds per image?

Thanks,

Robert


actionsdev mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

What if I just wanted the background to change on a timer, like 15 seconds per image?

Again, that would be something you would need JavaScript for, unless you also wanted the page to reload, which would be disruptive and annoying for your visitors.

Walter


actionsdev mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

yeah, I don’t want the page to reload.

Is there such a JS for Freeway?

And do you just “push” a JS into the Head like one would with an action?

Robert


actionsdev mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

I hope this is what you are after? let us know how you go. You will need to upload your background images first using an FTP program. Of course your background images will need to be sized to fit most browser windows.

Then add …



Add a graphic item for a mouseover in freeway, after that go to Extended Attributes for IMG


NAME: onmouseover
VALUE: bgChange(‘http://www.yoursite.com/2ndbackgroundimage.jpg’)

NAME: background
VALUE:http://www.yoursite.com/2ndbackground.jpg


That’s it, keep adding more graphic items as buttons to have more changing backgrounds, then preview in freeway.

All the best, Pete


actionsdev mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Oh wow!!!

I really do not understand any code or anything, but I think I see what you are saying and how this works! Really, really cool!

It will be a few days before I am ready for this, but I think this will give the effect that I want.

All the images are already in their special folder on the server. Almost all of them are 20" wide @ 72 res. As long as they are wide enough, the height shouldn’t matter, should it?

When the time comes, I might have a question or two on this, but this is great info.

Thanks,

Robert


actionsdev mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Sometime around 10/3/09 (at 03:55 -0400) Rgator said:

Almost all of them are 20" wide @ 72 res. As long as they are wide
enough, the height shouldn’t matter, should it?

Essentially no. And in fact it is best not to even think about
real-world measurements and pixels-per-inch at all… the whole ppi
thing is irrelevant when an image is actually displayed on screen in
a browser, because you have one pixel in the image per one pixel of
the display.

In your case, all you need to consider is how many pixels across your
background graphics should be (2000px should be ample) and make them
as tall as you need them to be to work well for seamless tiling.

One small point: don’t make the height extremely small (10px or less)
or the browser will struggle to render the many dozens of repeats
that requires to fill the window. Also, if you make it unnecessarily
large so it only repeats two or three times (for example) then there
will often be a venetian blinds loading effect that’s slow enough to
notice. Ignoring issues such as the size of repeat patterns, a height
of around 25px is generally reckoned to be a good balance.

(And if you’re making a horizontally-tiling graphic, just flip the
dimensions: tall enough (whatever that might be) by around 25px wide.)

k


actionsdev mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

On 10 Mar 2009, 7:29 am, Pete wrote:

NAME: onmouseover
VALUE: bgChange(‘http://www.yoursite.com/2ndbackgroundimage.jpg’)

NAME: background
VALUE:http://www.yoursite.com/2ndbackground.jpg

If you decide to do this, then make sure that you don’t also need a background color, tiling rules, or any of the other attributes that make up a ‘background’.

document.body.background will in fact work this way, but unless you include the rest of your attributes in there, you will replace a fully-formed background tag with a background tag that ONLY describes the background image and leaves everything else up to the browser defaults.

Walter


actionsdev mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Here’s a little snippet to paste into Protaculous. This gives you control over only the background image, leaving everything else untouched. It’s pretty easy to extend. As long as all of your images are in the same place (I recommend you use Upload Stuff to get everything into the Resources folder) there’s very little code needed to make this trick work.

This demonstrates a 15-second timer, but you could easily adapt this to respond to a click or other page-level event.

//a space-delimited list of alternate background images
var altBgs = $w('foo.gif bar.gif baz.gif');
//get and extend (with Prototype) the body of the page
//you could just as easily apply this function to a
//single DIV on the page by setting elm to it, like this:
// var elm = $('item4');
var elm = Element.extend(document.body);
//this function gets the CURRENT value of the background
//every time it is called, so it's safe inside a loop
var rotate = function(){
	var bg = elm.getStyle('background-image');
	//get the next background in the list, loop around
	//when you reach the end
	var next = '';
	altBgs.each(function(b,idx){
		var k = (idx == (altBgs.length - 1)) ? 0 : idx + 1;
		if(bg.include(b)){
			next = bg.sub(b,altBgs[k]);
		}
	});
	elm.setStyle({backgroundImage:next});
};
//call rotate() every 15 seconds
new PeriodicalExecuter(rotate,15);
//rotate every time anything on the page is clicked:
// document.observe('click',rotate);

Have a look at the comments inline for some extra goodies – you could apply this effect to a single div rather than the entire body of the page, giving you the image-switching effect some of you are looking for from time to time.

This function surgically targets only the background-image property – everything else about the background tag is left strictly alone.

To use this, apply Protaculous to your page, in the Actions palette, choose prototype-packed from the Library picker, click on either the top or bottom Function Body button, and paste this code into the editor window.

You will need to change the first line to reflect the actual filenames of your background images, naturally. You can also change the interval or comment out the PeriodicalExecuter call and substitute a click listener as noted in the comments.

Walter


actionsdev mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Wow!!!

All of this is pretty cool! Will have to spend some time on this and figure it out.

As far as getting things to look the way I want with Freeway, I am having pretty good luck so far, I think. Getting the “visuals” correct is easier in Freeway than I have found in GL. I made a few rollovers last night after studying the video and it went very well.

Thanks,

Robert


actionsdev mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options