Pace the code in html page and upload in to a page library and show it in page viewer webpart
<html>
<head>
<style type="text/css">
<!--
criteriaResp {
margin-bottom: 10px;
margin-top: 0px;
margin-right: 0px;
margin-left: 0px;
}
.hoverTextResp {
border: thin solid #999999;
font-family: Calibri;
width: 555px;
padding-top: 5px;
padding-right: 5px;
padding-bottom: 0px;
padding-left: 5px;
}
-->
</style>
<script language="javascript">
var k;
function showHideResp(k)
{
if(k=='one'){
document.getElementById('oneTextResp').style.display='';
document.getElementById('twoTextResp').style.display='none';
document.getElementById('threeTextResp').style.display='none';
}
if(k=='two'){
document.getElementById('oneTextResp').style.display='none';
document.getElementById('twoTextResp').style.display='';
document.getElementById('threeTextResp').style.display='none';
}
if(k=='three'){
document.getElementById('oneTextResp').style.display='none';
document.getElementById('twoTextResp').style.display='none';
document.getElementById('threeTextResp').style.display='';
}
}
</script>
</head>
<body >
<table >
<tr>
<td>
<table>
<tr>
<td>
<A id="one" href="#" onmouseover="showHideResp('one')">
<img
src="https://km.ca.com/rnd/MyTeams/buops/lodcommunity/PublishingImages/challengeBox.JPG" ></A>
</td>
<td>
<div id="oneTextResp" style="display:none; text-align:left" class="hoverTextResp">
<img
src="https://km.ca.com/rnd/MyTeams/buops/lodcommunity/PublishingImages/challengeArrow.JPG" ></div>
</td>
</tr>
<tr>
<td>
<A id="two" href="#" onmouseover="showHideResp('two')">
<img
src="https://km.ca.com/rnd/MyTeams/buops/lodcommunity/PublishingImages/ResponseBox.JPG" ></A>
</td>
<td>
<div id="twoTextResp" style="display:none; text-align:left" class="hoverTextResp">
<img
src="https://km.ca.com/rnd/MyTeams/buops/lodcommunity/PublishingImages/ResponseArrow.JPG" ></div>
</td>
</tr>
<tr>
<td>
<A id="three" href="#" onmouseover="showHideResp('three')">
<img
src="https://km.ca.com/rnd/MyTeams/buops/lodcommunity/PublishingImages/ResultBox.JPG" >
</A>
</td>
<td>
<div id="threeTextResp" style="display:none; text-align:left" class="hoverTextResp">
<img
src="https://km.ca.com/rnd/MyTeams/buops/lodcommunity/PublishingImages/ResultArrow.JPG" >
</div>
</td>
</tr>
</table>
</td>
<td>
<img
src="https://km.ca.com/rnd/MyTeams/buops/lodcommunity/PublishingImages/greyBox.JPG" >
</td>
<tr>
</table>
</body>
<html>
<head>
<style type="text/css">
<!--
criteriaResp {
margin-bottom: 10px;
margin-top: 0px;
margin-right: 0px;
margin-left: 0px;
}
.hoverTextResp {
border: thin solid #999999;
font-family: Calibri;
width: 555px;
padding-top: 5px;
padding-right: 5px;
padding-bottom: 0px;
padding-left: 5px;
}
-->
</style>
<script language="javascript">
var k;
function showHideResp(k)
{
if(k=='one'){
document.getElementById('oneTextResp').style.display='';
document.getElementById('twoTextResp').style.display='none';
document.getElementById('threeTextResp').style.display='none';
}
if(k=='two'){
document.getElementById('oneTextResp').style.display='none';
document.getElementById('twoTextResp').style.display='';
document.getElementById('threeTextResp').style.display='none';
}
if(k=='three'){
document.getElementById('oneTextResp').style.display='none';
document.getElementById('twoTextResp').style.display='none';
document.getElementById('threeTextResp').style.display='';
}
}
</script>
</head>
<body >
<table >
<tr>
<td>
<table>
<tr>
<td>
<A id="one" href="#" onmouseover="showHideResp('one')">
<img
src="https://km.ca.com/rnd/MyTeams/buops/lodcommunity/PublishingImages/challengeBox.JPG" ></A>
</td>
<td>
<div id="oneTextResp" style="display:none; text-align:left" class="hoverTextResp">
<img
src="https://km.ca.com/rnd/MyTeams/buops/lodcommunity/PublishingImages/challengeArrow.JPG" ></div>
</td>
</tr>
<tr>
<td>
<A id="two" href="#" onmouseover="showHideResp('two')">
<img
src="https://km.ca.com/rnd/MyTeams/buops/lodcommunity/PublishingImages/ResponseBox.JPG" ></A>
</td>
<td>
<div id="twoTextResp" style="display:none; text-align:left" class="hoverTextResp">
<img
src="https://km.ca.com/rnd/MyTeams/buops/lodcommunity/PublishingImages/ResponseArrow.JPG" ></div>
</td>
</tr>
<tr>
<td>
<A id="three" href="#" onmouseover="showHideResp('three')">
<img
src="https://km.ca.com/rnd/MyTeams/buops/lodcommunity/PublishingImages/ResultBox.JPG" >
</A>
</td>
<td>
<div id="threeTextResp" style="display:none; text-align:left" class="hoverTextResp">
<img
src="https://km.ca.com/rnd/MyTeams/buops/lodcommunity/PublishingImages/ResultArrow.JPG" >
</div>
</td>
</tr>
</table>
</td>
<td>
<img
src="https://km.ca.com/rnd/MyTeams/buops/lodcommunity/PublishingImages/greyBox.JPG" >
</td>
<tr>
</table>
</body>
