Interactivity

Interactivity in the web world means that when a someone is on your site, their actions create a reaction on your page. Things such as rollovers, "like" buttons, photo sliders, and drop-down menus all fall under this category.

Some other examples of interactivity are adding comments to blog posts, taking part in polls or surveys, interacting directly with someone at a company using “live chat” and contributing to forums on social networks. Interactivity appears to be linked to credibility. If you want people to believe your website, increase the amount of interactivity.

Hover States

The most obvious elements of interactivity is the ability of links to change when you hover over them. Links can be made to show changes in color, underline, weight, and even typeface or background color. These are important clues for the site user that suggest the image or text is a link and the changes that will happen to the page if clicked.

Use this code to establish these type of links

 a ｛ 
 
font-size: 0.9em; 
 
color : #FFFFFF; 
 
margin-top: 5px; 
 
text-align: center; 
 
text-decoration: none; 
 
font-weight: 300; 
 
margin-right: 4px; 
 
} 
 
 

a:visited ｛ 
 
color : #FFFFFF; 
 
font-weight : bold; 
 
} 
 
 

a:hover ｛ 
 
color: #EAEAEA; 
 
text-decoration: underline; 
 
cursor: pointer; 
 
} 
 
 

a:active ｛ 
 
color: #3d9997; 
 
cursor: pointer; 
 
} 
 
 
  And remember it MUST be done in this order… 
 

a 
 
a:visited 
 
a:hover 
 
a:active

CSS Transitions

CSS Transitions are a very handy tool in interactivity. They can be used instead of JavaScript or jQuery.

You can code your CSS to have objects or links change from one state to another smoothly. You can also change the speed at which the transition happens. For example, if I want my link to be white in the normal state and blue in the hover state, I can use a CSS transition to have it go from white to blue in two seconds when someone hovers over that link.

CSS Transitions Details

Allow you to change property values smoothly, from one value to another, over a given duration. Transition properties are as follows...

• TRANSITION - A shorthand property for setting the four transition properties into a single property.
• TRANSITION-DELAY - Specifies a delay (in seconds) for the transition effect.
• TRANSITION-DURATION - Specifies how many seconds or milliseconds a transition effect takes to complete.
• TRANSITION-PROPERTY - Specifies the name of the CSS property the transition effect is for.
• TRANSITION-TIMING-FUNCTION - Specifies the speed curve of the transition effect.

jQuery

Due to online security concerns JQuery is not used much any more. It still serves as an excellent reference. And any JQuery code can be copied, and stored locally in the js folder as a Javascript page — alleviating any security concerns.

jQuery acts like a reference library designed to simplify the client-side scripting of HTML. It is free, open-source software. Web analytics indicate that it is the most widely used JavaScript library by a large margin.

jQuery's syntax is designed to make it easier to navigate a document, select elements, create animations, handle events, and develop applications. jQuery also provides capabilities for developers to create plug-ins on top of the JavaScript library. This enables developers to create abstractions for low-level interaction and animation. The more complicated, in-depth approach to the jQuery library allows the creation of dynamic web pages and applications full of interactivity.

JavaScript

JavaScript is used in web design to implement interactivity. JavaScript is also used in environments that are not Web-based, such as PDF documents, site-specific browsers, and desktop widgets. Newer and faster JavaScript virtual machines and platforms have also increased the popularity of JavaScript for server-side Web applications.

Programmers also use JavaScript in video-game development, in crafting desktop and mobile applications, and in server-side network programming.

Copyright © 2023. J. Blake Johnson. All rights reserved.

Jessica Flikkie

Step 12

Interactivity