Months ago when working on development for RMI | BET’s video website I needed a way to do image rollovers but I didn’t want to have a reliance on javascript. So, I set out to a create a reusable image rollover solution that was completely CSS based. Basically the concept was to have a universal class that could be called at any time in the HTML to create a rollover image.

Since first creating this code I’ve integrated it as a standard into all of our starting CSS templates.

Here’s how this works:

Start out with a basic anchor tag and give it a class of “hover-box”. Then inside the anchor tag add both images, your original and your hover version. Place the hover image first in the tag, and then add the original one second. Add a class of “hover” to the hover image. It should look like this:

<a href="#" title="Link title..." class="hover-box">
   <img src="rollover-image.jpg" class="hover" alt="Rollover"/>
   <img src="original-image.jpg" class="original" alt="Original"/>
</a>


Now, make sure this CSS is included in your document.

a.hover-box img.original { /* required for IE6 */
    float: left;
    position: relative;
}
a.hover-box img.hover {
    display: none;
}
a.hover-box {
    position: relative;
    float: left;
    display: block;
}
a.hover-box:hover {
    display: block;
    font-size: 100%;
    z-index: 1;
}
a.hover-box:hover img.hover {
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1000;
}

Okay, basically this is hiding the hover image to begin. Then, once the anchor tag is hovered over the image with class “hover” displays itself as block and is positioned absolutely directly on top of the original image. This is accomplished because the hover-box class is set with relative positioning, meaning that the hover image is tied to its boundaries.

Bang! There you have it, a simple CSS hack-free solution that works in: Firefox, Safari, IE 6 & 7, and presumably all other standards compliant browsers. Check it out in action…

P.S. This is especially sweet because the image is preloaded and then hidden, meaning the hover effect is instant for the viewer.

Edit: After some testing I found out my original version wasn’t always working in IE6. It seems that for some reason IE6 needs a class applied to the original image that floats it and positions it relative. I tried every possible way and this is the only thing making it work without a * hack. Not a huge deal though. Also, IE6 requires the original image to come second in the HTML, unlike I originally thought.

For the life of me I can’t figure out why Dice and Monster have been so successful. For job seekers; the process of posting your resume and developing a profile is less then quick and intuitive. For employers like us, the cost of posting an opening and searching their resume database is a bit too much. Alternatives like 37Signals’ Job Board work well for our industry but they don’t offer the geo-targeted resumes which we are looking for.

So why hasn’t Google created a free competitor to Dice and Monster which is subsidized by ad revenue or charges a nominal fee for postings? It seems to fit nicely in their goal of indexing the World’s information; and I would expect it would be very well received by the business community.

In the last few years we’ve had a handful of clients ask us to adopt a performance based payment model. Usually these are start-up companies who are cash strapped and looking for an alternative to paying our service fees. I’m intrigued by the idea of performance based web work however I’ve yet to find a model which I believe is both fair and incentive driven.

I’m still trying to find the right solution. I’m not sure what works best, but I have a pretty good idea of which models I think will tank. Here are a few situations which we’ve been confronted with.

Ecommerce Web Site
The client was offering us a small percentage of overall sales along with a partial reduction in our regular hourly rate. The client was hoping that we would be incentivized by the offer they made us. There are several problems with this model for both sides.

1. What about offline sales, phone calls, emails or faxed orders? We can track the online sales but we have no visibility into the offline orders.
2. How competitive is the product / offering? We have no control over the price of the product or which products are in-stock. We could dedicate plenty of effort building a great system but if the client’s products are overpriced or lack selection then sales revenue won’t materialize.
3. How much is the client willing to pay for marketing? Our agency can do the SEO / SEM work but ultimately SEM and online advertising incur real costs, and not just man-hours.
4. What is the level of marketing they are willing to pay for and who has final say in terms of strategy and creative?
5. Our team could sit back and collect commissions for the client’s sale efforts. That wouldn’t be right, but under this sort of arrangement it could happen. Or vice-versa where the client could get away with doing nothing but filling orders.
6. What is the cap on the number of hours we would commit to each month? If we are spending 80 hours each month and sales commissions only equal $2,200 then our effective rate would be $27.50 / hr. If we agreed on a base hourly rate plus commission then perhaps hours wouldn’t be as important.

