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.
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 &amp;amp;amp;amp;amp; 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");
}
);
});