链接翻转与未切割的图像 [英] Link rollovers with unsliced images

问题描述

我不是在问一个问题。我只是向未来的某些人展示一种可能有用的技术

。


我想要一种使用照片进行翻转效果的方法而不需要将b = b
切成单个图像的各个链接。我想要一个纯CSS（无脚本）方法。
需要一个纯CSS（无脚本）方法。这是我的答案，仅使用2张

的照片，一张用于苍白照片。前景图像，以及一个用于富的
（饱和）翻转图像。

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


当我展示在其他地方的早期版本中，Eric Meyer告诉我之前的文章是

。我没有读过它们，但很明显，在我发布我的b $ b之前，已经发布了使用这种

技术进行垂直对齐的链接。那好吧！也许其他人甚至发布了我用过的二维

技术，虽然我不知道它们。但至少我对自己独立完成了满足感。

满意度。 Eric指着我：
http://www.alistapart.com/ article / slidingdoors2 /

-

Barry Pearson
http://www.Barry.Pearson.name/photography/
http://www.BirdsAndAnimals.info/
http://www.ChildSupportAnalysis.co.uk/

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/

推荐答案

在2004年4月29日星期四19:45:30 +0100，Barry Pearson写道：

On Thu, 29 Apr 2004 19:45:30 +0100, Barry Pearson wrote:

http://www.barry.pearson.name/articl...c/rollover.htm

很好！这是一个帅气的

个人你有作为主题.. ;-)

（也是很棒的照片）


-

Andrew Thompson
http：// www .PhySci.org / 开源软件套件
http：/ /www.PhySci.org/codes/ Web& IT帮助
http://www.1point1C.org/ Science&技术

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

Andrew Thompson写道：

Andrew Thompson wrote:

2004年4月29日星期四19:45:30 +0100，Barry Pearson写道：

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)

谢谢！


为了这个目的，我为原始的网络照片做了一些令人讨厌的事情：我b
欠饱和，另一个过度饱和，并且大量地/>
过度压缩它们。


我还有一些Iguanas的照片，包括更好的版本

，其中一个：
http://www.birdsandanimals.info/bcp/。 ..ls_ecuador.htm


我特别喜欢这个：
http://www.birdsandanimals.info/bcp/...95_23_14_4.htm


-

Barry Pearson
http： //www.Barry.P earson.name/photography/
http://www.BirdsAndAnimals.info /
http://www.ChildSupportAnalysis.co.uk/

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/

On Fri，2004年4月30日08:07:20 +0100，Barry Pearson写道：

On Fri, 30 Apr 2004 08:07:20 +0100, Barry Pearson wrote:

< a rel =nofollowhref =http://www.birdsandanimals.info/bcp/galleries/animals_ecuador.htmtarget =_ blank> http://www.birdsandanimals.info/bcp/...ls_ecuador。 htm

我特别喜欢这个：
http://www.birdsandanimals.info/bcp/...95_23_14_4.htm

虽然这是技术上非常出色的拍摄，

我更喜欢第一个。在前景和背景中飞溅的红色

给它带来了很多b $ b'温暖'的感觉。特别喜欢

的方式，灯光落入''Vicuna''形象，

给它一个几乎''神秘/异想天开'的外观。 :-)


[环顾四周......什么？样式表？

哦是的，是的，我现在还记得。 ;-)]


-

Andrew Thompson
http://www.PhySci.org/ 开源软件套件
http://www.PhySci.org/codes/ Web& IT帮助
http://www.1point1C.org/ Science&技术

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

这篇关于链接翻转与未切割的图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！