Kimler Adventure Pages (http://randsco.com)

Putting a Face to a Name

Image Rollover: The author's image shows when hovering over their blog button.

Lots of folks like b2evolution's multi-blogging capabilities and use it to create a community of bloggers (family members, artist's groups, church congregations, to name a few). This often means that the blog name is the author's name. Why not (like Adam asked) associate an image with each author, so that when you hover over the blog button, you see their photo? (The image on the right shows an example for "Jessica's Blog").

Great idea Adam!

Our blog isn't a multi-blog, so I was reluctant to pursue this question, because I couldn't test it. Unbeknownst to Adam, the technique he wanted to use (Eric Meyer's pure CSS pop-up) is similar to the one I (independently) developed for our image/caption zoom (the "pop" demonstrated by many of the images here). This hooked me!

First, I made a mock-up of Adam's page, where you can see the rollover concept in action and view the inline CSS & HTML using 'view source'. I then dusted off my server software (yellowtip), fired up the demonstration b2evo blog (which IS a multi-blog) and got the whole thing working on my desktop.

This tutorial will provide xhtml(strict)-valid code and use a pure-CSS method to create image rollovers for b2evolution blog buttons. It works with both MSIE and FireFox browsers. Further, this rollover technique can be applied to ANY link, not just b2evolution blog buttons, though this is the focus.

If this is something you might like to add to your site, read on ...

Concept

Unfortunately, MSIE comprises about 65% of the browser universe. It's too bad because it doesn't support the CSS recommended standards as well as some of the other, more modern browsers (notably FireFox). One area MSIE falls short is the support for the ":hover" pseudo-class (i.e. - the style applied to an element when the cursor is hovered over it). MSIE only supports ":hover" for the anchor <a> tags (i.e. - links), while, the current CSS standard allows ":hover" to be applied to nearly anything any tag.

There are tricky ways around MSIE's shortcomings. One can use a JavaScript method by Patrick Griffith used by his Suckerfish drop-down) or by making use of .htc or .hta (MSIE-specific "behavior" files) demonstrated by Peter Nederlof's anything:hover). There are shortcomings with both methods.

My use of non-anchor hover styling is limited. When used, it's applied according to the CSS recommendations. Folks using FireFox get to see it, those using the MSIE don't. I don't believe that it's worth writing browser-specific code, especially when the browser landscape is dynamic.

I am keen on this method, however. It's both pure-CSS & XHTML(strict)-valid. It utilizes the hover capability of the <a> tag, so it supported identically in both FireFox and MSIE.

NOTE: The technique can be applied anywhere you'd like to have an image rollover associated with a link, though the focus here is on a b2evolution blog button.

In short, you wrap an element, in this case an <img> element, inside an existing <a> tag. This will transfer the MSIE-only ":hover" action, allowed by the <a> tag, to that element. We'll be hiding the image in it's normal state, then displaying it upon hover. Fun stuff! But "enuff theory," you say, "let's get going!"

General Case

To apply this concept to a link, you need to add an XHTML-valid image tag to the existing anchor tag. It's straightforward and the final result looks like this:

XHTML Notes: (1) Green highlights indicate areas of the code that you will/might need to change. (2) For positioning purposes, you may want to wrap the anchor tag in a <div>ision, but I'll get into the reasons why, later. (3) Defining the "alt" attribute allows the code to validate, but prevents mouseover bubble text from appearing in MSIE. (For accessibility reasons, you may wish to add an alt description). (4) For the same reason, the "title" attribute was omitted.

The CSS needed will vary somewhat on how you position your image, as the hover style applied to the image (in order to take the image out of the document flow and overlay it upon the document, it must be positioned "absolutely"). The CSS ends up looking something like this:

CSS NOTES: You may be tempted to change the "a img" selector to "display:none;" - DON'T. It won't work. (The image will pop, but will never disappear again). Most of the CSS is dedicated to positioning the image, which can be tricky.

A POSITION ON POSITIONING: There are some rules about absolutely positioning elements. You'll likely experience frustration until you understand them, though it's still no guarantee for avoiding frustration.

