Jump to content

Moving images

napsternapster

By napsternapster
in Javascript Help

 Share

Recommended Posts

napsternapster Member

napsternapster

Posted
  • Author
Posted

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

 

<!-- BEGIN HIDE -->

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

|

|   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.

|

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

<!-- END HIDE -->

<html>

 

<head>

<title>Moving Image Example</title>

<!-- BEGIN HIDE -->

<meta name="ROBOTS" content="noindex">

<meta name="GENERATOR" content="Microsoft FrontPage 4.0">

<meta name="ProgId" content="FrontPage.Editor.Document">

<!-- END HIDE -->

<style type="text/css">

<!--

#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>

<script language="JavaScript">

<!--

 

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 >

 

<div align="left">

 

<table  align="center">

<tr>

<td class="tab">

 

<ul>

<li class="left"><a href="#" id="leftcheck" onClick="doFancyBearPaw('leftcheck');">Left </a> </li>

<div id="BearPaw" name="BearPaw" border="5px" >

  <img src="images.jpg"  border="1px" width="80" height="100">

  <img src="images.jpg"  border="1px" width="80" height="100">

  <img src="images.jpg"  border="1px" width="80" height="100">

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

Link to comment
Share on other sites
This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
Go to topic listing
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.