My html code is:
*****************
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta name="GENERATOR" content="Microsoft FrontPage 6.0" />
<meta name="ProgId" content="FrontPage.Editor.Document" />
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252" />
<title>My Project</title>
<link type="text/css" rel="stylesheet" href="css/style.css" />
<script type="text/javascript" src="js/scroll-image.js"></script>
<script type="text/javascript" src="js/crawler.js"></script>
<!-- [if gte IE 7]><!-->
<link type="text/css" rel="stylesheet" href="css/style-ie6.css" />
<!--<![endif]-->
</head>
<body style="line-height: 150%">
<div>
<div style=" background:#E3E1E2; width: 766px; margin: 0px auto">
<p class="body_text_heading" align=left><br> <br> Sitemap<br> <br> <br> <br> </p>
<div style=" background:#E3E1E2; width: 730px; margin: 0px auto;">
<div class="marquee" id="image_scroll">
<img src="images/site_home.jpg" width="300" height="300" alt="Home" id="1_img" onclick="scrollimage('home');";/>
<img src="images/site_about_us.jpg" width="300" height="300" alt="About Us" id="2_img" onclick="scrollimage('about_us');"/>
<img src="images/site_careers.jpg" width="300" height="300" alt="Careers" id="3_img" onclick="scrollimage('careers');"/>
<img src="images/site_services.jpg" width="300" height="300" alt="Services" id="4_img" onclick="scrollimage('services');"/>
<img src="images/site_contact_us.jpg" width="300" height="300" alt="Contact Us" id="5_img" onclick="scrollimage('contact_us');"/>
</div>
<p class="body_text_heading" align=left><br> <br> <br> </p>
<script type="text/javascript">
marqueeInit({
uniqueid: 'image_scroll',
style: {
'padding': '2px',
'width': '700px',
'height': '300px'
},
inc: 5, //speed - pixel increment for each iteration of this marquee's movement
mouse: 'cursor driven', //mouseover behavior ('pause' 'cursor driven' or false)
direction: 'left', // ('right' or 'left') Direction of marquee. (defaults to 'left' - easiest for reading text marquees)
noAddedSpace: false, // (true or false) Should marquee not have an added space at the beginning to ensure that the first and last elements or sentences do not butt up against each other? (defaults to false (a space will be added) - optimal for text marquees and for image marquees with spaces between the images)
stopped: false, // (true or false) Should marquee start out in stopped mode?, then set 'true'. Useful for some 'cursor driven' marquees. (defaults to false).
// The 3 parameters below are applicable only in mouse: 'cursor driven' marquees
moveatleast: 4, // Minimum speed for 'cursor driven' marquee when mouse is off of it. If not specified and this is a 'cursor driven' marquee, the marquee will stop when moused out. (defaults to no motion onmouseout)
neutral: 150, // Size of neutral area for 'cursor driven' marquee. This is size of the area in the center of the marquee where hovering it will stop it. (defaults to 16)
savedirection: 'true' // (true, false, or 'reverse') Directional behaviour of 'cursor driven' marquee that has a moveatleast property when moused out. Will it remember it's initial direction (true), continue it's current direction (false), or will it reverse ('reverse') its current direction? (defaults to false)
});
</script>
<div id="subScroll">
<div class="marquee" id="image_scroll_sub">
<img src="images/site_knowledge.jpg" width="300" height="300" alt="Knowledge Transfer" id="6_img" onclick="scrollimage('knowledge');";/>
<img src="images/site_business_consultancy.jpg" width="300" height="300" alt="About Us" id="7_img" onclick="scrollimage('business_consultancy');"/>
<img src="images/site_hrd.jpg" width="300" height="300" alt="Careers" id="8_img" onclick="scrollimage('hrd');"/>
<img src="images/site_carbon_credits.jpg" width="300" height="300" alt="Services" id="9_img" onclick="scrollimage('carbon_credits');"/>
<img src="images/site_hedge.jpg" width="300" height="300" alt="Contact Us" id="10_img" onclick="scrollimage('hedge');"/>
</div>
<p class="body_text_heading" align=left><br> <br> <br> </p>
<script type="text/javascript">
marqueeInit({
uniqueid: 'image_scroll_sub',
style: {
'padding': '5px',
'width': '500px',
'height': '300px'
},
inc: 5, //speed - pixel increment for each iteration of this marquee's movement
mouse: 'cursor driven', //mouseover behavior ('pause' 'cursor driven' or false)
direction: 'right', // ('right' or 'left') Direction of marquee. (defaults to 'left' - easiest for reading text marquees)
noAddedSpace: false, // (true or false) Should marquee not have an added space at the beginning to ensure that the first and last elements or sentences do not butt up against each other? (defaults to false (a space will be added) - optimal for text marquees and for image marquees with spaces between the images)
stopped: false, // (true or false) Should marquee start out in stopped mode?, then set 'true'. Useful for some 'cursor driven' marquees. (defaults to false).
// The 3 parameters below are applicable only in mouse: 'cursor driven' marquees
moveatleast: 4, // Minimum speed for 'cursor driven' marquee when mouse is off of it. If not specified and this is a 'cursor driven' marquee, the marquee will stop when moused out. (defaults to no motion onmouseout)
neutral: 150, // Size of neutral area for 'cursor driven' marquee. This is size of the area in the center of the marquee where hovering it will stop it. (defaults to 16)
savedirection: 'true' // (true, false, or 'reverse') Directional behaviour of 'cursor driven' marquee that has a moveatleast property when moused out. Will it remember it's initial direction (true), continue it's current direction (false), or will it reverse ('reverse') its current direction? (defaults to false)
});
</script>
</div>
</div>
</div>
</div>
</body>
</html>
Scrollimage function within scroll-image.js
*******************************************
function scrollimage(getDirection){
initScroll();
if(getDirection=='home')
{
document.getElementById('subScroll').style.display='none';
alert("home");
}
if(getDirection=='about_us')
{
document.getElementById('subScroll').style.display='none';
alert("about_us");
}
if(getDirection=='careers')
{
document.getElementById('subScroll').style.display='none';
alert("careers");
}
if(getDirection=='services')
{
document.getElementById('subScroll').style.position='relative';
document.getElementById('subScroll').style.display='inline';
alert("services");
}
if(getDirection=='contact_us')
{
document.getElementById('subScroll').style.display='none';
alert("contact_us");
}
if(getDirection=='knowledge')
{
document.getElementById('subScroll').style.display='inline';
alert("knowledge");
}
if(getDirection=='business_consultancy')
{
document.getElementById('subScroll').style.display='inline';
alert("business_consultancy");
}
if(getDirection=='hrd')
{
document.getElementById('subScroll').style.display='inline';
alert("hrd");
}
if(getDirection=='carbon_credits')
{
document.getElementById('subScroll').style.display='inline';
alert("carbon_credits");
}
if(getDirection=='hedge')
{
document.getElementById('subScroll').style.display='inline';
alert("hedge");
}
function initScroll()
{
document.getElementById('subScroll').style.display='none';
}
}
Content of div-id(subScroll) in style.css
*****************************************
#subScroll
{
display:none;
}
Unsolved 
