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");

}
);

});

I’d love to know to hear from 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.

Thanks for geeking out with me,

Signed By Femy Praseeth

Share it with your people:

Leave a Reply

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

Endorsed by these folks ...

Femy is a very creative web designer. Not only did she provide great results for our company, she was also very fast. I love how she communicated with me every step of the way and the end results were exactly what we wanted.

Quynh Ho CFO, Cereus Corporation