By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
438,492 Members | 1,987 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 438,492 IT Pros & Developers. It's quick & easy.

Link rollovers with unsliced images

P: n/a
I'm not asking a question. I'm simply showing a technique that may be useful
to some people in future.

I wanted a way of using photographs for rollover effects without having to
slice the photographs into individual images for the individual links. I
wanted a pure CSS (no script) method. Here is my answer, using just 2
photographs, one for the "pale" foreground image, and one for the "rich"
(saturated) rollover image.

http://www.barry.pearson.name/articl...c/rollover.htm
http://www.barry.pearson.name/articl...c/rollover.css
http://www.barry.pearson.name/articl...lover_pale.jpg
http://www.barry.pearson.name/articl...lover_rich.jpg

When I showed an earlier version of this elsewhere, Eric Meyer told me of
earlier articles. I hadn't read them, but it is clear that using this
technique for a vertically-aligned set of links had been published before I
published mine. Oh, well! Perhaps others have even published the 2-dimensional
technique I used too, although I don't know of them. But at least I had the
satisfaction of independently working it out for myself. Eric pointed me at:
http://www.alistapart.com/articles/slidingdoors2/

--
Barry Pearson
http://www.Barry.Pearson.name/photography/
http://www.BirdsAndAnimals.info/
http://www.ChildSupportAnalysis.co.uk/
Jul 20 '05 #1
Share this Question
Share on Google+
17 Replies


P: n/a
On Thu, 29 Apr 2004 19:45:30 +0100, Barry Pearson wrote:
http://www.barry.pearson.name/articl...c/rollover.htm


Nice! And that is one handsome
individual you have as the subject.. ;-)
(..great photo as well)

--
Andrew Thompson
http://www.PhySci.org/ Open-source software suite
http://www.PhySci.org/codes/ Web & IT Help
http://www.1point1C.org/ Science & Technology
Jul 20 '05 #2

P: n/a
Andrew Thompson wrote:
On Thu, 29 Apr 2004 19:45:30 +0100, Barry Pearson wrote:
http://www.barry.pearson.name/articl...c/rollover.htm


Nice! And that is one handsome
individual you have as the subject.. ;-)
(..great photo as well)


Thanks!

I did nasty things to the original web photograph for the purpose: I
under-saturated one, and over-saturated the other, and massively
over-compressed them.

I have a few more photographs of Iguanas here, including a better version of
that one:
http://www.birdsandanimals.info/bcp/...ls_ecuador.htm

I particularly like this one:
http://www.birdsandanimals.info/bcp/...95_23_14_4.htm

--
Barry Pearson
http://www.Barry.Pearson.name/photography/
http://www.BirdsAndAnimals.info/
http://www.ChildSupportAnalysis.co.uk/
Jul 20 '05 #3

P: n/a
On Fri, 30 Apr 2004 08:07:20 +0100, Barry Pearson wrote:
http://www.birdsandanimals.info/bcp/...ls_ecuador.htm

I particularly like this one:
http://www.birdsandanimals.info/bcp/...95_23_14_4.htm


While that is a technically excellent shot,
I prefer the first. The splashes of red
in the foreground and background give it a much
'warmer' feel. Also particularly liked the
way the light falls in the 'Vicuna' image,
gives it an almost 'mystical/whimsical' look. :-)

[ Looks around.. What? Stylesheets?
Oh yeah, yeah, ..I remember now. ;-) ]

--
Andrew Thompson
http://www.PhySci.org/ Open-source software suite
http://www.PhySci.org/codes/ Web & IT Help
http://www.1point1C.org/ Science & Technology
Jul 20 '05 #4

P: n/a
Andrew Thompson wrote:
On Fri, 30 Apr 2004 08:07:20 +0100, Barry Pearson wrote:
http://www.birdsandanimals.info/bcp/...ls_ecuador.htm

I particularly like this one:
http://www.birdsandanimals.info/bcp/...95_23_14_4.htm
While that is a technically excellent shot,
I prefer the first. The splashes of red
in the foreground and background give it a much
'warmer' feel. Also particularly liked the
way the light falls in the 'Vicuna' image,
gives it an almost 'mystical/whimsical' look. :-)


I agree with you about those red splashes, which are curious plants on Santa
Cruz island. It was the that one that I used when submitting a portfolio for a
distinction with the Royal Photographic Society.
[ Looks around.. What? Stylesheets?
Oh yeah, yeah, ..I remember now. ;-) ]


Chuckle! Well, I claim that the original post was on-topic for this NG!

--
Barry Pearson
http://www.Barry.Pearson.name/photography/
http://www.BirdsAndAnimals.info/
http://www.ChildSupportAnalysis.co.uk/
Jul 20 '05 #5

P: n/a
"Barry Pearson" <ne**@childsupportanalysis.co.uk> wrote in message
....
I wanted a way of using photographs for rollover effects without having to
slice the photographs into individual images for the individual links. I


