Moving images

napsternapster · June 15, 2009

Hi every one,

My aim to create an image floating div.the images must move left on click of the left arrow and right on click of right arrow show the next group of images using javscript to do this function

thank you in advance

napsternapster · June 17, 2009

I have done some little bit of coding. The function like the one in www.gumtree.co.za with using flash

<!---------------------------------------------------------------------+\

|

| Written by Grizzly WebMaster

| a division of Bear Consulting Group

|

| Public Domain:

| Redistribution and use of this software is freely permitted.

| This software should be considered as unowned and without

| copyright restrictions, nor should any individual or company

| claim exclussive copyright. This software is provided "as is"

| and without any express or implied warranties, including, without

| limitation, the implied warranties or merchantibility and fitness

| for a particular purpose.

|

| Grizzly WebMaster assumes NO responsibility for the use or

| reliability of software altered by the user.

|

| The information in this document is subject to change without

| notice and should not be construed as a commitment by

| Grizzly WebMaster.

|

\+---------------------------------------------------------------------->

<html>

<head>

<title>Moving Image Example</title>

<!--

#BearPaw

{

margin-right:400px;

position: relative;

visibility: inline;

width:400px;

}

.tab

{

border: groove 1px;

width:600px;

text-align:left;

margin-top:200px;

}

.list

{

list-style:none;

display:inline;

}

.left

{

display:inline;

list-style:none;

margin-top:40px;

float:left;

margin-left:-30px;

}

.right

{

display:inline;

list-style:none;

float:right;

margin-top:-60px;

margin-right:10px;

}

-->

</style>

<!--

var thePaw;

var yPos = 0;

var xPos = 0;

var dSign = 1;

function doFancyBearPaw(path)

{

var path = document.getElementById(path).id;

if ( document.getElementById )

thePaw = document.getElementById("BearPaw");

else if ( document.layers )

thePaw = document.layers["BearPaw"];

else if ( document.all )

thePaw = document.all.item("BearPaw");

if(path == 'leftcheck')

{

hideObj( thePaw );

var now = new Date();

var secs = now.getSeconds() % 6;

doLeftToRight();

}

else if(path == 'rightcheck')

{

hideObj( thePaw );

var now = new Date();

var secs = now.getSeconds() % 6;

doRightToLeft();

}

function doRightToLeft()

{

xPos = 500;

dSign = +1;

moveObjTo( thePaw, xPos, yPos );

showObj( thePaw );

moveHorizRight();

}

function doLeftToRight()

{

xPos = 0;

dSign =1;

moveObjTo( thePaw, (xPos * dSign), yPos );

showObj( thePaw );

moveHorizLeft();

}

function moveObjTo( obj, x, y )

{

if (!obj.style )

{

obj.top = y +"px";

obj.left = x+"px";

}

else

{

obj.style.top = y + "px";

obj.style.left = x + "px";

//obj.style.margin-left = -30+"px";

}

function showObj( obj )

{

if ( ! obj.style )

obj.style.visibility = "hidden";

else

obj.style.visibility = "visible";

}

function hideObj( obj )

{

if (!obj.style )

obj.style.margin.right = -200+"px";

else

obj.style.margin.left = -200+"px";

}

function moveHorizRight()

{

xPos -= 10;

if ( 0 < xPos )

{

moveObjTo( thePaw, (xPos * dSign), yPos );

setTimeout( "moveHorizRight()", 40 );

}

else

{

moveObjTo( thePaw, 0, 0 );

}

function moveHorizLeft()

{

xPos += 10;

if ( 0 < xPos )

{

if(xPos < 500)

{

moveObjTo( thePaw, (xPos * dSign), yPos );

setTimeout( "moveHorizLeft()", 40 );

}

else

{

moveObjTo( thePaw, 0, 0 );

}

//-->

</script>

</head>

<body >

<tr>

<ul>

</div>

<li class="right" ><a href="#" id="rightcheck" onClick="doFancyBearPaw('rightcheck');">Right </a></li>

</ul>

</td>

</tr>

</table>

</div>

</body>

</html>

Anyone who can assist with this problem please do so.

Thank you in advince

Sign In

Moving images

Recommended Posts

napsternapster

Link to comment

Share on other sites

napsternapster

Link to comment

Share on other sites

Archived

Browse

Activity

Important Information