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 hope you liked my approach to creating a learning lifecycle map. I would like to know your thoughts and any suggestions on how we can improve this learning lifecycle map. Thanks for reading.

Wanna do something awesome? Tell a friend:

Subscribe by email
If you're an email kind of person, sign up below to get the latest blog posts in your inbox! You might get some free WordPress goodies from me:-).
I promise not to spam you or share your address.

Client Love

Femy is an absolute joy to work with. She’s very knowledgeable as a front end developer and takes the time to make sure things are right the first time. Her work is very clean and professional and her attitude is great…all the time! She’ll take the time to help you even if she is already booked. Femy is a great asset to SolutionSet.

Jaime Lutz Project Manager, SolutionSet