SLIDE IMAGE HORIZONTALLY
I would like to basically have Y number of images positioned to the left, then when you click the hyperlink, it moves them into view.
Step 1: Insert the following code in the < HEAD > section of your page
window.onload=function()
{
document.getElementById("d2").onclick = slideIt;
};
function slideIt()
{
var slidingDiv = document.getElementById("d1");
var stopPosition = 50;
if (parseInt(slidingDiv.style.left) < stopPosition ) { slidingDiv.style.left = parseInt(slidingDiv.style.left) + 2 + "px"; setTimeout(slideIt, 1); } }
{
document.getElementById("d2").onclick = slideIt;
};
function slideIt()
{
var slidingDiv = document.getElementById("d1");
var stopPosition = 50;
if (parseInt(slidingDiv.style.left) < stopPosition ) { slidingDiv.style.left = parseInt(slidingDiv.style.left) + 2 + "px"; setTimeout(slideIt, 1); } }
Step 2: Insert the below sample code into the < BODY > section of your page:
< a href="#" id="d2">click here to slide the div < /a>
< img src="HTML.png" width="200" height="200" id="d1" style="position:absolute; left:-200px; top:30px" />
< img src="HTML.png" width="200" height="200" id="d1" style="position:absolute; left:-200px; top:30px" />
Comments
Post a Comment