Please Help me! slide bar with images... [Archive]

Linda123

02-25-2006, 12:05 PM

Hello everybody,

I need help, how to change this slide bar with images? :confused:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>
<head>
<title>Untitled</title>
<script type="text/javascript" src="slidebar.js"></script>
<style>

</style>

<SCRIPT LANGUAGE="JavaScript1.2">
function mutePlayer()
{
if (document.Player.Mute==0) {
document.Player.Mute = 1;
} else if (document.Player.Mute==1) {
document.Player.Mute = 0;
// document.Player.Play();
}
}

function startPlayer() {
document.Player.Play();
}

function stopPlayer() {
document.Player.Stop();
}

function pausePlayer() {
document.Player.Pause();
}

document.onmousedown=dragLayer
document.onmouseup=new Function("dragMe=false")

var Volume = new Array();
Volume[40] = "-10000";
Volume[39] = "-4000";
Volume[38] = "-3800";
Volume[37] = "-3600";
Volume[36] = "-3400";
Volume[35] = "-3200";
Volume[34] = "-3000";
Volume[33] = "-2900";
Volume[32] = "-2500";
Volume[31] = "-2400";
Volume[30] = "-2300";
Volume[29] = "-2000";
Volume[28] = "-1900";
Volume[27] = "-1900";
Volume[26] = "-1500";
Volume[25] = "-1200";
Volume[24] = "-1000";
Volume[23] = "-900";
Volume[22] = "-850";
Volume[21] = "-800";
Volume[20] = "-700";
Volume[19] = "-600";
Volume[18] = "-550";
Volume[17] = "-450";
Volume[16] = "-400";
Volume[15] = "-350";
Volume[14] = "-300";
Volume[13] = "-250";
Volume[12] = "-200";
Volume[11] = "-150";
Volume[10] = "-100";
Volume[9] = "-90";
Volume[8] = "-80";
Volume[7] = "-70";
Volume[6] = "-60";
Volume[5] = "-50";
Volume[4] = "-40";
Volume[3] = "-30";
Volume[2] = "-20";
Volume[1] = "-10";
Volume[0] = "0";

function AdjustVolume() {
ind = Math.round(showPerc/140)
document.Player.Volume = Volume[ind];
}

var dragMe=false, kObj, yPos,direction
function moveLayer() {
if (event.button==1 && dragMe) {
oldY = kObj.style.pixelTop; kObj.style.pixelTop=temp2+event.clientX-yPos;
if (kObj.style.pixelTop > oldY) direction="dn"; else direction="up";
if (kObj.style.pixelTop < 2 && direction=="up") {kObj.style.pixelTop=2; direction="dn";}
if (kObj.style.pixelTop > 102 && direction=="dn") {kObj.style.pixelTop=102; direction="up";}
sPosition=kObj.style.pixelTop; showPerc = (sPosition-2)/2*100;
AdjustVolume();
return false; }
}
function dragLayer() {
if (!document.all) return;
if (event.srcElement.className=="drag") {dragMe=true; kObj=event.srcElement; temp2=kObj.style.pixelTop; yPos=event.clientX; document.onmousemove=moveLayer; }
}
</script>
</head>

<body>
<BR><BR>
<INPUT TYPE="button" VALUE="Play" onclick="startPlayer();"> <INPUT TYPE="button" VALUE="Pause" onclick="pausePlayer();"> <INPUT TYPE="button" VALUE="Stop" onclick="stopPlayer();"> <INPUT TYPE="button" VALUE="Mute" onclick="mutePlayer();">
<br><br>
<table align="left"><tr><td>
<div style="position:relative;width:16px;height:200px;overflow:hidden;background:buttonhface;border:outset 1px #dedede;">
<div style="position:absolute;right:0;top:-17px;width:22px;height:233px;overflow:auto;background:buttonhface;" onscroll="document.Player.Volume = Volume[ Math.ceil(this.scrollTop/this.scrollHeight*40) ];">
<div style="width:1px;height:10000px;overflow:hidden;background:buttonhface;"></div>
</div>
</div>
</td></tr></table><br><br><br><br>
Volume
<EMBED NAME="Player" SRC="http://www.infonegocio.com/pol/angie.asf" WIDTH="0" HEIGHT="0" AUTOSTART="true" LOOP="false" TYPE="audio/mp3" showcontrols="0" showdisplay="0" showstatusbar="0" ShowCaptioning="false" ShowPositionControls="false" hidden="true" nosave="true">

</body>
</html>

Thanks in advanced,
Linda

jscheuer1

02-26-2006, 04:56 AM

Well, the slider used by this script and markup is the default scroll bar of the browser. To use an image, one needs to use drag and drop scripting. There are several of these around. Here (http://www.walterzorn.com/dragdrop/dragdrop_e.htm#addons) is a good example of a horizontal slider made using images and one such script. There are also a couple of examples using DD's drag and drop DOM (http://www.dynamicdrive.com/dynamicindex11/domdrag/index.htm). One is on the demo page itself (scroll down to 'Limiting the range of the drag'), the other is linked to the demo page from that same section. These last two use custom tailored dragable divisions to act as the scroller but, an image could also be used.

Added Later, I see there is linked to your code a script:

<script type="text/javascript" src="slidebar.js"></script>

Perhaps something in there would be of use as well.