Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 10 of 10
  1. #1
    New Coder
    Join Date
    Jul 2012
    Posts
    49
    Thanks
    17
    Thanked 1 Time in 1 Post

    Position Image on Mouse Hover

    I've been trying to display zoomed images when I hover the mouse. I'm getting the zoomed effect and all, but my issue is positioning the zoomed image. I know it can be done with jquery, we need this done using javascript.

    Here's the code. Any feedback will be greatly appreciated.

    <!DOCTYPE html>
    <html>
    <head>
    <script type="text/javascript">

    var startTime = 0;
    var CurrentStatus = "normal";
    var CurrentTimeOut = 0;

    function mouseoverNormal(element, id) {
    CurrentStatus = "TryBig";
    CurrentTimeOut = setTimeout(bigImg(element, id), 500);
    }

    function mouseoutNormal() {
    CurrentStatus = "normal";

    if (CurrentTimeOut != 0) {
    clearTimeout(CurrentTimeOut);
    CurrentTimeOut = 0;
    }
    }

    function bigImg(element, id) {

    if (CurrentStatus == "TryBig") {
    CurrentStatus = "Big";

    document.getElementById("rg_h").style.visibility = "visible";
    document.getElementById("img6").src = element;


    clickX = window.event.x - document.getElementById("rg_h").offsetLeft;
    clickY = window.event.y - document.getElementById("rg_h").offsetTop;


    document.getElementById("rg_h").style.position = "absolute";
    document.getElementById("rg_h").style.left = clickX;
    document.getElementById("rg_h").style.top = clickY + "px";


    document.getElementById(element).style.visibility = "hidden";
    CurrentTimeOut = 0;
    clickX = 0;
    clickY = 0;
    }
    }


    function normalImg() {
    CurrentStatus = "normal";
    document.getElementById("rg_h").style.visibility = "hidden";
    document.getElementById(element).style.visibility = "visible";
    }

    </script>
    </head>

    <body>
    <div style="width: 300px; height: 100%;">
    <div id="normal" style="float: left; width: 120px;">
    <img id="img1" onmouseover="mouseoverNormal(this.src,this.id)" onmouseout="mouseoutNormal()" border="0" src="http://www.w3schools.com/images/html5_badge_128.gif"
    alt="Smiley1" width="100" height="80" />
    </div>
    <div id="normal2" style="float: left; width: 120px;">
    <img id="img2" onmouseover="mouseoverNormal(this.src,this.id)" onmouseout="mouseoutNormal()" border="0" src="http://www.w3schools.com/images/colormap_80.gif"
    alt="Smiley2" width="100" height="80" />
    </div>

    <div id="normal3" style="float: left; width: 120px;">
    <img id="img3" onmouseover="mouseoverNormal(this.src,this.id)" onmouseout="mouseoutNormal()" border="0" src="http://www.w3schools.com/images/w3html.gif"
    alt="Smiley3" width="100" height="80" />
    </div>
    <div style="float: left; width: 120px;">
    <img id="img4" onmouseover="mouseoverNormal(this.src,this.id)" onmouseout="mouseoutNormal()" border="0" src="http://www.w3schools.com/images/w3schoolscom_gray.gif"
    alt="Smiley4" width="100" height="80" />
    </div>


    <div style="float: left; width: 120px;">
    <img id="img5" onmouseover="mouseoverNormal(this.src,this.id)" onmouseout="mouseoutNormal()" border="0" src="http://www.w3schools.com/images/w3cert.gif"
    alt="Smiley5" width="100" height="80" />
    </div>
    <div id="rg_h" data-initialized="1" style="background: none repeat scroll 0 0 #FFFFFF;
    border: 1px solid #CCCCCC; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2); left: 0;
    position: absolute; top: 0; visibility: hidden; width: 250px;height:160px;"
    onmouseout="normalImg()">
    <div id="rg_hc" class="rg_hc uh_hc" style="height: 100%; width: 100%;">
    <div style="position: absolute">
    <img id="img6" border="0" src="#"
    alt="Smiley" width="250" height="160" />
    </div>
    </div>
    </div>
    </div>
    </body>
    </html>

  • #2
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,518
    Thanks
    3
    Thanked 506 Times in 493 Posts
    not sure where the big image is to be positioned or what half the HTML is for

    but

    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <script type="text/javascript">
    
    var startTime = 0;
    var CurrentStatus = "normal";
    var CurrentTimeOut;
    var element;
    
    function mouseoverNormal(src,img) {
     CurrentStatus = "TryBig";
     CurrentTimeOut = setTimeout(function(){ bigImg(src,img); }, 500);
    }
    
    function mouseoutNormal() {
     CurrentStatus = "normal";
     clearTimeout(CurrentTimeOut);
    }
    
    function bigImg(src, img) {
     if (CurrentStatus == "TryBig") {
      var big=document.getElementById("img6"),p=pos(img);
      CurrentStatus = "Big";
      document.getElementById("rg_h").style.visibility = "visible";
      big.src = src;
      document.getElementById("rg_h").style.position = "absolute";
      document.getElementById("rg_h").style.left = p[0]+(img.width-big.width)/2+'px';
      document.getElementById("rg_h").style.top = p[1]+(img.height-big.height)/2 + "px";
      img.style.visibility = "hidden";
      element=img;
      clearTimeout(CurrentTimeOut);
     }
    }
    
     function pos(obj){
      var rtn=[0,0];
      while(obj){
       rtn[0]+=obj.offsetLeft;
       rtn[1]+=obj.offsetTop;
       obj=obj.offsetParent;
      }
      return rtn;
     }
    
    
    function normalImg() {
     if (element){
      CurrentStatus = "normal";
      document.getElementById("rg_h").style.visibility = "hidden";
      element.style.visibility = "visible";
     }
    }
    
    </script>
    </head>
    
    <body>
    <div style="width: 300px; height: 100%;">
    <div id="normal" style="float: left; width: 120px;">
    <img id="img1" onmouseover="mouseoverNormal(this.src,this)" onmouseout="mouseoutNormal()" border="0" src="http://www.w3schools.com/images/html5_badge_128.gif"
    alt="Smiley1" width="100" height="80" />
    </div>
    <div id="normal2" style="float: left; width: 120px;">
    <img id="img2" onmouseover="mouseoverNormal(this.src,this)" onmouseout="mouseoutNormal()" border="0" src="http://www.w3schools.com/images/colormap_80.gif"
    alt="Smiley2" width="100" height="80" />
    </div>
    
    <div id="normal3" style="float: left; width: 120px;">
    <img id="img3" onmouseover="mouseoverNormal(this.src,this)" onmouseout="mouseoutNormal()" border="0" src="http://www.w3schools.com/images/w3html.gif"
    alt="Smiley3" width="100" height="80" />
    </div>
    <div style="float: left; width: 120px;">
    <img id="img4" onmouseover="mouseoverNormal(this.src,this)" onmouseout="mouseoutNormal()" border="0" src="http://www.w3schools.com/images/w3schoolscom_gray.gif"
    alt="Smiley4" width="100" height="80" />
    </div>
    
    
    <div style="float: left; width: 120px;">
    <img id="img5" onmouseover="mouseoverNormal(this.src,this)" onmouseout="mouseoutNormal()" border="0" src="http://www.w3schools.com/images/w3cert.gif"
    alt="Smiley5" width="100" height="80" />
    </div>
    
    <div id="rg_h" data-initialized="1" style="background: none repeat scroll 0 0 #FFFFFF;border: 1px solid #CCCCCC; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2); left: 0;position: absolute; top: 0; visibility: hidden; width: 250px;height:160px;" onmouseout="normalImg()">
     <div id="rg_hc" class="rg_hc uh_hc" style="height: 100%; width: 100%;">
      <div style="position: absolute">
       <img id="img6" border="0" src="#" alt="Smiley" width="250" height="160" />
      </div>
     </div>
    </div>
    
    </body>
    </html>
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/

  • Users who have thanked vwphillips for this post:

    lesponce (07-24-2012)

  • #3
    New Coder
    Join Date
    Jul 2012
    Posts
    49
    Thanks
    17
    Thanked 1 Time in 1 Post
    Excellent! That worked! Thanks so much for your help.

    God bless you!

  • #4
    New Coder
    Join Date
    Jul 2012
    Posts
    49
    Thanks
    17
    Thanked 1 Time in 1 Post
    using the same sample, how can I click on the zoomed image using href and be able to use the onclick event? Somehow, I need to be able to inherit the onclick in the javascript function bigImg.


    <div id="normal" style="float: left; width: 120px;">
    <a href="javascript:;" onclick='MyEvent(blah, blah);">
    <img id="img1" onmouseover="mouseoverNormal(this.src,this)" onmouseout="mouseoutNormal()" border="0" src="http://www.w3schools.com/images/html5_badge_128.gif"
    alt="Smiley1" width="100" height="80" /></a>
    </div>

  • #5
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,518
    Thanks
    3
    Thanked 506 Times in 493 Posts
    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <script type="text/javascript">
    
    var startTime = 0;
    var CurrentStatus = "normal";
    var CurrentTimeOut;
    var element;
    
    function mouseoverNormal(src,img) {
     CurrentStatus = "TryBig";
     CurrentTimeOut = setTimeout(function(){ bigImg(src,img); }, 500);
    }
    
    function mouseoutNormal() {
     CurrentStatus = "normal";
     clearTimeout(CurrentTimeOut);
    }
    
    function bigImg(src, img) {
     if (CurrentStatus == "TryBig") {
      var big=document.getElementById("img6"),a=big.parentNode,p=pos(img);
      CurrentStatus = "Big";
      a.removeAttribute('href');
      document.getElementById("rg_h").style.visibility = "visible";
      big.src = src;
      if (img.parentNode.href){
       a.href=img.parentNode.href;
      }
      document.getElementById("rg_h").style.position = "absolute";
      document.getElementById("rg_h").style.left = p[0]+(img.width-big.width)/2+'px';
      document.getElementById("rg_h").style.top = p[1]+(img.height-big.height)/2 + "px";
      img.style.visibility = "hidden";
      element=img;
      clearTimeout(CurrentTimeOut);
     }
    }
    
     function pos(obj){
      var rtn=[0,0];
      while(obj){
       rtn[0]+=obj.offsetLeft;
       rtn[1]+=obj.offsetTop;
       obj=obj.offsetParent;
      }
      return rtn;
     }
    
    
    function normalImg() {
     if (element){
      CurrentStatus = "normal";
      document.getElementById("rg_h").style.visibility = "hidden";
      element.style.visibility = "visible";
     }
    }
    
    function MyEvent(txt){
     alert(txt);
    }
    </script>
    </head>
    
    <body>
    <div style="width: 300px; height: 100%;">
    <div id="normal" style="float: left; width: 120px;">
    <a href="javascript:MyEvent('My Function');" ><img id="img1" onmouseover="mouseoverNormal(this.src,this)" onmouseout="mouseoutNormal()" border="0" src="http://www.w3schools.com/images/html5_badge_128.gif"
    alt="Smiley1" width="100" height="80" /></a>
    </div>
    <div id="normal2" style="float: left; width: 120px;">
    <img id="img2" onmouseover="mouseoverNormal(this.src,this)" onmouseout="mouseoutNormal()" border="0" src="http://www.w3schools.com/images/colormap_80.gif"
    alt="Smiley2" width="100" height="80" />
    </div>
    
    <div id="normal3" style="float: left; width: 120px;">
    <img id="img3" onmouseover="mouseoverNormal(this.src,this)" onmouseout="mouseoutNormal()" border="0" src="http://www.w3schools.com/images/w3html.gif"
    alt="Smiley3" width="100" height="80" />
    </div>
    <div style="float: left; width: 120px;">
    <img id="img4" onmouseover="mouseoverNormal(this.src,this)" onmouseout="mouseoutNormal()" border="0" src="http://www.w3schools.com/images/w3schoolscom_gray.gif"
    alt="Smiley4" width="100" height="80" />
    </div>
    
    
    <div style="float: left; width: 120px;">
    <img id="img5" onmouseover="mouseoverNormal(this.src,this)" onmouseout="mouseoutNormal()" border="0" src="http://www.w3schools.com/images/w3cert.gif"
    alt="Smiley5" width="100" height="80" />
    </div>
    
    <div id="rg_h" data-initialized="1" style="background: none repeat scroll 0 0 #FFFFFF;border: 1px solid #CCCCCC; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2); left: 0;position: absolute; top: 0; visibility: hidden; width: 250px;height:160px;" onmouseout="normalImg()">
     <div id="rg_hc" class="rg_hc uh_hc" style="height: 100%; width: 100%;">
      <div style="position: absolute">
       <a><img id="img6" border="0" src="#" alt="Smiley" width="250" height="160" /></a>
      </div>
     </div>
    </div>
    
    </body>
    </html>
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/

  • Users who have thanked vwphillips for this post:

    lesponce (07-26-2012)

  • #6
    New Coder
    Join Date
    Jul 2012
    Posts
    49
    Thanks
    17
    Thanked 1 Time in 1 Post
    Thanks so much for your great help. You rock!

  • #7
    New Coder
    Join Date
    Jul 2012
    Posts
    49
    Thanks
    17
    Thanked 1 Time in 1 Post
    Hi Vic, how can I prevent the image to disappear after is zoomed? This happens when I minimize the browser at some degree.

    Thank you

  • #8
    New Coder
    Join Date
    Jul 2012
    Posts
    49
    Thanks
    17
    Thanked 1 Time in 1 Post
    Nevermind. I got it to work. Thx anyway.

  • #9
    New Coder
    Join Date
    Jul 2012
    Posts
    49
    Thanks
    17
    Thanked 1 Time in 1 Post

    Need Images to Rotate

    How can I have these images rotating instead of sliding?

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" >
    <head>
    <title>Untitled Page</title>

    <style type="text/css">

    .example {
    position:absolute;left:80px;top:300px;width:220px;height:588px;border:1px solid black;padding:5px;font-Size:12px;text-Align:left;
    }

    .example SPAN{
    font-Weight:bold;
    }

    .horizontal {
    position:absolute;left:60px;top:50px;width:600px;height:150px;border:solid black 1px;
    }

    .horizontal DIV IMG {
    float:left;margin-Left:5px;border-Width:0px;
    }

    .div {
    position:relative;top:15px;width:170px;height:120px;background-Color:#FFCC66;float:left;margin-Left:5px;
    }

    .div IMG {
    position:absolute;left:7px;top:10px;width:150px;height:100px;
    }

    .slideH {
    position:absolute;left:15px;top:210px;width:290px;height:15px;border:solid black 1px;background-Color:#FFFFCC;
    }

    .slideH DIV {
    position:absolute;left:0px;top:0px;width:50px;height:15px;background-Color:#FFCC66;
    }


    .hide {
    opacity:.5;filter:alpha(opacity=50);-ms-filterrogidXImageTransform.Microsoft.Alpha(Opacity=50);
    }

    .buttons {
    position:absolute;left:0px;top:230px;width:100%;text-Align:center;
    }

    .buttons INPUT {
    width:70px;font-Size:12px;background-Color:#FFCC66;
    }


    </style>

    <!-- Continue.... -->

  • #10
    New Coder
    Join Date
    Jul 2012
    Posts
    49
    Thanks
    17
    Thanked 1 Time in 1 Post
    <script type="text/javascript">

    var zxcStepScrollBar = {

    Step: function(id, ud, auto) {
    var obj = this[id], cnt;
    if (obj && this.type(ud) == 0) {
    cnt = obj.cnt + (ud < 0 ? -1 : 1);
    if (!obj.wrap) {
    cnt = Math.min(Math.max(cnt, 0), obj.lgth);
    }
    if (cnt > obj.lgth || cnt < 0) {
    obj.now += obj.wsz * (cnt < 0 ? -1 : 1);
    cnt = cnt < 0 ? obj.lgth : 0;
    obj.slide.style[obj.mde[0]] = obj.now + 'px';
    }
    obj.ud = ud;
    this.step(obj, cnt, auto);
    }
    },

    GoTo: function(id, nu) {
    var obj = this[id], to;
    if (obj && this.type(obj.ary[nu]) == 0 && nu != obj.cnt) {
    obj.ud = nu > obj.cnt ? 1 : -1;
    this.step(obj, nu);
    }
    },

    Auto: function(id, ms) {
    var oop = this, obj = this[id];
    if (obj) {
    obj.to = setTimeout(function() { oop.Step(id, obj.ud, true); }, ms || 200);
    }
    },

    Pause: function(id, ms) {
    var obj = this[id];
    if (obj) {
    obj.auto = false;
    clearTimeout(obj.to);
    }
    },

    init: function(o) {
    var oop = this, mde = o.Mode, mde = oop.type(mde) == '1' && mde.charAt(0).toUpperCase() == 'V' ? ['top', 'height', 'offsetTop', 'offsetHeight', 1, 'left'] : ['left', 'width', 'offsetLeft', 'offsetWidth', 0, 'top'], obj = document.getElementById(o.ID), slide = obj.getElementsByTagName('DIV')[0], ms = o.StepDuration, ud = o.Direction, ld = o.PreLoadDuration, img = o.LoadingImage, ldimg = document.createElement('IMG'), hold = o.AutoHold, srt = o.AutoStart, days = o.DaysPersistence, ary = o.ImageArray, ajax = o.AjaxFile, sec = o.RefreshSecs, obj;
    slide.style.position = 'absolute';
    slide.style[mde[1]] = '30000px';
    if (oop.type(img) == 1) {
    ldimg.src = img;
    ldimg.style.position = 'absolute';
    ldimg.style.zIndex = '102';
    obj.appendChild(ldimg);
    ldimg.style.left = (obj.offsetWidth - ldimg.width) / 2 + 'px';
    ldimg.style.top = (obj.offsetHeight - ldimg.height) / 2 + 'px';
    }
    this[o.ID] = obj = {
    o: o,
    id: o.ID,
    mde: mde,
    obj: obj,
    ctr: o.Center !== false,
    wrap: o.Wrap !== false,
    slide: slide,
    add: o.AddEvents,
    bar: document.getElementById(o.ScrollBarID),
    ms: oop.type(ms) == 0 && ms >= 0 ? ms : 1000,
    hold: oop.type(hold) == 0 && hold >= 0 ? hold : 1000,
    srt: oop.type(srt) == 0 && srt >= 0 ? ms : false,
    ud: oop.type(ud) == 0 && ud < 0 ? -1 : 1,
    loadms: oop.type(ld) == 0 ? ld : 5000,
    ldimg: ldimg,
    days: oop.type(days) == 0 ? days : false,
    first: true
    }
    if (oop.type(ary) == 2 && oop.imgary) {
    oop.imgary(obj, ary);
    }
    else if (oop.type(ajax) == 1 && oop.ajax) {
    obj.refresh = oop.type(sec) == 0 && sec >= 5 ? sec * 1000 : false;
    oop.ajax(obj, ajax);
    }
    else {
    oop.preload(obj);
    }
    },

    ready: function(obj, clds) {
    var oop = this, mde = obj.mde, ob = obj.obj, ary = [], sz, mve = 0, c, but = obj.o.Forward, cld, b, nu = oop.cookie(obj.id + '='), z0 = 0, z1 = 0;
    ob.style.overflow = 'hidden';
    for (; z0 < clds.length; z0++) {
    cld = clds[z0].nodeName.toUpperCase() == 'A' ? clds[z0].getElementsByTagName('IMG')[0] : clds[z0];
    ary[z0] = obj.ctr ? -(cld[mde[2]] + cld[mde[3]] / 2) + ob[mde[3]] / 2 : -(cld[mde[2]]);
    sz = cld[mde[2]] + cld[mde[3]];
    mve = Math.max(mve, cld[mde[3]]);
    }
    obj.slide.style[mde[1]] = sz + 5 + 'px';
    if (obj.wrap) {
    for (; z1 < Math.ceil(ob[mde[3]] / sz); z1++) {
    c = obj.slide.cloneNode(true);
    c.style[mde[0]] = sz * (z1 + 1) + 'px';
    c.style[mde[5]] = '0px';
    obj.slide.appendChild(c);
    c = c.cloneNode(true);
    c.style[mde[0]] = -sz * (z1 + 1) + 'px';
    obj.slide.appendChild(c);
    }
    }
    else {
    sz -= ob[mde[3]];
    for (; z1 < ary.length; z1++) {
    ary[z1] = Math.max(Math.min(ary[z1], 0), -sz);
    if (z1 > 0 && ary[z1] == ary[z1 - 1]) {
    ary.splice(z1, 1);
    z1--
    }
    }
    }
    if (obj.first) {
    if (obj.bar && obj.bar.getElementsByTagName('*')[0] && oop.scrollbar) {
    obj.bar.style.overflow = 'hidden';
    obj.scroll = obj.bar.getElementsByTagName('*')[0];
    obj.scroll.style[mde[0]] = '0px';
    obj.max = obj.bar[mde[3]] - obj.scroll[mde[3]];
    obj.sr = obj.max / (!obj.wrap ? sz : sz - clds[z0 - 1][mde[3]]);
    this.addevt(obj.scroll, 'mousedown', 'msedown', obj);
    this.addevt(document, 'mouseup', 'mseup', obj);
    this.addevt(document, 'mousemove', 'scrollbar', obj);
    }
    oop.addbut(obj, obj.o.Forward, 'fwd', 1);
    oop.addbut(obj, obj.o.Back, 'bac', -1);
    if (oop.type(obj.add) == 2) {
    oop.addevents(obj, obj.add);
    }
    }
    obj.os = ary[0];
    obj.ary = ary;
    obj.lgth = ary.length - 1;
    obj.wsz = sz;
    obj.auto = false;
    obj.cnt = ary[nu] ? nu * 1 : 0;
    obj.now = ary[obj.cnt];
    obj.mve = mve;
    oop.animate(obj, obj.now, obj.now, new Date(), 10);
    oop.buttons(obj);
    obj.ldimg.style.visibility = 'hidden';
    if (obj.first && obj.srt !== false) {
    oop.Auto(obj.id, obj.srt);
    }
    obj.first = false;
    },

    addevents: function(obj, ary) {
    for (var z0 = 0, t, el; z0 < ary.length; z0++) {
    if (ary[z0]) {
    el = document.getElementById(ary[z0][0]);
    t = this.type(ary[z0][1]) == 1 ? ary[z0][1].replace('on', '') : '';
    if (el && (t == 'mouseup' || t == 'mousedown' || t == 'click' || t == 'mouseover' || t == 'mouseout') && this[ary[z0][2]]) {
    this.addevt(el, t, ary[z0][2], obj.id, ary[z0][3]);
    }
    }
    }
    obj.add = false;
    },

    addbut: function(obj, but, p, ud) {
    var oop = this, b, c;
    if (oop.type(but) == 2) {
    b = document.getElementById(but[0]);
    if (b) {
    c = b.className + ' ';
    obj[p] = [b, c, c + but[1]];
    oop.addevt(b, 'mouseup', 'Step', obj.id, ud);
    }
    }
    },

    step: function(obj, nu, auto) {
    var to = obj.ary[nu];
    obj.cnt = nu;
    this.buttons(obj);
    this.Pause(obj.id);
    clearTimeout(obj.dly);
    obj.auto = auto === true;
    this.animate(obj, obj.now, to, new Date(), obj.ms * Math.abs((to - obj.now) / obj.mve));
    },

    type: function(t) {
    return typeof (t) == 'number' ? 0 : typeof (t) == 'string' ? 1 : typeof (t) == 'object' && t.constructor == Array ? 2 : false;
    },

    preload: function(obj) {
    var clds = obj.slide.childNodes, img, nimg, ary = [], z0 = 0;
    for (; z0 < clds.length; z0++) {
    if (clds[z0].nodeType == 1) {
    img = clds[z0].nodeName.toUpperCase() == 'IMG' ? clds[z0] : clds[z0].getElementsByTagName('IMG')[0];
    if (img) {
    nimg = new Image();
    nimg.src = img.src;
    }
    ary.push([clds[z0], img ? nimg : false]);
    }
    }
    clearTimeout(obj.to);
    this.preloadck(obj, ary, new Date());
    },

    preloadck: function(obj, ary, date) {
    for (var oop = this, clds = [], z0 = 0, z0a = 0; z0 < ary.length; z0++) {
    if (ary[z0][1] && ary[z0][1].width < 40 && new Date() - date < obj.loadms) {
    return obj.to = setTimeout(function() { oop.preloadck(obj, ary, date); }, 100)
    }
    }
    for (; z0a < ary.length; z0a++) {
    if (ary[z0a][1] && ary[z0a][1].width < 40) {
    obj.slide.removeChild(ary[z0a][0]);
    }
    else {
    clds.push(ary[z0a][0]);
    }
    }
    if (clds.length > 1) {
    obj.clds = clds;
    oop.ready(obj, clds);
    }
    },

    animate: function(obj, f, t, srt, mS) {
    var oop = this, mde = obj.mde[0], ms = new Date().getTime() - srt, now = (t - f) / mS * ms + f;
    if (isFinite(now)) {
    obj.now = Math.max(now, f < 0 || t < 0 ? now : 0);
    obj.slide.style[mde] = obj.now + 'px';
    if (obj.bar) {
    obj.scroll.style[mde] = -(obj.now - obj.os) * obj.sr + 'px';
    }
    }
    if (ms < mS) {
    obj.dly = setTimeout(function() { oop.animate(obj, f, t, srt, mS); }, 10);
    }
    else {
    obj.now = t;
    obj.slide.style[mde] = t + 'px';
    if (obj.days) {
    oop.cookieset(obj.id + '=', obj.cnt, obj.days);
    }
    if (obj.auto) {
    oop.Auto(obj.id, obj.hold);
    }
    }
    },

    buttons: function(obj) {
    if (!obj.wrap) {
    if (obj.fwd) {
    obj.fwd[0].className = obj.fwd[obj.cnt != obj.lgth ? 1 : 2];
    }
    if (obj.bac) {
    obj.bac[0].className = obj.bac[obj.cnt != 0 ? 1 : 2];
    }
    }
    },

    addevt: function(o, t, f, p1, p2) {
    var oop = this;
    if (o.addEventListener) o.addEventListener(t, function(e) { return oop[f](p1, p2, e); }, false);
    else if (o.attachEvent) o.attachEvent('on' + t, function(e) { return oop[f](p1, p2, e); });
    },

    cookie: function(nme) {
    var re = new RegExp(nme + '[^;]+', 'i');
    if (document.cookie.match(re)) {
    return document.cookie.match(re)[0].split("=")[1];
    }
    return null
    },

    cookieset: function(nme, v, days) {
    document.cookie = nme + v + ';expires=' + (new Date(new Date().getTime() + days * 86400000).toGMTString()) + ';path=/';
    },

    //** Optional Scroll Bar Code.
    scrollbar: function(obj, p2, e) {
    if (obj.drag) {
    var mse = [e.clientX, e.clientY][obj.mde[4]]; xy = Math.min(Math.max(parseInt(obj.scroll.style[obj.mde[0]]) + mse - obj.xy, 0), obj.max), ary = [], z0 = 0;
    obj.scroll.style[obj.mde[0]] = xy + 'px';
    obj.now = (-xy / obj.sr) + obj.os;
    for (; z0 < obj.ary.length; z0++) {
    ary[z0] = [Math.abs(obj.ary[z0] - obj.now), z0];
    }
    obj.cnt = ary.sort(function(a, b) { return a[0] - b[0]; })[0][1];
    obj.slide.style[obj.mde[0]] = obj.now + 'px'
    if (obj.days) {
    this.cookieset(obj.id + '=', obj.cnt, obj.days);
    }
    obj.xy = mse;
    if (!window.event) {
    e.preventDefault();
    }
    e.cancel = true;
    e.returnValue = false;
    return false;
    }
    },

    msedown: function(obj, p2, e) {
    obj.xy = [e.clientX, e.clientY][obj.mde[4]];
    this.Pause(obj.id);
    obj.drag = true;
    },

    mseup: function(obj) {
    obj.drag = false;
    },

    //** Optional Image Array Code.
    imgary: function(obj, ary) {
    var oop = this, a, img, clds = [], z0 = 0;
    for (; z0 < ary.length; z0++) {
    if (ary[z0] && typeof (ary[z0][0]) == 'string') {
    a = document.createElement('A');
    img = document.createElement('IMG');
    img.src = ary[z0][0];
    if (typeof (ary[z0][1]) == 'string') {
    a.href = ary[z0][1];
    }
    if (typeof (ary[z0][2]) == 'string') {
    img.title = ary[z0][2];
    }
    a.appendChild(img);
    obj.slide.appendChild(a);
    clds.push(a);
    }
    }
    oop.preload(obj);
    },

    //** Optional Ajax Content Code.
    ajax: function(obj, url) {
    var oop = this, request = false;
    if (window.ActiveXObject) {
    try {
    request = new ActiveXObject("Msxml2.XMLHTTP");
    }
    catch (e) {
    try {
    request = new ActiveXObject("Microsoft.XMLHTTP");
    }
    catch (e) {
    }
    }
    }
    else if (window.XMLHttpRequest) {
    request = new XMLHttpRequest();
    }
    else {
    return false;
    }
    request.onreadystatechange = function() { oop.ajaxpopulate(request, obj, url); }
    request.open('GET', url + '?' + new Date().getTime(), true);
    try {
    request.send(null);
    }
    catch (e) {
    }
    },

    ajaxpopulate: function(request, obj, url) {
    if (request.readyState == 4 && (request.status == 200 || window.location.href.indexOf("http") == -1)) {
    var oop = this;
    obj.slide.innerHTML = '';
    obj.slide.innerHTML = request.responseText;
    oop.preload(obj);
    if (obj.refresh) {
    setTimeout(function() { obj.ldimg.style.visibility = 'visible'; oop.ajax(obj, url + '?' + new Date()); }, obj.refresh);
    }
    }
    }

    }

    //=================================================

    function Init() {

    zxcStepScrollBar.init({
    ID: 'example1',
    Mode: 'horizontal',
    StepDuration: 500,
    PreLoadDuration: 5000,
    LoadingImage: 'http://www.vicsjavascripts.org.uk/StdImages/loading.gif',
    ScrollBarID: 'slide1',
    AutoHold: 2000,
    AutoStart: 1000,
    Direction: 1,
    AddEvents: [
    ['b0', 'mouseup', 'GoTo', 1]
    ],
    DaysPersistence: 1
    });

    }

    if (window.addEventListener) {
    window.addEventListener('load', Init, false);
    }
    else if (window.attachEvent) {
    window.attachEvent('onload', Init);
    }

    </script>

    </head>
    <body>



    <div class="example" style="top:20px;width:300px;height:245px;" >

    <div id="example1" class="horizontal" style="width:200px;" onmouseover="zxcStepScrollBar.Pause('tst');" onmouseout="zxcStepScrollBar.Auto('tst');" >
    <div>
    <img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt5.jpg" alt="image" />
    <img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt6.jpg" alt="image" />
    <img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt7.jpg" alt="image" />
    <img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt8.jpg" alt="image" />
    <img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt9.jpg" alt="image" />
    <img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt10.jpg" alt="image" />
    </div>
    </div>

    <div id="slide1" class="slideH" >
    <div></div>
    </div>

    <div class="buttons" >
    <input type="button" name="" value="Next" onmouseup="zxcStepScrollBar.Step('example1',1);" />
    <input type="button" name="" value="Previous" onmouseup="zxcStepScrollBar.Step('example1',-1);" />
    <input type="button" name="" value="Pause" onmouseup="zxcStepScrollBar.Pause('example1');" />
    <input type="button" name="" value="Auto" onmouseup="zxcStepScrollBar.Auto('example1');" />
    </div>

    </div>

    </body>
    </html>


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •