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); } }

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" />

Comments

Popular posts from this blog

Menu With Rounded Corners In CSS

BOXED WIDTH ANIMATION

CSS DROP DOWN MENU