An animated product description donut using jQuery

When I was working for a Marketing agency, our client – Cognitas requested us to build an animated donut to represent the four pillars of their product description model. The idea was to have a hover state when the user moves the mouse over each section of the donut. Clicking on each section will take you to a page with the related product description.

Animated Product description donut using jQuery
Screenshot of the product description donut

Using separate images for the on-off states of the donut, quite a bit of absolute positioning of the images and a dash of jQuery, I created the animated product description donut. The client was happy with the outcome and the donut was displayed on the client’s home page and products page.

Steps to create the animated product description donut.
  • Create three separate images to represent the three hover states of the donut.
  • Create one image to represent the whole donut (with no hover).
  • Create a div with five separate anchor tags to repesent the 5 colored areas on the donut including the center.
  • Use separate css classes to set the different images as background image for the donut.
  • On hover state for each anchor tag, use jquery to add/remove the css class.

The html used to setup the donut.


<div class="box_image_map">
<a class="top" href="http://www.cognitas.com:80/cognitas/products/mobile_device_security_management"></a>
<a class="left" href="http://www.cognitas.com:80/cognitas/products/crosslink"></a>
<a class="right" href="http://www.cognitas.com:80/cognitas/products/pockettoken"></a>
<a class="bottom" href="http://www.cognitas.com:80/cognitas/products/crosslink"></a>
<a class="middle" href="http://www.cognitas.com:80/cognitas/products"></a>
</div>

The css snippet that creates the donut

.box_image {
padding:10px; width:206px;
}
.box_image_map {
padding:10px; width:206px; height:195px;
background-image:url(images/rightcol_products.jpg);
background-repeat:no-repeat;
background-position:0 0;
background-color:transparent;
position:relative;
-webkit-transition: background 0.5s linear;
-moz-transition: background 0.5s linear;
-o-transition: background 0.5s linear;
transition: background 0.5s linear;
}
.box_image_map_crosslink {
padding:10px; width:206px; height:195px;
background-image:url(images/rightcol_crosslink.jpg);
background-repeat:no-repeat;
background-position:0 0;
background-color:transparent;
position:relative;
-webkit-transition: background 0.5s linear;
-moz-transition: background 0.5s linear;
-o-transition: background 0.5s linear;
transition: background 0.5s linear;
}
.box_image_map_mdsm {
padding:10px; width:206px; height:195px;
background-image:url(images/rightcol_msdm.jpg);
background-repeat:no-repeat;
background-position:0 0;
background-color:transparent;
position:relative;
-webkit-transition: background 0.5s linear;
-moz-transition: background 0.5s linear;
-o-transition: background 0.5s linear;
transition: background 0.5s linear;
}
.box_image_map_pockettoken {
padding:10px; width:206px; height:195px;
background-image:url(images/rightcol_pockettoken.jpg);
background-repeat:no-repeat;
background-position:0 0;
background-color:transparent;
position:relative;
-webkit-transition: background 0.5s linear;
-moz-transition: background 0.5s linear;
-o-transition: background 0.5s linear;
transition: background 0.5s linear;
}

.box_image_map .top,
.box_image_map_pockettoken .top,
.box_image_map_crosslink .top,
.box_image_map_mdsm .top
{position:absolute; top:20px; 	right:70px; 	background:transparent; 	width:100px; 	height:30px;}
.box_image_map .bottom,
.box_image_map_pockettoken .bottom,
.box_image_map_crosslink .bottom,
.box_image_map_mdsm .bottom
{position:absolute; top:145px; 	right:70px; 	background:transparent; 	width:100px; 	height:30px;}

.box_image_map .right,
.box_image_map_pockettoken .right,
.box_image_map_crosslink .right,
.box_image_map_mdsm .right
{position:absolute; top:50px; 	right:40px;		background:transparent; 	width:30px; 	height:100px; }
.box_image_map .left,
.box_image_map_pockettoken .left,
.box_image_map_crosslink .left,
.box_image_map_mdsm .left
{position:absolute; top:50px; 	right:170px;	background:transparent; 	width:30px; 	height:100px; }
.box_image_map .middle,
.box_image_map_pockettoken .middle,
.box_image_map_crosslink .middle,
.box_image_map_mdsm .middle
{position:absolute; top:68px; 	right:93px; 	background:transparent; 	width:55px; 	height:55px;}

jQuery code snippet

$(document).ready(function(){
$('a.top').hover(function(){
//Hover on code
var classNameFull = $(this).parent().attr('class');
$(this).parent().data('className', classNameFull)
.removeClass().addClass('box_image_map_mdsm');
},
function(){
//Hover off code
$(this).parent().removeClass("box_image_map_mdsm").attr('class',$(this).parent().data('className'));
});

$('a.left').hover(function(){
//Hover on code
var classNameFull = $(this).parent().attr('class');
$(this).parent().data('className', classNameFull)
.removeClass().addClass('box_image_map_crosslink');
},
function(){
//Hover off code
$(this).parent().removeClass("box_image_map_crosslink").attr('class',$(this).parent().data('className'));
});

$('a.bottom').hover(function(){
//Hover on code
var classNameFull = $(this).parent().attr('class');
$(this).parent().data('className', classNameFull)
.removeClass().addClass('box_image_map_crosslink');
},
function(){
//Hover off code
$(this).parent().removeClass("box_image_map_crosslink").attr('class',$(this).parent().data('className'));
});

$('a.right').hover(function(){
//Hover on code
var classNameFull = $(this).parent().attr('class');
$(this).parent().data('className', classNameFull)
.removeClass().addClass('box_image_map_pockettoken');
},
function(){
//Hover off code
$(this).parent().removeClass("box_image_map_pockettoken").attr('class',$(this).parent().data('className'));
});

$('a.middle').hover(function(){
//Hover on code
var classNameFull = $(this).parent().attr('class');
$(this).parent().data('className', classNameFull)
.removeClass().addClass('box_image_map');
},
function(){
//Hover off code
$(this).parent().removeClass("box_image_map").attr('class',$(this).parent().data('className'));
});

});

Q for you: Did you like this approach to creating a donut? Did you run into any code challenge when you built one out on your web page?
Leave a comment below and let me know.

Leave a Reply

Your email address will not be published. Required fields are marked *

Endorsed by these folks ...

Femy is detail oriented and creative in her approach, and thorough in her execution, of any project. She is a great team player and always willing to stretch herself in any direction that the project needs. It has been wonderful working with Femy!

Alpana Verma-Alag Co-founder and CEO, Upgrademe, Inc