Forum PHP.pl > [JS] Zmiana rozmiaru zdjecia

Pomoc - Szukaj - Użytkownicy - Kalendarz

Pełna wersja: [JS] Zmiana rozmiaru zdjecia

Forum PHP.pl > Forum > Po stronie przeglądarki

Spyder

19.01.2008, 11:26:17

Witam

Znalazlem taki slider http://www.aldenta.com/examples/script.acu...text-field.html

i plik html wyglada tak

[HTML] pobierz, plaintext 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html><head>
 
 
		<meta http-equiv="Content-type" content="text/html; charset=utf-8"><title>Change Slider Value by Changing Text Input Field Demo</title>
 
		<script src="slider-text-field_files/prototype.js" type="text/javascript"></script>
		<script src="slider-text-field_files/slider.js" type="text/javascript"></script></head><body>
		<h1>Change Slider Value by Changing Text Input Field</h1>
 
		<div id="track1" style="width: 200px; background-color: rgb(204, 204, 204); height: 10px;">
			<div class="selected" id="handle1" style="width: 10px; height: 15px; background-color: rgb(255, 0, 0); cursor: move; left: 96px; position: relative;"></div>
		</div>
		<p id="debug1">changed: 51</p>
 
		<form name="form" method="post" action="/" id="slider-form" onsubmit="alert(Form.serialize($('slider-form'))); return false;">
			<input id="slider-value" name="slider-value" value="0" onkeyup="setSliderValue(slider1, this.value);" type="text"> 
			<input name="submit" value="Submit Data" type="submit">
		</form>
 
		<p>
			Enter values from 0-100 in the text input box and watch the slider change.
		</p>
 
		<script type="text/javascript" language="javascript">
		// <![CDATA[
 
			// horizontal slider control
			var slider1 = new Control.Slider('handle1', 'track1', {
				onSlide: function(v) { $('debug1').innerHTML = 'slide: ' + (v*100).toFixed(); $('slider-value').value = (v*100).toFixed(); },
				onChange: function(v){ $('debug1').innerHTML = 'changed: ' + (v*100).toFixed(); $('slider-value').value = (v*100).toFixed(); }
			});
 
			function setSliderValue(slider, value) {
				// due to onChange code above we need this or 
				// a 0 will be put in the text box when you delete the value
				if (value == '') return;
 
				if (isNaN(value))
					slider.setValue(0);
				else
					slider.setValue(value/100);
			}
 
		// ]]>
		</script>
 
		<p><a href="http://www.aldenta.com/examples/script.aculo.us/index.html">Back to the main demo page</a></p>
 
		<script src="slider-text-field_files/urchin.js" type="text/javascript">
		</script>
		<script type="text/javascript">
		_uacct = "UA-247334-1";
		urchinTracker();
		</script>
	<div style="position: absolute; width: 28px; height: 28px; z-index: 1000; display: none;"></div><img style="position: absolute; width: 35px; height: 29px; z-index: 1000; display: none;" src="slider-text-field_files/launch.png"></body></html>
[HTML] pobierz, plaintext

Chcialbym aby wartosc zmieniana zmieniala mi wartosc w linku

<img src="photo.jpg" width="...." >

Nie znam javy na tyle zeby to zrobic ale chyba trzeba wpisac jakas funkcje java w wartosc width aby zmieniala mi cyfre. Pozdrawiam

sobstel

19.01.2008, 11:35:32

po pierwsze, nie Java, tylko JavaScript, to dwie inne rzeczy.

po drugie, masz wszystko jak na tacy, wystarczy wstawić w onChange (ew. też onSlide) własny kod i nie potrzeba tu jakiejs specjalnej wiedzy, przykład:

Kod

onSlide: function(v) { document.getElementById(id_obrazka).width = (v*100).toFixed(); },
onChange: function(v){ document.getElementById(id_obrazka).width = (v*100).toFixed(); }

tak w ogóle dokumetacja dla slidera jest tutaj http://wiki.script.aculo.us/scriptaculous/show/Slider

Spyder

19.01.2008, 11:42:00

Dzieki wielkie

To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.