I hate you guys! The volunteers over at the WordPress.COM forum are sneaky. They knew the codes to create perfect hover (or mouse-over) images. But all they did was post some dummy hints for the rest of us bloggers. We don’t know where to begin. So I did lots of online research yesterday after reading their futile responses to a couple of threads on rollover images.
I found only one website that helped me. I found out a few minutes ago that both the ‘width’ and ‘height’ of the hover image ‘below’ must be resized exactly to match the dimentions of the first image ‘above’. Also, both the CSS stylesheet section (via the Design > Edit CSS) and the HTML tab (via the Write > Post) must be filled out with the same dimensions for both ‘width’ and ‘height’.
My first hover image could be found on the ‘Home’ page. I wanted both the ‘above’ image of brown and the ‘below’ image’ of black to match. Earlier, I had a larger dimension of 600 pixels (width) by 665 pixels (height). And the ‘below’ image only showed the upper left hand corner of the ‘black’ image. There are other versions out there whereby the hover images ‘below’ zoom out. Some ‘below’ images zoom out and push the surrounding text aside. I have yet to learn how to mess around with these visual features.
I found out a few minutes ago that the hover image works well for the captions, too. The ‘nasty nesting’ for the HTML portion (via Write > Post) is in this order: caption — div class — a — generic text goes here –/a — /div — /caption. It’s important to find the ‘div’ codes for the CSS stylesheet to make the ‘html’ work for the posts (or pages).
Copyright © 2008 by Fluffy von der Flynn. All rights reserved.
Leave a Reply