HOWTO: Generate rollover buttons with Textimage.

With Textimage 2.1 due out shortly I thought I would take the time to writeup a little guide to show an example of one of the many things Textimage can be used for.

This example is not specific to the latest version, however for best results, especially where transparency is concerned, I would suggest using the latest dev build or the latest stable build if you are reading this after 2.1 has been released.

 

Notes:

  • This is written with the assumption that you have Drupal installed and have reasonable knowledge in using it.
  • The settings used in Step 3 and 4 are relative to the image from Step 2, to achieve your own desired results you may have to modify the settings respectively.
  • Drupal 6 with clean-urls enabled was used in writing this, but the whole process should work on Drupal 5 or 7 with minor modifications depending on your own configuration.

 

Step 1 - Install and setup Textimage

Note: If you already have Textimage installed and setup on your website, proceed to Step 2.

  1. Download Textimage from the project site: drupal.org/project/textimage.
  2. Extract the contents to your modules directory (ie. /path/to/drupal/sites/all/modules/).
  3. Place at least one font into the 'fonts' directory of Textimage (ie. /path/to/drupal/sites/all/modules/textimage/fonts/).
  4. Enable Textimage on the Modules page (ie. http://www.yoursite.com/admin/build/modules).
  5. Check the Textimage Settings page (ie. http://www.yoursite.com/admin/settings/textimage/settings) to confirm that it is configured correctly and has detected your font(s).
  6. If all went well you should see something similar to the image below at the top of the page.

    Textimage settings

 

Step 2 - Setup your background image.

  1. Create an image with both inactive and active states for use as the button background.

    Button Background

  2. Place the image in the Textimage 'backgrounds' folder (ie. /path/to/drupal/sites/all/modules/textimage/backgrounds/).

 

Step 3 - Create your Presets

  1. Create a new preset (http://www.yoursite.com/admin/settings/textimage/preset/new) with the following settings:

    Name: button_active
    Description: Active state for rollover button.

    Font: Arial Bold
    Font Size: 10
    Text Color: #000000
    Maximum width: 125
    Fixed width: [checked]
    Text Align: Center
    Text Rotation: 0
    Convert to case: Default
    Outline Width: [empty]
    Outline Color: [empty]
    Text Margin Top: 0
    Text Margin Right: 0
    Text Margin Bottom: 0
    Text Margin Left: 0

    Background Color: [empty]
    Background Type: [your background image] (ie. sites/all/modules/textimage/backgrounds/button_bg.png)
    Text X-Offset: 0
    Text Y-Offset: 32

  2. Create another new preset with the following settings:

    Name: button
    Description: Inactive state for rollover button.

    Font: Arial Bold
    Font Size: 10
    Text Color: #666666
    Maximum width: 125
    Fixed width: [checked]
    Text Align: Center
    Text Rotation: 0
    Convert to case: Default
    Outline Width: [empty]
    Outline Color: [empty]
    Text Margin Top: 0
    Text Margin Right: 0
    Text Margin Bottom: 0
    Text Margin Left: 0

    Background Color: [empty]
    Background Type: button
    Text X-Offset: 0
    Text Y-Offset: 7

  3. If everything is setup correctly you should see an image similar to the one below by invoking the Textimage (ie. http://www.yoursite.com/sites/www.deciphered.net/files/textimage/button/...).

    Download Button

 

Step 4 - HTML and CSS

  1. Insert the following HTML & CSS into a node, making sure you have Full HTML selected for the Input format:

    <style>
    #button
    {
      background-image: url('/sites/www.deciphered.net/files/textimage/button/Download/Download.png');
      background-repeat: no-repeat;
      display: block;
      height: 25px;
      width: 125px;
    }

    #button:hover
    {
      background-position: 0 -25px;
    }
    </style>
    <a href="#" id="button"></a>

  2. Once you have saved the node you should see a rollover button similar to the one below.

 

While the implementation of the rollover button was done manually in this example, with a little advanced knowledge of Drupal Themeing you could easily automate this process so that menu items become rollover buttons/images. The upsides of doing so is that whenever you change the title of a menu item, or create a new menu item, a new image will be automatically generated for you.

That's just awesome. I've always been a big fan of the textimage module and I wasn't aware something like this was possible. Thanks a lot!

Wim Mostrey (not verified) on 12 February 2009 - 6:29pm

A very clear howto, thanks.

But the main question keeps unasked: why would you wnat imagebuttons? There really is no good argument for them and many good arguments against them. Therefore my main advice: try to avoid needing imagebuttons in the first place :)

Bèr Kessels (not verified) on 16 February 2009 - 12:14am

Bèr,

I think the question you are using is a good question, and I know I would not use these particular buttons myself as I would achieve the same effect using CSS. However, the concept is what I was trying to get across, the use of Textimage.

In a redesign of this website I'm going for a typographical style which uses Textimage headers in a lot of places, and in various styles and angles. The primary site links use the concept demonstrated in this guide, but minus the background. While this effect could also be replicated with CSS and plain text, the effect would not be nearly as clean. And again, while I could use one of the many Canvas TrueType font tricks, I don't like relying on something that can be disabled or not work properly in certain browsers.

So while you're advice has merit, it missed the true point I was making.

Cheers,
Decipher.

Decipher on 16 February 2009 - 6:32am

Using images to replace headers makes a lot of sense. There are many cases and places where that actually makes a good choice. Your module is of great help in such cases!

However, *buttons* are the culprit.
Buttons should be safe[1], simple and above all regognisable. People know the buttons from their OS. They recognise their behaviour, regognise the fact that it is a button and so forth. Usability will always decrease when you move away from widgets and behviours that people are already used to. Imagine that every of the X Billion sites had its own way and design in buttons.
So, even CSS will not suffice. The problem is changing the look and feel of a very well known widget in the first place.

[1] e.g. see http://en.wikipedia.org/wiki/Clickjacking

Anonymous (not verified) on 22 February 2009 - 2:12am

Anonymous,

It's difficult to come up with a civil response to your comment, so I will keep it brief: If you can't take anything from this concept, don't try to prevent others from doing so.

Cheers,
Decipher.

Decipher on 22 February 2009 - 8:43am

How would I automate this process so that menu items become rollover buttons/images? I'd love to read that tutorial.

Nice work!

Matt

Matt (not verified) on 20 February 2009 - 7:03am

Hi Matt,

I do fully intend to put a tutorial together focusing on menu items, as it is something that I am doing on the upgraded theme for this site (which is still in development).

While I won't get to specific in here, you basically need a THEME_links() override in your themes template.php file that intercepts the links and runs theme('textimage_image') over them. At least that is how I did it for the primary links.

It will most likely be my next tutorial, so keep your eyes on the site.

Cheers,
Decipher.

Decipher on 21 February 2009 - 9:46am

Greatly written indeed… I really enjoyed your article and found it to be very informative, keep up the good work, I’ll be coming back to read any of your future articles..
Thank you

Wesley Gibson (not verified) on 2 March 2009 - 7:29pm
© 2007 - 2010 deciphered.net. All rights Reserved.