cell background graphic change on rollover.

Sorry, nothing online yet, just working through bits, but I have an HTML box with a jpeg background in it. The link copy is in the same box.

Ids there any way of the background jpeg swapping to another when rolled over - similar to what you can do with the CSS Menus action (which I could use, but there’s not a dropdown from it)?

thanks
Trev


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

Here is a crude example - http://www.deltadesign.co/fw_examples/other/boxrollover.html

This uses some CSS to add the background image to the html box (and to swop it on hover). The text has a normal link on it.

There are quite a few ways you could do this including javascript. Just depends on how tall your waders are.

David


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

The CSS way to do that is with the :hover pseudo attribute. And, as
always, there are a few different strategies for working it out.

Here’s one: First, create your html box. Create a new style with a
background-image attribute

  Name: mystyle

then apply it to your html box. Next, create a new tag style

  Tag: .mystyle:hover

and give it a different background-image attribute. Because it’s a tag
style, no need to apply it. Just preview and move your mouse around.


Ernie Simpson

On Fri, Jan 25, 2013 at 12:35 PM, Trevreav email@hidden wrote:

Sorry, nothing online yet, just working through bits, but I have an HTML
box with a jpeg background in it. The link copy is in the same box.

Ids there any way of the background jpeg swapping to another when rolled
over - similar to what you can do with the CSS Menus action (which I could
use, but there’s not a dropdown from it)?

thanks
Trev


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


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

Ernie, dave, thankyou both for your replies on this. I’m not in front of the job at the moment but will try things out early next week.

Have a good weekend both.

Trev


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

The way I did it is the same as Ernie outlined. 2 styles for the html container

#rolloverbox {
background-image:url(http://www.yoursite.com/yourimage.jpg);
background-repeat:no-repeat;
background-position:center;
}
#rolloverbox:hover {
background-image:url(http://www.yoursite.com/yourotherimage.jpg);
background-repeat:no-repeat;
background-position:center;
}

Mine added via Page>Html Markup in the before slot

D


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

Cool. Respectfully though, my suggestion was to create a class style via
the Style Editor - no pasted, extended or hand-written code. As a class
style, can be applied to any selected html object, even multiple objects.

Cheers!


Ernie Simpson

On Sat, Jan 26, 2013 at 11:00 AM, DeltaDave email@hidden wrote:

The way I did it is the same as Ernie outlined. 2 styles for the html
container

#rolloverbox {
background-image:url(http://www.yoursite.com/yourimage.jpg);
background-repeat:no-repeat;
background-position:center;
}
#rolloverbox:hover {
background-image:url(http://www.yoursite.com/yourotherimage.jpg);
background-repeat:no-repeat;
background-position:center;
}

Mine added via Page>Html Markup in the before slot

D


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


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

I know Ernie - and you are the Master when it comes to that.

I don’t know how you had the patience to do all those styles for the different shadows.

D


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

Ernie, Dave, thanks very much for the info. Through a bit of trial and error (basically I’d never done a class style using an image) I got it working using Ernie’s method.

But thanks to both for the input. Dave, would your method work sitewide should I have lots of the same?

Trev

On 26 Jan 2013, at 17:19, Ernie Simpson wrote:

Cool. Respectfully though, my suggestion was to create a class style via
the Style Editor - no pasted, extended or hand-written code. As a class
style, can be applied to any selected html object, even multiple objects.

Cheers!


Ernie Simpson

On Sat, Jan 26, 2013 at 11:00 AM, DeltaDave email@hidden wrote:

The way I did it is the same as Ernie outlined. 2 styles for the html
container

#rolloverbox {
background-image:url(http://www.yoursite.com/yourimage.jpg);
background-repeat:no-repeat;
background-position:center;
}
#rolloverbox:hover {
background-image:url(http://www.yoursite.com/yourotherimage.jpg);
background-repeat:no-repeat;
background-position:center;
}

Mine added via Page>Html Markup in the before slot

D


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

Dave, would your method work sitewide should I have lots of the same?

Yes - if you were prepared to create Div specific versions.

Are you planning on using the same 2 images in every case. If so then the class method is easier. ie 1 class for all.

If you are going to use different images then you will need to vary the code anyway so you might as well use my method or you will end up with umpteen different classes.

D


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

Thanks Dave, it was just theoretical. For now it’s just the one, but thanks for the info.

Trev

On 28 Jan 2013, at 16:49, DeltaDave wrote:

Dave, would your method work sitewide should I have lots of the same?

Yes - if you were prepared to create Div specific versions.

Are you planning on using the same 2 images in every case. If so then the class method is easier. ie 1 class for all.

If you are going to use different images then you will need to vary the code anyway so you might as well use my method or you will end up with umpteen different classes.

D


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

And if your items were based on a Master then the same code would work on each subsequent page.

D


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