• Unless the absolutely positioned image is contained within a positioned element, the positioning reference will be the HTML page (i.e. - "top:0px; left:0px" will put the top-left corner of the image in the top-left corner of the HTML page).
• THIS is why it might be beneficial to wrap the link inside a division. IF you use code of the form below, then you can easily change the point-of-reference to be the upper-left-hand corner of this division, by adding a "position:relative;" to the CSS for that division. (Note: This won't move the division anywhere, it remains within the flow of the document and in its normal position, but NOW puts the image tag into a positioned parent. Bing-batta-boom!)

• Liquid layout designs add another level of complexity. How can you position your image so that it "moves" correctly, as the page expands and contracts? I have no out-of-the box answers, just a couple of tricks that you might be able to employ. HORIZONTAL: First, to 'center' an image, you can use "text-align:center;", as an image is considered to be an inline element. So, your absolute positioning might look like "text-align:center; top:40px;". Further, if the "centering" isn't quite correct, you can shift it left or right by adding "margin-left/right:±XXpx" (or ±XX%). You can try using a "percent" placement on the image position itself, but know that such a number refers BOTH to the page AND the image (i.e. - to center an image within its parent, use left/right:50%, which lines up a point 50% of the way across the parent element (or page) AND 50% of the way across the image).

It takes a while to get control over your positioned image, but keep playing around with it and eventually you'll get what you want.

b2evo Modifications

Obtaining images to pop up when a visitor hovers over a b2evolution blog name requires a bit more work. First, you can't simply insert an image tag into an existing anchor tag because most of these tags are generated using PHP code. Further, if you've enabled 'skin-switching' in your blog, you'll need to modify each of your skin CSS files to position these on-hover images.

Do not despair, it's not that difficult to do. Once you've modified the CSS for one skin, doing the others is relatively simple. (As a test, I added the capability to 3 of the skins that ship with the b2evo install: "custom", "originalb2" and "bluesky").

_BLOGLIST.PHP CHANGES

You'll find the _bloglist.php file you need to modify in the /skins/ directory. There are two places that you need to modify, but the modifications are identical. Locate each of the two lines: "echo $blog_selected_name_before;". Replace the line after this ("blog_list_iteminfo($blog_name_param, 'htmlbody');"), for each of the two occurrences, with the following code:

This code will replace any spaces in the blog name (like "Blog All"), with underscores (making it "Blog_All") and insert the image tag, using this new underscored blog name as the image source. This is necessary because UNIX/Linux doesn't like spaces in the filenames. It's picky that way.

You're done with the _bloglist.php file.

IMAGES

There are a few things to note about the images files:

• They need to be the same size (unless you want to get fancy in the _bloglist.php file and put in a bunch of if statements to change the size and add the height/width paramaters to the image tag). Why bother? Just make them all the same size!
• They need to be put into the img/ folder for whatever skin you are using. (If you're using skin-switching, you'll need images in the img/ folder for every skin you're switching). It seems unecessary and it's possible to change the _bloglist code to specify a single image directory, but putting them each into their own skin folder means that you could have skin-specific images that differ to match the skin!
• What if you don't want an image for each blog button? Good question. You have two choices. (1) IF you don't put a border on your images, in your CSS, then only those images with actual JPG's will show. Those that don't have a JPG will behave as normal (your site will throw a 404 error, because it will be "looking" for a JPG file that it can't find. Your visitors won't see this 404 error, however, and neither will you.) (2) You can construct a 1px-by-1px image for the blog buttons you don't want to have an image. They'll show, but will be so small that no one will notice.

SKIN-SPECIFIC CHANGES

It is a little more difficult to discuss the changes that are required for each skin, because each skin is different. I can only provide a general outline and point you to places you might need to make changes or additions. As I mentioned before, I got it working for the "custom" skin, the "b2original" skin and the "blue sky" skin, without too much difficulty. I would imagine that whatever skin(s) you are using will be similarly easy.

The goal will be to get the final HTML to be of this form:

Crap ... can never work on this stuff ... between the kid waking up from a nap, making dinner, answering email ... YITES!!! More later ...