Thanks, Barry! Just what I was looking for. Only... is it possible to make
round selections instead of rectangular ones?

Meri
Jul 20 '05 #6

P: n/a
"Kallio Meri" <ka********@nospamhotmail.com> wrote in message
Thanks, Barry! Just what I was looking for. Only... is it possible to make
round selections instead of rectangular ones?


It won't be necessary. Sorry about the stupid question.
Jul 20 '05 #7

P: n/a
"Barry Pearson" <ne**@childsupportanalysis.co.uk> wrote:
I'm not asking a question. I'm simply showing a technique that may be useful
to some people in future. I wanted a way of using photographs for rollover effects without having to
slice the photographs into individual images for the individual links. I
wanted a pure CSS (no script) method. Here is my answer, using just 2
photographs, one for the "pale" foreground image, and one for the "rich"
(saturated) rollover image.
And BACKGROUND-POSITION.

It's a shame it doesn't allow for mattes. You could create any shape
you wanted.
http://www.barry.pearson.name/articl...c/rollover.htm
http://www.barry.pearson.name/articl...c/rollover.css
http://www.barry.pearson.name/articl...lover_pale.jpg
http://www.barry.pearson.name/articl...lover_rich.jpg

Jul 20 '05 #8

P: n/a
"Kallio Meri" <ka********@nospamhotmail.com> wrote:
"Barry Pearson" <ne**@childsupportanalysis.co.uk> wrote in message
...
I wanted a way of using photographs for rollover effects without having to
slice the photographs into individual images for the individual links. I


Thanks, Barry! Just what I was looking for.


I thought you said a "round circle with text" changing in a rollover
to a unique image in each circle. At the minimum that suggests gif,
and maybe animated gif. So I suggested Flash, instead. It will give
you the control you're looking for.

When this method does is 'uncover' rectangular areas in just the same
hidden image.

Jul 20 '05 #9

P: n/a
"Barry Pearson" <ne**@childsupportanalysis.co.uk> wrote:
Cruz island. It was the that one that I used when submitting a portfolio for a
distinction with the Royal Photographic Society.


A lot of people seem interested in that, for some reason. What do they
award you? Is it a certificate, grant? . . ?

Again, very well done photos, btw. Composition, detail, everything.
Very well done.

Jul 20 '05 #10

P: n/a
Mark Johnson wrote:
"Barry Pearson" <ne**@childsupportanalysis.co.uk> wrote:
I'm not asking a question. I'm simply showing a technique that may be
useful to some people in future.

I wanted a way of using photographs for rollover effects without
having to slice the photographs into individual images for the
individual links. I wanted a pure CSS (no script) method. Here is my
answer, using just 2 photographs, one for the "pale" foreground
image, and one for the "rich" (saturated) rollover image.


And BACKGROUND-POSITION.

It's a shame it doesn't allow for mattes. You could create any shape
you wanted.


Have you a suggestion? I am aware of the limitations of this technique, and I
keep trying to think how to extend it.

I would love to be able to do non-rectangular rollovers. It would be nice, for
example, to be able to do anything that an image map could do. But, without
script, I can't think how to make the connection. (It is probably so simple!)
http://www.barry.pearson.name/articl...c/rollover.htm
http://www.barry.pearson.name/articl...c/rollover.css
http://www.barry.pearson.name/articl...lover_pale.jpg
http://www.barry.pearson.name/articl...lover_rich.jpg


--
Barry Pearson
http://www.Barry.Pearson.name/photography/
http://www.BirdsAndAnimals.info/
http://www.ChildSupportAnalysis.co.uk/
Jul 20 '05 #11

P: n/a
"Barry Pearson" <ne**@childsupportanalysis.co.uk> wrote:
Mark Johnson wrote:
"Barry Pearson" <ne**@childsupportanalysis.co.uk> wrote:
I'm not asking a question. I'm simply showing a technique that may be
useful to some people in future. I wanted a way of using photographs for rollover effects without
having to slice the photographs into individual images for the
individual links. I wanted a pure CSS (no script) method. Here is my
answer, using just 2 photographs, one for the "pale" foreground
image, and one for the "rich" (saturated) rollover image.
And BACKGROUND-POSITION. It's a shame it doesn't allow for mattes. You could create any shape
you wanted.
Have you a suggestion? I am aware of the limitations of this technique, and I
keep trying to think how to extend it.


Yeah - but. It's AWFULLY limited. You literally create the look you
want on hover as a single image. Your slicing and dicing is done with
the divs. That's the difference. You just create the to-be-sliced
image, as always, and upload the entire thing as hover. It means you
can't change you div positions, though, not even with other style
sheets, or have to load in a new hover image. But, admittedly, it
would solve the problem, but only within an rectangular area. It would
appear as an irregular outline, of whatever you painted, because you
layered and pasted the hover sections over the normal link image.

