In Part 1 of Creating Attention-Grabbing CTA’s you learned how to create animated GIFs in Adobe Photoshop. For Part 2, I wanted to show you how you can make interactive images using JavaScript and Dreamweaver.
The first element in this video uses an expansion JavaScript which I grabbed a while back from Dynamicdrive.com which has a plethora of free and great scripts you can use to create dynamic and interactive web pages.
The second element was created used the rollover setting in Dreamweaver. Both of these interactive elements take just a few minutes to create and are guaranteed to increase the performance of your landing pages.
Click on the following link to download the Interactive Expansion Script that I use in this video.
what if the browsers javascript is disabled?
Hey Trevvy,
Good question. With the way these scripts are set up, if JavaScript is disabled, then the elements won’t work properly. You can use other ways to liven up your CTA by using an animated GIF, for instance.
However, in the event that you want still incorporate these elements into your lander, you can add a message which will appear in the event that a user has JS turned off.
Just add this wherever you would like the message to appear:
Javascript is disabled in your web browser. Click Here for instructions on how to easily enable JavaScript for a better experience!
And in your style sheet just add this to give your message box a “user-friendly” look: .disabled { border: solid 1px #A21111; background: #FFFCDF; } .enabled, .disabled { width: 1000px; padding: 10px; text-align: center; height: auto; font-size: large; margin: 10px 0; }