Lead Generation Website
In this scenario a client approached us to reduce our rate in favor of a lead generation forumula which incentivized us for creating “qualified leads” in Salesforce.com. To complicate the scenario we would be working with the client and other third parties including an SEO firm, Content Writer, and a PR Agency. The arrangement gave us 4 tiers by which our monthly charges were either reduced or increased based on performance.

We had an existing retainer in place which discounted our hourly rate by 20% for the commitment from the client for a fixed minimum of hours dedicated per month. This proposed program would start us at a reduced rate which is 40% less then what we typically charge. From that, if we perform well enough, we could make 20% back, bringing us to our current retainer rate. On the other hand, if the performance dropped, our hourly rate could go down to 50% of our regular rates. In my mind that is not an incentive, it’s a carrot and stick.

The proposed formula work like this:
Qualified Salesforce.com Leads / Total Unique Visitors = % Conversion

Here are the problems with this formula and the overall scenario.

1. What if the budget for SEM goes up and the third party SEM company starts driving 15% more traffic, but the traffic isn’t qualified? It will dilute the conversion percentage.
2. What is a Qualified Lead? In Salesforce.com we can drive leads but the aspect of qualifying them is arbitrary. Ultimately, that aspect comes down to trust but it sure would be nice to remove arbitrary valuation.
3. The SEO & PR companies are going to have the highest influence of the company’s natural rankings. If these two players hurt or hinder traffic then we suffer as a result.

We counter offered the client a true incentive program which kept our retainer rate at a discount of 20% while suggesting the incentive to reach full rates if we exceeded expectations. If we knocked expectations out of the ballpark, then we would be rewarded with a 10% increase to our regular rates, making work in this client particularly attractive. Unfortunately that suggestion was not accepted.

Does anyone else have similar stories to share? In browsing the web I found these.

GraphicPush: Commission Based Payment for Web Design

Manifest: The First Step in Creating Passive Income

We would like to introduce a new search engine optimization technique which we’ve nicknamed PASEO for Performance Adjusted Search Engine Optimization. The technique uses the external references, the tag-cloud concept and internal search to reinforce content within a site and encourage improved natural search rankings.

How does it work?
By parsing out referring URLs for search terms, PASEO calculates which terms are the most popular for a particular page. The same method is used by all the major search analytic tools. These terms are then listed in order of importance on the destination page. Clicking on any of the terms listed on the page will drive the visitor into an internal site search which helps the user locate relevant content for the end user.

The dynamically ranked PASEO tags help build relevant text links; thereby providing a positive feedback loop for when the search bots come to re-index page content.

Is this Black Hat?
No, it is not. We fully believe that PASEO tagging helps the visitor locate more relevant content, quicker. The technique is akin to tag clouds with the fundamental difference being that tags aren’t assigned by the end-user, rather they are driven by external influences.

Example.
Have a look at the Imulus homepage page tags on the bottom left corner; compare these tags to the page tags on our Solutions page.

Considerations.

• Given that PASEO is analyzing the referral URL it is wise to setup exclusions for terms which you may find undesirable.
• This technique isn’t foolproof and we feel others could expand on the concept by blending PASEO tag rankings with a combination of other Web 2.0 methods to tweak the results to be more relevant.

I know that I’m not the only person that has those days where all your ideas just plain suck. Usually my favorite brainstorming technique for my not-so-creative days is to do rapid brainstorming. The key to this type of brainstorming is to set a goal of 100 ideas in 10 minutes and write down literally everything you can think of. Even if your mind starts to drift and you think about a dog that is outside your window, write it down. This way you free your mind from the normal line of thinking; If you write an idea about a dog, it may lead to a great idea – normally you would discount this thought all together.

One of the reasons this technique is my favorite when my brain is feeling “blah” is that it purges out all of those crappy ideas that keep circulating in my head. Typically if I set a goal of 100 ideas and time is winding down, I scrape to come up with new things I haven’t thought of. This way I’m breaking out of my normal train of thought which is key when thinking creatively.