how to change opacity/transparency of image on slider move

[suman.panda]

Dear JavaScript Sir,I am a begineer of using java scripts.Facing problem to implement change opacity/transparency of image on slider move.The below given code for slider is working fine.But in the same code i want to implement how to change opacity/transparency of image on slider move..in the hrml i have two image is mentioned.'s_imgControl':- 'img/bluev_bg.gif','s_imgSlider': 'i-mg/bluev_sl.gif',My requirement is if i move the bluev_sl.gif slider then automatically change opacity/transparency of image 's_imgControl':- 'img/bluev_bg.gif',Requesting to please suggest/help me logic for implement it.slider.js

function slider (a_init, a_tpl) {	this.f_setValue  = f_sliderSetValue;	this.f_getPos	= f_sliderGetPos;		// register in the global collection		if (!window.A_SLIDERS)		window.A_SLIDERS = [];	this.n_id = window.A_SLIDERS.length;	window.A_SLIDERS[this.n_id] = this;	// save config parameters in the slider object	var s_key;	if (a_tpl)		for (s_key in a_tpl)			this[s_key] = a_tpl[s_key];	for (s_key in a_init)		this[s_key] = a_init[s_key];	this.n_pix2value = this.n_pathLength / (this.n_maxValue - this.n_minValue);	if (this.n_value == null)		this.n_value = this.n_minValue;	// generate the control's HTML	document.write(		'<div style="width:' + this.n_controlWidth + 'px;height:' + this.n_controlHeight + 'px;border:0; background-image:url(' + this.s_imgControl + ')" id="sl' + this.n_id + 'base">' +		'<img src="' + this.s_imgSlider + '" width="' + this.n_sliderWidth + '" height="' + this.n_sliderHeight + '" border="0" style="position:relative;left:' + this.n_pathLeft + 'px;top:' + this.n_pathTop + 'px;z-index:' + this.n_zIndex + ';cursor:pointer;visibility:hidden;" name="sl' + this.n_id + 'slider" id="sl' + this.n_id + 'slider" onmousedown="return f_sliderMouseDown(' + this.n_id + ')"/></div>'	);	this.e_base   = get_element('sl' + this.n_id + 'base');	this.e_slider = get_element('sl' + this.n_id + 'slider');		// safely hook document/window events	if (!window.f_savedMouseMove && document.onmousemove != f_sliderMouseMove) {		window.f_savedMouseMove = document.onmousemove;		document.onmousemove = f_sliderMouseMove;	}	if (!window.f_savedMouseUp && document.onmouseup != f_sliderMouseUp) {		window.f_savedMouseUp = document.onmouseup;		document.onmouseup = f_sliderMouseUp;	}	// preset to the value in the input box if available	var e_input = this.s_form == null		? get_element(this.s_name)		: document.forms[this.s_form]			? document.forms[this.s_form].elements[this.s_name]			: null;	this.f_setValue(e_input && e_input.value != '' ? e_input.value : null, 1);	this.e_slider.style.visibility = 'visible';}function f_sliderSetValue (n_value, b_noInputCheck) {	if (n_value == null)		n_value = this.n_value == null ? this.n_minValue : this.n_value;	if (isNaN(n_value))		return false;	// round to closest multiple if step is specified	if (this.n_step)		n_value = Math.round((n_value - this.n_minValue) / this.n_step) * this.n_step + this.n_minValue;	// smooth out the result	if (n_value % 1)		n_value = Math.round(n_value * 1e5) / 1e5;	if (n_value < this.n_minValue)		n_value = this.n_minValue;	if (n_value > this.n_maxValue)		n_value = this.n_maxValue;	this.n_value = n_value;	// move the slider	if (this.b_vertical)		this.e_slider.style.top  = (this.n_pathTop + this.n_pathLength - Math.round((n_value - this.n_minValue) * this.n_pix2value)) + 'px';	else		this.e_slider.style.left = (this.n_pathLeft + Math.round((n_value - this.n_minValue) * this.n_pix2value)) + 'px';	// save new value	var e_input;	if (this.s_form == null) {		e_input = get_element(this.s_name);		if (!e_input)			return b_noInputCheck ? null : f_sliderError(this.n_id, "Can not find the input with ID='" + this.s_name + "'.");	}	else {		var e_form = document.forms[this.s_form];		if (!e_form)			return b_noInputCheck ? null : f_sliderError(this.n_id, "Can not find the form with NAME='" + this.s_form + "'.");		e_input = e_form.elements[this.s_name];		if (!e_input)			return b_noInputCheck ? null : f_sliderError(this.n_id, "Can not find the input with NAME='" + this.s_name + "'.");	}	e_input.value = n_value;}// get absolute position of the element in the documentfunction f_sliderGetPos (b_vertical, b_base) {	var n_pos = 0,		s_coord = (b_vertical ? 'Top' : 'Left');	var o_elem = o_elem2 = b_base ? this.e_base : this.e_slider;		while (o_elem) {		n_pos += o_elem["offset" + s_coord];		o_elem = o_elem.offsetParent;	}	o_elem = o_elem2;	var n_offset;	while (o_elem.tagName != "BODY") {		n_offset = o_elem["scroll" + s_coord];		if (n_offset)			n_pos -= o_elem["scroll" + s_coord];		o_elem = o_elem.parentNode;	}	return n_pos;}function f_sliderMouseDown (n_id) {	window.n_activeSliderId = n_id;	return false;}function f_sliderMouseUp (e_event, b_watching) {	if (window.n_activeSliderId != null) {		var o_slider = window.A_SLIDERS[window.n_activeSliderId];		o_slider.f_setValue(o_slider.n_minValue + (o_slider.b_vertical			? (o_slider.n_pathLength - parseInt(o_slider.e_slider.style.top) + o_slider.n_pathTop)			: (parseInt(o_slider.e_slider.style.left) - o_slider.n_pathLeft)) / o_slider.n_pix2value);		if (b_watching)	return;		window.n_activeSliderId = null;	}	if (window.f_savedMouseUp)		return window.f_savedMouseUp(e_event);}function f_sliderMouseMove (e_event) {	if (!e_event && window.event) e_event = window.event;	// save mouse coordinates	if (e_event) {		window.n_mouseX = e_event.clientX + f_scrollLeft();		window.n_mouseY = e_event.clientY + f_scrollTop();	}	// check if in drag mode	if (window.n_activeSliderId != null) {		var o_slider = window.A_SLIDERS[window.n_activeSliderId];		var n_pxOffset;		if (o_slider.b_vertical) {			var n_sliderTop = window.n_mouseY - o_slider.n_sliderHeight / 2 - o_slider.f_getPos(1, 1) - 3;			// limit the slider movement			if (n_sliderTop < o_slider.n_pathTop)				n_sliderTop = o_slider.n_pathTop;			var n_pxMax = o_slider.n_pathTop + o_slider.n_pathLength;			if (n_sliderTop > n_pxMax)				n_sliderTop = n_pxMax;			o_slider.e_slider.style.top = n_sliderTop + 'px';			n_pxOffset = o_slider.n_pathLength - n_sliderTop + o_slider.n_pathTop;		}		else {			var n_sliderLeft = window.n_mouseX - o_slider.n_sliderWidth / 2 - o_slider.f_getPos(0, 1) - 3;			// limit the slider movement			if (n_sliderLeft < o_slider.n_pathLeft)				n_sliderLeft = o_slider.n_pathLeft;			var n_pxMax = o_slider.n_pathLeft + o_slider.n_pathLength;			if (n_sliderLeft > n_pxMax)				n_sliderLeft = n_pxMax;			o_slider.e_slider.style.left = n_sliderLeft + 'px';			n_pxOffset = n_sliderLeft - o_slider.n_pathLeft;		}		if (o_slider.b_watch)			 f_sliderMouseUp(e_event, 1);		return false;	}		if (window.f_savedMouseMove)		return window.f_savedMouseMove(e_event);}// get the scroller positions of the pagefunction f_scrollLeft() {	return f_filterResults (		window.pageXOffset ? window.pageXOffset : 0,		document.documentElement ? document.documentElement.scrollLeft : 0,		document.body ? document.body.scrollLeft : 0	);}function f_scrollTop() {	return f_filterResults (		window.pageYOffset ? window.pageYOffset : 0,		document.documentElement ? document.documentElement.scrollTop : 0,		document.body ? document.body.scrollTop : 0	);}function f_filterResults(n_win, n_docel, n_body) {	var n_result = n_win ? n_win : 0;	if (n_docel && (!n_result || (n_result > n_docel)))		n_result = n_docel;	return n_body && (!n_result || (n_result > n_body)) ? n_body : n_result;}function f_sliderError (n_id, s_message) {	alert("Slider #" + n_id + " Error:\n" + s_message);	window.n_activeSliderId = null;}get_element = document.all ?	function (s_id) { return document.all[s_id] } :	function (s_id) { return document.getElementById(s_id) };

single_slider_demo.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html><head>	<title>Single Slider</title>	<script language="JavaScript" src="slider.js"></script></head> <body><form action="single_slider_demo.html" method="get" name="demoForm"><input name="sliderValue" id="sliderValue" type="Text" size="3"><script language="JavaScript"> 	var A_TPL = {		'b_vertical' : true,		'b_watch': true,		'n_controlWidth': 16,		'n_controlHeight': 120,		'n_sliderWidth': 15,		'n_sliderHeight': 16,		'n_pathLeft' : 1,		'n_pathTop' : 1,		'n_pathLength' : 103,		's_imgControl': 'img/bluev_bg.gif',		's_imgSlider': 'img/bluev_sl.gif',		'n_zIndex': 1	}	var A_INIT = {		's_form' : 0,		's_name': 'sliderValue',		'n_minValue' : 0,		'n_maxValue' : 100,		'n_value' : 20,		'n_step' : 1	} 	new slider(A_INIT, A_TPL);</script><input name="Submit" type="Submit" value="Submit"> </form>  </body></html>

Thanks in advance.Thanks and Regards,SKP

[suman.panda]

Dear javaScript Support Team,Requesting you to please suggest or help me for implement the above needful.Thanks,SKP

[Synook]

Uh, this forum isn't a help desk; there is no "support team" . The members of this forum are just volunteers who spend some of their time helping other people, out of the goodness of their heart or otherwise.Err, your code is very long, but have you just tried changing the opacity in CSS?

[dsonesuk]

You can't change the opacity of the blue bg slide bar image, without affecting the opacity of the pointer image as well, as it is within the same element you wish to change the opacity of (Note: both of these are javascript generated)The only way this will work, is to remove the pointer image from within slider bar element, create a outer container to contain the separated slidebar, and pointer. Give the outer container a position of 'relative', and change the pointer positioning from 'relative' to 'absolute'. Now the pointer image won't be affected by opacity assigned to the slidebar.function slider (a_init, a_tpl) { this.f_setValue = f_sliderSetValue; this.f_getPos = f_sliderGetPos; // register in the global collection if (!window.A_SLIDERS) window.A_SLIDERS = []; this.n_id = window.A_SLIDERS.length; window.A_SLIDERS[this.n_id] = this; // save config parameters in the slider object var s_key; if (a_tpl) for (s_key in a_tpl) this[s_key] = a_tpl[s_key]; for (s_key in a_init) this[s_key] = a_init[s_key]; this.n_pix2value = this.n_pathLength / (this.n_maxValue - this.n_minValue); if (this.n_value == null) this.n_value = this.n_minValue; // generate the control's HTML document.write( '<div style="position:relative; width:' + this.n_controlWidth + 'px;height:' + this.n_controlHeight + 'px;border:0;" id="sl_outer"><div style="width:' + this.n_controlWidth + 'px;height:' + this.n_controlHeight + 'px;border:0; background-image:url(' + this.s_imgControl + ')" id="sl' + this.n_id + 'base"></div>' + '<img src="' + this.s_imgSlider + '" width="' + this.n_sliderWidth + '" height="' + this.n_sliderHeight + '" border="0" style="position:absolute;left:' + this.n_pathLeft + 'px;top:' + this.n_pathTop + 'px;z-index:' + this.n_zIndex + ';cursor:pointer;visibility:hidden;" name="sl' + this.n_id + 'slider" id="sl' + this.n_id + 'slider" onmousedown="return f_sliderMouseDown(' + this.n_id + ')"/></div>' ); this.e_base = get_element('sl' + this.n_id + 'base'); this.e_slider = get_element('sl' + this.n_id + 'slider'); // safely hook document/window events if (!window.f_savedMouseMove && document.onmousemove != f_sliderMouseMove) { window.f_savedMouseMove = document.onmousemove; document.onmousemove = f_sliderMouseMove; } if (!window.f_savedMouseUp && document.onmouseup != f_sliderMouseUp) { window.f_savedMouseUp = document.onmouseup; document.onmouseup = f_sliderMouseUp; } // preset to the value in the input box if available var e_input = this.s_form == null ? get_element(this.s_name) : document.forms[this.s_form] ? document.forms[this.s_form].elements[this.s_name] : null; this.f_setValue(e_input && e_input.value != '' ? e_input.value : null, 1); this.e_slider.style.visibility = 'visible';}to add and remove opacity when pointer is draggedTO add 0.5 opacityfunction f_sliderMouseMove (e_event) { if (!e_event && window.event) e_event = window.event; // save mouse coordinates if (e_event) { window.n_mouseX = e_event.clientX + f_scrollLeft(); window.n_mouseY = e_event.clientY + f_scrollTop(); } // check if in drag mode if (window.n_activeSliderId != null) { var o_slider = window.A_SLIDERS[window.n_activeSliderId]; var n_pxOffset; if (o_slider.b_vertical) { var n_sliderTop = window.n_mouseY - o_slider.n_sliderHeight / 2 - o_slider.f_getPos(1, 1) - 3; // limit the slider movement if (n_sliderTop < o_slider.n_pathTop) n_sliderTop = o_slider.n_pathTop; var n_pxMax = o_slider.n_pathTop + o_slider.n_pathLength; if (n_sliderTop > n_pxMax) n_sliderTop = n_pxMax; o_slider.e_slider.style.top = n_sliderTop + 'px'; n_pxOffset = o_slider.n_pathLength - n_sliderTop + o_slider.n_pathTop; document.getElementById("sl0base").style.opacity="0.5"; document.getElementById("sl0base").style.filter="alpha(opacity=50)"; } else { var n_sliderLeft = window.n_mouseX - o_slider.n_sliderWidth / 2 - o_slider.f_getPos(0, 1) - 3; // limit the slider movement if (n_sliderLeft < o_slider.n_pathLeft) n_sliderLeft = o_slider.n_pathLeft; var n_pxMax = o_slider.n_pathLeft + o_slider.n_pathLength; if (n_sliderLeft > n_pxMax) n_sliderLeft = n_pxMax; o_slider.e_slider.style.left = n_sliderLeft + 'px'; n_pxOffset = n_sliderLeft - o_slider.n_pathLeft; } if (o_slider.b_watch) f_sliderMouseUp(e_event, 1); return false; } if (window.f_savedMouseMove) return window.f_savedMouseMove(e_event);}To remove opacityfunction f_sliderMouseUp (e_event, b_watching) { if (window.n_activeSliderId != null) { var o_slider = window.A_SLIDERS[window.n_activeSliderId]; o_slider.f_setValue(o_slider.n_minValue + (o_slider.b_vertical ? (o_slider.n_pathLength - parseInt(o_slider.e_slider.style.top) + o_slider.n_pathTop) : (parseInt(o_slider.e_slider.style.left) - o_slider.n_pathLeft)) / o_slider.n_pix2value); if (b_watching) return; window.n_activeSliderId = null; } if (window.f_savedMouseUp) return window.f_savedMouseUp(e_event); document.getElementById("sl0base").style.opacity="1"; document.getElementById("sl0base").style.filter="alpha(opacity=100)";}

[suman.panda]

Dear Dsonesuk Sir,Thanks for your pronto response.The code you have made the changes which fulfill 50% of my requirement.Let say the main image which length is 100 m. The slider is moving on the image same part only change the opacity...means if slider moving 20 m then only in the main imageleft part of the 20 m lenght style.opacity="0.5" and right part of image 80 m length should be opacity=100 .Hope sir you understand my requirement.if the slider moving from left to right then the area slider have completed change the opacity.Please suggest me for the needful.Thanks for your time and help.Thanks,SKP

[dsonesuk]

The easy way to do that, would be to extend the height of pointer image to say 400px, make sure the pointer is at the top, the rest will be the transparent effect image of the slide bar you require.Here's one i made earlierYou will have to use you original script, but with a few modificationschange this

	document.write(		 '<div style="width:' + this.n_controlWidth + 'px;height:' + this.n_controlHeight + 'px;border:0; background-image:url(' + this.s_imgControl + ')" id="sl' + this.n_id + 'base">' +		 '<img src="' + this.s_imgSlider + '" width="' + this.n_sliderWidth + '" height="' + this.n_sliderHeight + '" border="0" style="position:relative;left:' + this.n_pathLeft + 'px;top:' + this.n_pathTop + 'px;z-index:' + this.n_zIndex + ';cursor:pointer;visibility:hidden;" name="sl' + this.n_id + 'slider" id="sl' + this.n_id + 'slider" onmousedown="return f_sliderMouseDown(' + this.n_id + ')"/></div>'	 );

to below: with this you are removing the height of the image, and adding overflow: hidden; to the first div container, like so

document.write('<div style="width:' + this.n_controlWidth + 'px;height:' + this.n_controlHeight + 'px;border:0; background-image:url(' + this.s_imgControl + '); overflow:hidden;" id="sl' + this.n_id + 'base">' +		 '<img src="' + this.s_imgSlider + '" width="' + this.n_sliderWidth + '" border="0" style="position:relative;left:' + this.n_pathLeft + 'px;top:' + this.n_pathTop + 'px;z-index:' + this.n_zIndex + ';cursor:pointer;visibility:hidden;" name="sl' + this.n_id + 'slider" id="sl' + this.n_id + 'slider" onmousedown="return f_sliderMouseDown(' + this.n_id + ')"/></div>'		);

the extended height pointer image with opacity effect bar below, now overlaps the original bar background image, the overflow: hidden hides the rest of the height (part of 400px not used) of the pointer.