Combining Text and Images in E-Learning #152

The Brief

This weeks e-learning challenge was to demonstrate how text and images can be used in e-learning. Any number of methods could have been used to demonstrate this including text animations, faded backgrounds, titles incorporated into images and also interactive info-graphics. I decided to create a menu structure that included simple text and button animations with a faded background to enhance the text and icons on the screen.

The Process

I started my development by selecting a background image, I used a free scenic image available from the Articulate Heroes download section. I then set about creating my menu using rotated squares and button icons to make up the different panels. I applied hover states to all of my menu items (except the title in the middle) and used hotspots for each rotated rectangle to trigger these states. Hotspots had to be used as when the mouse left the button the state did not revert back to normal.

hotspot

For the text element a title and description were added for each button that would be initially hidden and then revealed when the mouse was hovered over the corresponding hotspot.

Lastly animations and different entry spots on the timeline were added to add some finishing touches.

timeline

Overall, I thought this challenge was quite nice and simple to accomplish as I have already been working on similar menu styles.

The Result

Click here to view a live demonstration of the completed content.

MainImage.png

Improvements

Unfortunately, there seems to be a fault with the menu hover animations as sometimes the hover state does still not revert back to normal when the mouse leaves the hotpot.

Further research will be needed in order to fix this problem.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s