Feb 5, 2009

The Yucky Parts of Web Development: Mouseovers

In my OPI Tech Talk on Jan 28, 2009 on the Yucky Parts of Web Development, I covered a very simple technique you can use to create mouseover effects for tabular data.

If you want to use the small interaction style mentioned in my talk, or if you just want to add some nice user interaction to your pages, you can use a simple mouse over effect.

As the user moves the mouse over table rows, each row is highlighted and the user sees special links to view the details, edit, or delete the item. (Put in the links or icons that make sense for your application.) These links are invisible until the mouse appears above the row, so it adds a neat effect.

The nice thing is that this is trivial to add.

First, define even and odd row styles for the zebra-striping:


.rowEven {
    background-color : #eeeeff;
    color: #000000;    
}

.rowOdd {
    background-color : #ffffff;
    color: #000000;    
}

Next, add highlighted colors:

.highlight td.rowEven {
    background-color : #ddddaa;
    color: #000000;      
}

.highlight td.rowOdd {
    background-color : #dddd88;
    color: #000000;
}

Note the way these styles are defined means that the parent tag has a class of highlight. That is, the TR, or row, tag will get that style.

Next, you need to define a style for the TD (table cell) tags you want to remain invisible until the mouse is over the row:


td.hiddenRowEven {
    visibility: hidden;   
}

td.hiddenRowOdd {
    visibility: hidden;
}

Next, add highlight styles to make the table cells magically appear:


.highlight td.hiddenRowEven {
    visibility: visible;
    background-color : #ddddaa;
    color: #000000;    
    padding: .3em .3em .6em .3em
}

.highlight td.hiddenRowOdd {
    visibility: visible;
    background-color : #dddd88;
    color: #000000;
    padding: .3em .3em .6em .3em
}

Then, you need a small bit of JavaScript to change the styles:


function changeStyle(element, styleClass) {
    element.className = styleClass;
}

Call this function on the TR tag:

<tr onmouseover="changeStyle(this, 'highlight');"
   onmouseout="changeStyle(this, '');">

Note this is just adding or removing the “highlight” style.

Now, flag the hidden cells with the proper style:

<td class="hiddenRowOdd" >
            <a href="link">Edit</a></td>

You can then see this in action. Move the mouse over the table rows to see the links for modifying the data.

I like this effect because it is so simple, so that it does not require a lot of work, but it looks really good on the page.

-Eric Foster-Johnson

About the Author

Eric Foster-Johnson profile.

Eric Foster-Johnson

Principal Technologist

Eric has decades of industry experience in designing and developing complex enterprise software, including designing and developing Grails and Java EE solutions to tough client problems. He has experience leading development teams, mentoring developers, and helping troublesome projects get back onto a success track. He has lead teams in both traditional and agile settings.

Leave a Reply

Your email address will not be published.

Related Blog Posts
Natively Compiled Java on Google App Engine
Google App Engine is a platform-as-a-service product that is marketed as a way to get your applications into the cloud without necessarily knowing all of the infrastructure bits and pieces to do so. Google App […]
Building Better Data Visualization Experiences: Part 2 of 2
If you don't have a Ph.D. in data science, the raw data might be difficult to comprehend. This is where data visualization comes in.
Unleashing Feature Flags onto Kafka Consumers
Feature flags are a tool to strategically enable or disable functionality at runtime. They are often used to drive different user experiences but can also be useful in real-time data systems. In this post, we’ll […]
A security model for developers
Software security is more important than ever, but developing secure applications is more confusing than ever. TLS, mTLS, RBAC, SAML, OAUTH, OWASP, GDPR, SASL, RSA, JWT, cookie, attack vector, DDoS, firewall, VPN, security groups, exploit, […]