[Pro] html text in a rollover

Freeway
1

I’ve seen it numerous times but how do I achieve what is shown here http://www.clydepaperandprint.com/index.html.
On the paper, print and education ‘buttons’, when moused over the button highlights but the text is still html. I’m trying to achieve this using divs and background images but haven’t got there yet - any suggestions?

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

2

This technique is called CSS Sprites. A single background image is
positioned within a fixed-size overflow:hidden HTML container such
that the appropriate portion of the image is revealed. When you mouse
over the block, a the background-position attribute is changed so that
a different part of the large background image is revealed. The text
is positioned within the larger block using padding, so it appears
where it should. You can see one of these images here: http://www.clydepaperandprint.com/images/main-link-paper.jpg
. Note how they’ve left themselves a little wiggle room at the bottom
of each option.

Walter

On May 12, 2011, at 5:14 AM, neil.west1 wrote:

I’ve seen it numerous times but how do I achieve what is shown here http://www.clydepaperandprint.com/index.html
.
On the paper, print and education ‘buttons’, when moused over the
button highlights but the text is still html. I’m trying to achieve
this using divs and background images but haven’t got there yet -
any suggestions?

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

3

Ahaa, excellent! thanks. So do I remember correctly that I can achieve this effect with the css rollover action?

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

4

Close to it[1], but if you want a true sprite, you have to roll that
by hand. I have instructions here:

http://scripty.walterdavisstudio.com/sprite

If I were doing this page, I would take it even further, and put all
three of the images – in both states, so 6 frames in total – into a
single image. That way there’s only one image to download for the
entire effect, and the home page will actually load faster with that
one larger image. It’s counter-intuitive, but it works, because each
time you request a file (and even in modern browsers, you can only
request two files at a time) there’s this setup and teardown process
as the file is requested from the server, the format is negotiated,
the header is sent, then the file is sent, etc. It’s basically a lot
of book-keeping. And no matter how large or small the file, the book-
keeping part takes approximately the same amount of time. So reducing
the total number of files that make up the page makes for a huge
improvement in page loading time.

Walter

  1. The CSS Rollover Action uses separate images for both states of the
    rollover, so there’s none of the improvement vis-a-vis file loading
    that you would get with a true sprite-based rollover. There’s also a
    distinct lag on the first roll over each image, because the “over”
    image has to be requested separately and is not coming from cache.
    With a sprite, the image is already there, and the rollover happens so
    quickly that it can appear a little “harsh”. I have seen some clever
    effects that use JavaScript to switch the position of the sprite first
    to an “inter-frame”, which has blur effects in the direction that you
    want it to appear to move, then to the resting “over” frame, with each
    transition offset by a few milliseconds. Your brain is convinced, just
    as in a movie theater, that you are seeing motion, when you’re really
    only seeing those three frames.

On May 12, 2011, at 7:11 AM, neil.west1 wrote:

Ahaa, excellent! thanks. So do I remember correctly that I can
achieve this effect with the css rollover action?

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

5

Neil,

Here’s a downloadable FW example illustrating, in part, the how-to of
using a Sprite. It may be of some help.
http://www.xiiro.com/demo/css_graphic_menu/index.html

Todd

On May 12, 2011, at 5:53 AM, Walter Davis wrote:

This technique is called CSS Sprites.

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

6

Thanks Walt, I’ve followed your instructions and I’m nearly there but I still have a problem.

I’ve tried padding the html item to indent the text but that also indents the sprite - is this right? How do I indent the text without squashing the background image?

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

7

You can’t apply the padding to the HTML item, you have to apply it
within the A tag (the link item) itself.

Remember when you do that that your link item will grow by whatever
pixel dimension you add to the padding. So if you had an A tag styled
like this inside your DIV:

a.myFancyLink {
	display: block;
	height: 200px;
	width: 300px;
	background-image: url(Resources/foo.jpg);
	background-position: 0 0;
	background-repeat: no-repeat;
	overflow: hidden;
}

If you wanted to then bring the text in 12px from each side and 100px
down from the top, you would need to make your dimensions like this:

	...
	height: 100px;
	width: 276px;
	padding: 100px 12px 0;
	...

That way you compensate for the extra dimensions added by the padding.
The box model makes almost zero sense to someone raised on DTP, like
me, but it is at least consistent. IE, however, may tend to double up
on margin if you set that, but we’re not doing that here so it should
be fine.

Walter

On May 12, 2011, at 11:06 AM, neil.west1 wrote:

Thanks Walt, I’ve followed your instructions and I’m nearly there
but I still have a problem.

I’ve tried padding the html item to indent the text but that also
indents the sprite - is this right? How do I indent the text without
squashing the background image?

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

8

Hi Walt, thanks again!

I’m very much raised on DTP like you but I do ‘get’ the box model (to a certain extent!) but I’m still getting to grips with styles etc. so… where do I apply the code above for the A tag? :wink:

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

9

If you followed my example from the scripty site, then you will have
created a set of styles for the a and a:hover; one for each element
you need to add a sprite to, either using CSSEdit or Freeway’s Edit
Style / Extended system. You will have created a specific style for
your a tag there, and that’s where you would have to update the
dimensions and padding. You cannot do this in the Freeway Inspector,
or at all visually, because the controls simply are not there. I
suppose you could type out an all-on-one-line style tag in the
Hyperlink dialog’s Extended sub-dialog, but that’s just building a rod
for your back when you need to edit something.

Walter

On May 12, 2011, at 11:30 AM, neil.west1 wrote:

Hi Walt, thanks again!

I’m very much raised on DTP like you but I do ‘get’ the box model
(to a certain extent!) but I’m still getting to grips with styles
etc. so… where do I apply the code above for the A tag? :wink:

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