[seen.to]

After coming up with some imageless CSS stuff I wanted to experiment with something where images were central to the idea.

Once again this isn't offered as an example of design, instead as an example of what can be achieved with CSS/XHTML alone i.e. no javascript etc.

http://www.yournewdesigner.com/css-e...r-chooser.html

Once again this ONLY WORKS IN FIREFOX.

[blipp]

Works fine in Safari

[pgo]

Impressed.

It's not terribly practical (well, the rollover might be), but well done.

I imagine that method (<span>s, positioning, etc) is only necessary when you have two sets of links you want to have the same effect. It should be simple enough to do a single set (say the tone boxes on the car image) with background changes on :hover states and some tricky padding and background-positioning. And image slicing.

[emil]

Nice.

#c1 {
height: 19px;
float: left;
width: 373px;
}

#c2 {
height: 19px;
float: left;
width: 394px;
}

#c3 {
height: 19px;
float: left;
width: 413px;
}

#c4 {
height: 19px;
float: left;
width: 425px;
}

#c5 {
height: 19px;
float: left;
width: 438px;
}

#c6 {
height: 19px;
float: left;
width: 450px;
}

#c7 {
height: 19px;
float: left;
width: 459px;
}

#c8 {
height: 19px;
float: left;
width: 463px;
}

#c9 {
height: 19px;
float: left;
width: 470px;
}

#c10 {
height: 19px;
float: left;
width: 472px;
}

#c11 {
height: 19px;
float: left;
width: 476px;
}

#c12 {
height: 19px;
float: left;
width: 475px;
}

#c13 {
height: 19px;
float: left;
width: 474px;
}

#c14 {
height: 19px;
float: left;
width: 472px;
}

#c15 {
height: 19px;
float: left;
width: 468px;
}

#c16 {
height: 19px;
float: left;
width: 464px;
}

#c17 {
height: 19px;
float: left;
width: 460px;
}

#c18 {
height: 19px;
float: left;
width: 449px;
}

#c19 {
height: 19px;
float: left;
width: 444px;
}

#c20 {
height: 19px;
float: left;
width: 431px;
}

#c21 {
height: 19px;
float: left;
width: 415px;
}

#c22 {
height: 19px;
float: left;
width: 380px;
}

#c23 {
height: 19px;
float: left;
width: 357px;
}

#c24 {
height: 19px;
float: left;
width: 322px;
}

#c25 {
height: 19px;
float: left;
width: 272px;
}

but the effect is really cool
Oh, and your car looks better orange

[Mr Fred]

HAHA thats crap.

[cam]

Not sure if you've seen this seen.to; http://www.bram.us/_theboxoffice/

automated way of getting the wraparound effect

[seen.to]

Cheers blip, pgo and emil

Hadn't seen that Cam, cheers - would have saved me a couple of hours :-/

[pgo]

Originally Posted by seen.to

Hadn't seen that Cam, cheers - would have saved me a couple of hours :-/

Hahaha.

[Mr Fred]

Originally Posted by Mr Mik

HAHA thats crap.

haha what a cunt.