A learning lifecycle map for Cisco

While working on a Cisco internal website, I got a request to create a Sales Enablement Learning Lifecycle Map – an online resource created by Cisco to assist their clients with becoming more productive, knowledgeable and competent in selling Cisco solutions. The image map has five colored 3D shapes representing the five stages of the learning lifecycle. The idea was to have a hover state when the user moves the mouse over each stage in the lifecycle map. Clicking on each of the images will take you to a page with the related stage’s details.

Learning Lifecycle Map for Cisco
Screenshot of the learning lifecycle map

Using separate images for the on-off states, playing with the opacity of the images, quite a bit of absolute positioning of the images and a dash of jQuery, I created the learning lifecycle map. The client was happy with the outcome and the learning lifecycle map was displayed on Cisco’s business page.

Steps to create a learning lifecycle map.
  • Create five separate png images for the five colored 3d shapes.
  • Create a div with five anchor tags for the five colored shapes + one for the center with the title text for the image map.
  • Use css to position the five colored shapes inside the div.
  • Use css hover states to change the opacity of the colored shapes.
  • Use jquery animate to change the position of the colored shapes and the opacity.

The html used to setup the donut.

<div id="graphic">
<p class="image"><a class="img1 off" href="http://cisco.cvent.com/events/the-sell/custom-20-95a683ee1c5b4f86aff4929040e12de0.aspx" style="opacity: 1; top: 0px;"><span></span></a></p>
<p class="image"><a class="img2 off" href="http://cisco.cvent.com/events/the-sell/custom-19-95a683ee1c5b4f86aff4929040e12de0.aspx" style="opacity: 1;"><span></span></a></p>
<p class="image"><a class="img3 off" href="http://cisco.cvent.com/events/the-sell/custom-18-95a683ee1c5b4f86aff4929040e12de0.aspx" style="opacity: 1;"><span></span></a></p>
<p class="image"><a class="img4 off" href="http://cisco.cvent.com/events/the-sell/custom-17-95a683ee1c5b4f86aff4929040e12de0.aspx" style="opacity: 1;"><span></span></a></p>
<p class="image"><a class="img5 off" href="http://cisco.cvent.com/events/the-sell/custom-21-95a683ee1c5b4f86aff4929040e12de0.aspx" style="opacity: 1; top: 0px;"><span></span></a></p>
<p class="text">Sales Enablement <br>Learning Lifecycle</p>
</div>

The css snippet that creates the donut

#graphic {
width:432px;
height:275px;
position:relative;
margin:20px 0;
}
p.text {
color:#1b4374;
position:absolute;
font: 20.16px Arial, Verdana, sans-serif;
top:139px;
left:141px;
margin:0;
}
p a {
position:absolute;
background-repeat:no-repeat;
text-indent:-999999px;
outline:none;
cursor:pointer;
}
p a span{
display:block;
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF)"; /* IE8 */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF);   /* IE6 & 7 */
zoom: 1;
}
p a.img1{
top:0;
left:0;
width:186px;
height:160px;
}
p a.img1 span{
background-image:url('images/intermediate.png');
width:186px;
height:160px;
}
p a.img2{
top:85px;
left:0;
width:124px;
height:175px;
}
p a.img2 span{
background-image:url('images/foundational.png');
width:124px;
height:175px;
}
p a.img3{
left:115px;
top:194px;
width:225px;
height:81px;
z-index:11;
}
p a.img3 span{
background-image:url('images/on-boarding.png');
width:225px;
height:81px;
}
p a.img4{
top:81px;
right:5px;
width:106px;
height:169px;
z-index:10;
}
p a.img4 span{
background-image:url('images/talent.png');
width:106px;
height:169px;
}
p a.img5{
top:0;
left:209px;
width:193px;
height:152px;
}
p a.img5 span{
background-image:url('images/advanced.png');
width:193px;
height:152px;
}


p a.off{
opacity:1;
}
p a.on{
opacity:0.5;
}

jQuery code snippet

$(document).ready(function() {
$("p.image a").addClass("off");


$("p.image a").hover(
function(){
$("p.image a").not(this).animate({
opacity:0.5
},200, 'linear');
$(this).animate({
opacity:1,
"top": "+=2px",
easing: "easein"
},300, 'linear', "slow");

},
function(){
$("p.image a").animate({
opacity:1
},0);
$(this).animate({
"top": "-=2px"
},300, 'linear', "slow");

}
);

});

Q for you: Did you like this approach to creating a learning lifecycle map? Do you have any suggestions on how you would improve this learning lifecycle map?
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 ...

It was always great to work with Femy on the projects I managed. She was always personable, smiling, and friendly – bright and early every morning! She clearly cares about the quality of her work and the code she writes, as she would seek feedback and review, when possible. If you have the opportunity to work with her, I highly recommend her.

Brian Wilson Senior Web Developer, Solutionset