Animated Effects

Highlight Tutorial

Learn to Alternate Image Highlights

HTML5 Highlight Example Introduction Opacity CSS3 HTML Markup JavaScript Dynamically Assign Opacity Tips Summary Source Code Page

Introduction

This free tutorial explains how to alternate image highlights. Learn a very simple and lightweight method which brightens selected images. This quick method avoids the need to download additional graphics or implement much code.

Apply opacity settings in response to onclick event handlers. Use this technique with HTML tags span, div, img, and list. Let users know they selected a Web page element or game character with interactive opacity highlights, audio, or both. The Free HTML5 Audio Tutorials explain how to implement interactive sound. This tutorial explains how to add interactive highlights.

Opacity

The opacity property of HTML tags span, div, img, and list, controls the amount of background color to show through an element.

opacity property values range between 0.0 and 1.0. A value of 1.0 displays an HTML element with 100% opacity. None of the body color or other HTML elements underneath the specified HTML element, will show through.

An opacity value of 0.0 completely hides the specified HTML element. In other words opacity = 0.0 creates a completely transparent element.

An opacity value of 0.5 causes 50% of the background element to display through the specified HTML element. For example assume the background color equals blue and the specified HTML element's color equals red. Assign an opacity property of 0.5 to the specified HTML element. The HTML element displays violet, or 50% blue and 50% red.

The CSS

The following listing creates a CSS img rule-set with 50% highlighting. The image style floats left and uses 26% of the enclosing element's available width, including a 1% margin.

img.hl {
  
opacity:0.5; 

float:left; 

width:25%; 

margin:1%; 

}
 

The HTML Markup

The HTML5 Highlight Example Web page declares two image elements with the hl style. The first image id equals a. The second image id equals b. The first image displays an a with white background, blue text, and blue outline. The second image displays a b with white background, blue text, and blue outline. However the CSS hl style over a black background, greys out each image by 50%.

Notice each image includes an onclick event listener named setOpacity(). Also when the body of the Web page loads, function loadGame() initializes some features.

 
<body 
onload="loadGame()"
>

...

<img 
 class="hl" 
 id="a" 
 src="assets/a.gif"
 onclick="setOpacity(event)" 
 alt="A in a Square"
/>  
  
<img 
 class="hl"  
 id="b" 
 src="assets/b.gif" 
 onclick="setOpacity(event)" 
 alt="B in a Square"
/>

The JavaScript

Function loadGame() obtains references to both image elements. The image's change opacity when the user clicks.

// Image elements 
// 'a' and 'b'.
var eA, eB = null;

function loadGame(){

// Obtain rerferences
eA = document.getElementById(
 'a'
);

eB = document.getElementById(
 'b'
); 

}

Dynamically Assign Opacity

Event listener setOpacity() responds when the user taps either image. First setOpacity() determines which image was tapped. The following line obtains the value assigned to the image's id attribute.

sSource = ev.target.id.toString();

Assume the user tapped the image with id a. The following listing demonstrates assigning full opacity to image a and half opacity to image b.

// Set image 'a'
// to brightest opacity
// 100%
eA.style.opacity = 1.0;
 
// Set image 'b'
// to 50% opacity.
eB.style.opacity = 0.5;

Function setOpacity()

Function setOpacity() assigns 100% to the opacity property of the selected image and 50% opacity to the unselected image element. The setOpacity() JavaScript onclick event handler follows.

  
function setOpacity(ev){

// Obtain the ID of the 
// element which was just tapped.
sSource = ev.target.id.toString();

if (sSource[0] == 'a'){

// Set eA to the
// brightest opacity.
eA.style.opacity = 1.0;

// Dim the
// other image.
eB.style.opacity = 0.5;
 
}
 
else {
 
// Set eA to the
// brightest opacity.
eB.style.opacity = 1.0;
 
// Set opacity
// to 50%.
eA.style.opacity = 0.5;

}

}

Tips

The HTML5 Highlight Example uses a black background color. Consider reversing the opacity settings when using lighter background colors. For example the initial image opacity would equal 1.0. Selected image opacity would equal 0.5.

Hover

With desktop computers consider applying a highlight when the mouse is over an element. Assign setOpacity() to the onmouseover event.

Consider applying a highlight when dragging an element as well. See Free HTML5 Drag and Drop Tutorials. Learn to drag HTML elements on both desktop and mobile devices. Apply concepts discussed in this tutorial to HTML elements during drag operations.

Summary

This free tutorial explained how to alternate image highlights. This article explained a very simple and lightweight method which brightens selected images. This quick method avoids the need to download additional graphics or implement much code.

Apply opacity settings in response to onclick event handlers. Use this technique with HTML tags span, div, img, and list. Let users know they selected a Web page element or game character with interactive opacity highlights, audio, or both. The Free HTML5 Audio Tutorials explain how to implement interactive sound. This tutorial explained how to add interactive highlights.

See the HTML5 Highlight Source Code for details. See more HTML5 examples.

More HTML5 Examples

Sprite Sheet Animation
Copyright © 2015 Seven Thunder Software. All Rights Reserved.