replacing the cut-expansion triangles with other images

[rise]

i was tweaking my own journal layout today out of boredom, and i think i've figured out a workable way to customize the triangles for expanding cut tags. here's how i did it:

/*--- custom tag expansion icons ---*/

img[src*="collapse.gif"] {
width: 0;
height: 0;
padding: 14px 15px 0px 0px !important;
background: transparent url(http://i54.tinypic.com/2z7lfk1.png) no-repeat scroll 0 0;
}

img[src*="expand.gif"] {
width: 0;
height: 0;
padding: 14px 15px 0px 0px !important;
background: transparent url(http://i51.tinypic.com/33cykh3.png) no-repeat scroll 0 0;
}

img[src*="collapse-end.gif"] {
width: 0;
height: 0;
padding: 14px 15px 0px 0px !important;
background: transparent url(http://i55.tinypic.com/2s9owoz.png) no-repeat scroll 0 0;
}

just in case the names aren't self-explanatory: "collapse.gif" is the image shown when the cut tag is not yet expanded. once expanded, "expand.gif" takes its place, and "collapse-end.gif" appears at the end of the cut area. it isn't that drastically different from replacing site icons with custom tinyicons, where the original image is reduced to 0x0, the new image is set as its background, and the object padding is set to the same as or just little bigger than the dimensions of the new image.

i think would probably work well in many layouts to switch to slightly different images on hovering over the originals, to give some visual clue to users that the images are clickable. for instance, instead of what i've done, you could use pacman tinyicons for expand and collapse, and use an animated chomping pacman on hover to indicate clickability. here's a pseudo-css of what that might look like:

img[src*="collapse.gif"] {
width: 0;
height: 0;
padding: 16px 16px 0px 0px !important;
background: transparent url(http://fictional.image.host/static-closed-circle.gif) no-repeat scroll 0 0;
}

img[src*="collapse.gif"]:hover {
width: 0;
height: 0;
padding: 16px 16px 0px 0px !important;
background: transparent url(http://fictional.image.host/animated-chomping-pacman.gif) no-repeat scroll 0 0;
}

img[src*="expand.gif"], img[src*="collapse-end.gif"] {
width: 0;
height: 0;
padding: 16px 16px 0px 0px !important;
background: transparent url(http://fictional.image.host/static-openmouthed-pacman.gif) no-repeat scroll 0 0;
}

img[src*="expand.gif"]:hover, img[src*="collapse-end.gif"]:hover {
width: 0;
height: 0;
padding: 16px 16px 0px 0px !important;
background: transparent url(http://fictional.image.host/animated-chomping-pacman.gif) no-repeat scroll 0 0;
}

what do you all think?

Comments

[adalger]

I think that's pretty nifty!