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.
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'));
});
});