473,320 Members | 1,946 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,320 software developers and data experts.

Link rollovers with unsliced images

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
17 2454
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
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
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
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
"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
"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
"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
"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
"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
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
"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
"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
"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
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
"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
"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
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 thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

3
by: Magic-chef | last post by:
This rollover script is created by Image Reaady. When using IE and especially with Win XP the images involved in the rollover disappear. It happens gradually with one or two at first then all. ...
2
by: Steve Lockridge | last post by:
We have recently created simple javascript rollovers on a site using Macromedia Fireworks. What is weird is that four of them work and one doesn't on the Mac platform using Safari and IE. The NN...
2
by: Frances Del Rio | last post by:
Hi, I while back I was having a problem with rollovers, even though I do them in a very conventional way: function roll(i) { document.src = eval(i + "_roll.src") } // in which value passed...
3
by: Shahid Juma | last post by:
Hi, Is it possible to do roll overs over an area of an image. I know you can setup up a hotspot but can a roll over be done on that particular hotsop. Additionally, when the image changes on the...
2
by: Frances Del Rio | last post by:
I have a form in which submit button is an img.. would like to do it w/a rollover, but can't get rollover to work.. can you do rollovers w/img submit buttons? this is code I have: <input...
8
by: Nathan Sokalski | last post by:
I have several System.Web.UI.WebControls.HyperLink Controls which I want to display as rollover images. I know how to make these manually using the <a> and <img> tags or the <a> tag and a...
3
by: FAQ server | last post by:
----------------------------------------------------------------------- FAQ Topic - Why are my Rollovers so slow? ----------------------------------------------------------------------- Images...
12
by: FAQ server | last post by:
----------------------------------------------------------------------- FAQ Topic - Why are my rollovers so slow? ----------------------------------------------------------------------- Images...
0
by: DolphinDB | last post by:
The formulas of 101 quantitative trading alphas used by WorldQuant were presented in the paper 101 Formulaic Alphas. However, some formulas are complex, leading to challenges in calculation. Take...
0
by: ryjfgjl | last post by:
ExcelToDatabase: batch import excel into database automatically...
0
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
0
by: Vimpel783 | last post by:
Hello! Guys, I found this code on the Internet, but I need to modify it a little. It works well, the problem is this: Data is sent from only one cell, in this case B5, but it is necessary that data...
1
by: PapaRatzi | last post by:
Hello, I am teaching myself MS Access forms design and Visual Basic. I've created a table to capture a list of Top 30 singles and forms to capture new entries. The final step is a form (unbound)...
0
by: CloudSolutions | last post by:
Introduction: For many beginners and individual users, requiring a credit card and email registration may pose a barrier when starting to use cloud servers. However, some cloud server providers now...
0
by: Defcon1945 | last post by:
I'm trying to learn Python using Pycharm but import shutil doesn't work
0
by: Shællîpôpï 09 | last post by:
If u are using a keypad phone, how do u turn on JavaScript, to access features like WhatsApp, Facebook, Instagram....
0
by: Faith0G | last post by:
I am starting a new it consulting business and it's been a while since I setup a new website. Is wordpress still the best web based software for hosting a 5 page website? The webpages will be...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.