I want to provide sitemap with scrolling of images. I'm handling the method for scrolling image as in "Text and Image Crawler" of Dynamicdrive.com (http://www.dynamicdrive.com/dynamicindex2/crawler/index.htm). I've just changed the images and added a click event for images. The crawler.js is the same as in the "Text and Image Crawler" of Dynamicdrive.com.
In my application thing is for services, there is submenus. When the services image is clicked.. the marque movement should be paused until other than services (home, about_us, careers, contact_us) is clicked and the images of the submenu should get displayed. When other than services is clicked, the display of the submenu images must be in hide condition. IS it possible to do so. If so guide and help me.
Currently, I'd hide the submenu images by setting the property 'display:none;' for the div-id in styles.css. And when clicked i've coded to display the submenu images with javascript. But not working.
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;
}Scrolling of images..