Scrolling Image : Image Img « HTML « JavaScript DHTML

Home
JavaScript DHTML
1.Ajax Layer
2.Data Type
3.Date Time
4.Development
5.Document
6.Dojo toolkit
7.Event
8.Event onMethod
9.Ext JS
10.Form Control
11.GUI Components
12.HTML
13.Javascript Collections
14.Javascript Objects
15.Javascript Properties
16.jQuery
17.Language Basics
18.Mochkit
19.Mootools
20.Node Operation
21.Object Oriented
22.Page Components
23.Rico
24.Scriptaculous
25.Security
26.SmartClient
27.Style Layout
28.Table
29.Utilities
30.Window Browser
31.YUI Library
JavaScript DHTML » HTML » Image Img 




Scrolling Image
  
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Scrolling Image</title>
<style type="text/css">
.link{font-family:verdana,arial,helvetica; font-size:8pt; color:#DD0000; font-weight:normal}
.link:hover{font-family:verdana,arial,helvetica; font-size:8pt; color:#FF9900; font-weight:normal}
.prem_hint{font-family:verdana,arial,helvetica; font-size:8pt; color:#000000; font-weight:normal}
.header{font-family:arial,verdana,helvetica; font-size:30pt; color:#FF9900; font-weight:bold}
</style>
</head>
<body bgcolor="#FFFFFF">
<center>
<span class="header">Scrolling Image</span>
<br>
</center>

<!--BEGIN REQUIRED-->
<script language="javascript">
// Location of this script:
// http://www.qiksearch.com/javascripts/scrolling_image.htm
//*********************************************
//* Scrolling Image                           *
//* Created 20/04/02                          *
//* Scrolls an image in both directions       *
//* (c) Premshree Pillai,                     *
//* http://www.qiksearch.com/                 *
//* E-mail : premshree@hotmail.com            *
//* Use the script freely as long as this     *
//* message is intact                         *
//*********************************************

window.onerror = null;
 var bName = navigator.appName;
 var bVer = parseInt(navigator.appVersion);
 var NS4 = (bName == "Netscape" && bVer >= 4);
 var IE4 = (bName == "Microsoft Internet Explorer" && bVer >= 4);
 var NS3 = (bName == "Netscape" && bVer < 4);
 var IE3 = (bName == "Microsoft Internet Explorer" && bVer < 4);

//------------------C U S T O M I S E------------------------

 var img_path="http://www.java2s.com/style/logo.png";
 var time_length =50//Scroll delay in milliseconds
 var begin_pos = 265//Start position of scroll hint

//-----------------------------------------------------------

var i=begin_pos;
var j=i; 
var scroll_length = 350//The scroll length
var original_time=time_length;

if (NS4 || IE4) {
 if (navigator.appName == "Netscape") {
 layerStyleRef="layer.";
 layerRef="document.layers";
 styleSwitch="";
 }else{
 layerStyleRef="layer.style.";
 layerRef="document.all";
 styleSwitch=".style";
 }
}

//SCROLL RIGHT
function scroll_right(layerName)
{
 if (NS4 || IE4)
 
   if(i<(begin_pos+scroll_length))
   {
    eval(layerRef+'["'+layerName+'"]'+
    styleSwitch+'.visibility="visible"');
    eval(layerRef+'["'+layerName+'"]'+ styleSwitch+'.left="'+(i)+'"');
    i++;
    j++;
   }
  if(i==j)
  {
   setTimeout("scroll_right('"+layerName+"')",time_length);
  }
 }
}

//SCROLL LEFT
function scroll_left(layerName)
{
 if (NS4 || IE4)
 {
   if(i>(begin_pos-scroll_length))
   {
    eval(layerRef+'["'+layerName+'"]'+
    styleSwitch+'.visibility="visible"');
    eval(layerRef+'["'+layerName+'"]'+ styleSwitch+'.left="'+(i)+'"');
    i--;
    j--;
   }
  if(i==j)
  {
   setTimeout("scroll_left('"+layerName+"')",time_length);
  }
 }
}

function scroll_out()
{
 time_length=10000000000000;
}

function reset()

 time_length=original_time;
}

document.write('<div id="prem_hint" style="position:relative; left:' + begin_pos + '" class="prem_hint"><img src="' + img_path + '"><br><font size="-1"><b>You can even scroll a Text<br><font color="#003399">You can scroll multiple lines.</font></b></font></div><center><a href="#" class="link" onmouseover="javascript:reset(); scroll_left(&#39;prem_hint&#39;);" onmouseout="javascript:scroll_out();"><b><< Scroll Left</b></a> <b>|</b> <a href="#" class="link" onmouseover="javascript:reset(); scroll_right(&#39;prem_hint&#39;);" onmouseout="javascript:scroll_out();"><b>Scroll Right >></b></a></center>');

</script>
<!--END REQUIRED-->

<br>

<table align="center" width="400"><tr><td>
<font face="verdana,arial,helvetica" size="-1" color="#000000">
Using this script you can scroll an image in the "left" or "right" direction.
<br><br>To use this  Javascript,view the source of this document. Copy the &lt;script&gt; section
and place it wherever you want it in your page.
<br><br>
<font face="courier">img_path</font> : The image path ("qiksearch.gif" here)<br>
<font face="courier">time_length</font> : Speed of scroll (50 here, meaning after 50 milliseconds the hint will change position by pixel i.e a speed of 20 pixels/second)<br>
<font face="courier">begin_pos</font> : Beginning position of your scrollable content. (265 here)
</font>
</td></tr></table>
<br>
<center><a href="mailto:premshree@hotmail.com" class="link">&#169 2002 Premshree Pillai. All rights reserved.</a></center>
<br>
<center><a href="http://www.qiksearch.com/javascripts/scrolling_image.htm"><font face="arial,verdana,helvetica" size="-2" color="#CCCCCC">http://www.qiksearch.com/javascripts/scrolling_image.htm</font></a></center>
</body>
</html>

           
         
    
  














Related examples in the same category
1.Get the file name specified in the href or src property
2.Image dynsrc
3.Low resolution Image src
4.Image Long Description
5.Image width Example
6.Does image download completely
7.Alternative Information Example
8.Image align Example
9.Image 'src' Property
10.'height' Example
11.'readyState' Example
12.'galleryImg' Example
13.Monitors the load process and the display of pictures
14.Image Animation
15.Image array
16.Replace image
17.An animating image
18.Mouse in image and out
19.Change the height of an image
20.Change image
21.Change image width
22.Count images in a document
23.Image Event Handling
24.Methods and Properties of the Image Object
25.Testing an Image's align Property
26.A Scripted Image Object and Rotating Images
27.Scripting image.complete
28.Changing Between Still and Motion Images
29.Simple Image Replacement
30.Image Error Finder
31.Image element
32.Image Roller Machine
33.Change image in mouse in and out event
34.Use array to store the image names
35.Img onmouseover and onmouseout actions
36.Change vspace for image
37.Change image src
38.Set image height
39.Set image alt message
40.Change image align
41.Change image title
java2s.com  | Contact Us | Privacy Policy
Copyright 2009 - 12 Demo Source and Support. All rights reserved.
All other trademarks are property of their respective owners.