Of course, in practice, I don't know. Maybe if it's small enough, you
could run little round buttons out in an arc, as is so typical with
Flash navigation. There'd be some rectangular overlap. But you know
the saying - it might be good enough for government work. Again, once
you labor over that image, you can't change the div locations.


Jul 20 '05 #12

P: n/a
"Mark Johnson" <10*******@compuserve.com> wrote in message
....
I thought you said a "round circle with text" changing in a rollover
to a unique image in each circle. At the minimum that suggests gif,
and maybe animated gif. So I suggested Flash, instead. It will give
you the control you're looking for.
OK, this example was almost exactly what I was looking for. It doesn't
matter if the link area isn't round because the area around the circle
(containing either text or an image) will be the same, uniform color in the
two pictures.

However, Barry's example doesn't tell me how to make the change gradual.
I'll definately go for Flash if I can get hold of a copy. It would be the
best solution.

When this method does is 'uncover' rectangular areas in just the same
hidden image.

Jul 20 '05 #13

P: n/a
"Kallio Meri" <ka********@nospamhotmail.com> wrote:
"Mark Johnson" <10*******@compuserve.com> wrote in message
I thought you said a "round circle with text" changing in a rollover
to a unique image in each circle. At the minimum that suggests gif,
and maybe animated gif. So I suggested Flash, instead. It will give
you the control you're looking for.

OK, this example was almost exactly what I was looking for. It doesn't
matter if the link area isn't round because the area around the circle
(containing either text or an image) will be the same, uniform color in the
two pictures. However, Barry's example doesn't tell me how to make the change gradual.
I'll definately go for Flash if I can get hold of a copy. It would be the
best solution.


I was thinkin . . though. What if you used javascript? You could
either just run a macro, or settimeout callback, and slide an image
around to give the appearance . . of animation? I don't know. The
single image would appear as a bunch of little cels, a table of
images. That would be your one hover image. Some big 'storyboard'. But
with jpg compression, you might get it down to almost nothing, and
still look reasonably good. Now if you were able to introduce image
maps, as well . . ? then you'd get your irregular hot spots.

Then again, maybe Flash _is_ better. One would have to compare.
Jul 20 '05 #14

P: n/a
Hi all

I managed to do more or less what I wanted and put the result for you to see
at a temporary address.

Two problems remain:

1. The image under the link doesn't appear gradually as I would've liked it
to - but I can do without. I don't have Flash and don't know any JavaScript
(at least not yet).
2. The effect only works if there is some text in the link. My solution was
that I only wrote the number of the link (I could change it into even
smaller, a point), positioned it outside the circle area where the color is
uniform and gave it the color of the background. The problem is that the
numbers still show when the page is loading. Any ideas?

A third problem that doesn't concern stylesheets:
3. I created the image with CorelDraw and exporting it in jpg format the
orange text becomes blurry.

http://www.geocities.com/hupsankeikkaa/galleria_2.html

I'll leave it there for a day or so.

Meri
Jul 20 '05 #15

P: n/a
"Kallio Meri" <ka********@nospamhotmail.com> wrote:
http://www.geo cities.com/hupsankeikkaa/galleria_2.html I managed to do more or less what I wanted and put the result for you to see
at a temporary address. Two problems remain: 2. The effect only works if there is some text in the link. My solution was
that I only wrote the number of the link
How about just a non-breaking space -  
A third problem that doesn't concern stylesheets:
3. I created the image with CorelDraw and exporting it in jpg format the
orange text becomes blurry.


Slight black 'halo', shadow, outline, and a touch of unsharp
sharpening?

I think your index page looks very good, just in my opinion.

Jul 20 '05 #16

P: n/a
"Mark Johnson" <10*******@compuserve.com> wrote in message
....
How about just a non-breaking space -  
Thanks! Why didn't I think about that myself? :-) (I tried a normal space)
I think your index page looks very good, just in my opinion.


Thanks :)
Jul 20 '05 #17

P: n/a
Mark Johnson wrote:
"Barry Pearson" <ne**@childsupportanalysis.co.uk> wrote:
Cruz island. It was the that one that I used when submitting a
portfolio for a distinction with the Royal Photographic Society.
A lot of people seem interested in that, for some reason. What do they
award you? Is it a certificate, grant? . . ?


Letters after my name! (Barry Pearson LRPS - Licentiate of the Royal
Photographic Society).
Again, very well done photos, btw. Composition, detail, everything.
Very well done.


Thanks. It is my one visual-design talent. Apart from that, I am a techie.

--
Barry Pearson
http://www.Barry.Pearson.name/photography/
http://www.BirdsAndAnimals.info/
http://www.ChildSupportAnalysis.co.uk/
Jul 20 '05 #18

This discussion thread is closed

Replies have been disabled for this discussion.