Please Help me! slide bar with images...

**Linda123** · 02-25-2006, 12:05 PM

Hello everybody,

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

Code:

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

<html>
<head>
	<title>Untitled</title>
<script type="text/javascript" src="slidebar.js"></script>
<style>
<!--
.drag { 
 position: relative;
 cursor: hand;
}
-->
</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-25-2006, 02:46 PM

How do you want to change it?

**Linda123** · 02-25-2006, 10:22 PM

Hi John,

I want to change the SLIDE BAR and the SLIDER to images

...or the appearance to the look of a sound volum slider

Do you can help me?

All the best!
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 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. 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.

**Linda123** · 02-26-2006, 10:06 AM

Hi John,

Thanks for your good intentions but it's too much complex to me

I need a Windows Mediaplayer streaming example with a vertical slidebar.

All the best,
Linda

Thread: Please Help me! slide bar with images...

Thread Tools

Search Thread

Please Help me! slide bar with images...

Bookmarks

Bookmarks

Posting Permissions