Use an Image as a Button

This tutorial is specific to our newest product, Hudl Sportscode. If you’re on Sportscode v11, use these resources instead or upgrade today.

Using images as but­tons is great way to cus­tomize a code win­dow. There are two ways to import an image into your code window.

  1. Open an exist­ing code win­dow or cre­ate a new one.

  2. Drag and drop the image from its saved loca­tion into the code window.

    The image will default as a code but­ton – you can use the inspec­tor win­dow to change the but­ton type.

  3. If you have an exist­ing but­ton that you’d like to use an image for instead, open the inspec­tor win­dow for that button.

    You can open the inspec­tor win­dow by dou­ble-click­ing the but­ton or sin­gle-click­ing the but­ton and then click­ing the Inspector but­ton in the toolbar.

  4. Click the paint palette icon to enter the Appearance tab.

  5. Double-click the emp­ty gray box.

  6. Select the image and click Open.

    You can also click and drag the image into the gray box.