...

View Full Version : Position Image on Mouse Hover



lesponce
07-24-2012, 03:19 PM
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>

vwphillips
07-24-2012, 05:37 PM
not sure where the big image is to be positioned or what half the HTML is for

but


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

lesponce
07-24-2012, 05:54 PM
Excellent! That worked! Thanks so much for your help.

God bless you!

lesponce
07-25-2012, 10:13 PM
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>

vwphillips
07-26-2012, 11:13 AM
<!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>

lesponce
07-26-2012, 05:37 PM
Thanks so much for your great help. You rock!

lesponce
07-31-2012, 11:29 PM
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

lesponce
08-01-2012, 12:29 AM
Nevermind. I got it to work. Thx anyway.

lesponce
08-06-2012, 11:21 PM
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-filter:progid:DXImageTransform.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.... -->

lesponce
08-06-2012, 11:22 PM
<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>



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum