Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
 Reply to this topicStart new topic
> [JS] Zmiana rozmiaru zdjecia
Spyder
post 19.01.2008, 11:26:17
Post #1





Grupa: Zarejestrowani
Postów: 269
Pomógł: 7
Dołączył: 12.10.2006
Skąd: Newcastle Upon Tyne

Ostrzeżenie: (0%)
-----

Witam

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

i plik html wyglada tak 

[HTML] pobierz, plaintext 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html><head>
  3.  
  4.  
  5. 		<meta http-equiv="Content-type" content="text/html; charset=utf-8"><title>Change Slider Value by Changing Text Input Field Demo</title>
  6.  
  7. 		<script src="slider-text-field_files/prototype.js" type="text/javascript"></script>
  8. 		<script src="slider-text-field_files/slider.js" type="text/javascript"></script></head><body>
  9. 		<h1>Change Slider Value by Changing Text Input Field</h1>
  10.  
  11. 		<div id="track1" style="width: 200px; background-color: rgb(204, 204, 204); height: 10px;">
  12. 			<div class="selected" id="handle1" style="width: 10px; height: 15px; background-color: rgb(255, 0, 0); cursor: move; left: 96px; position: relative;"></div>
  13. 		</div>
  14. 		<p id="debug1">changed: 51</p>
  15.  
  16. 		<form name="form" method="post" action="/" id="slider-form" onsubmit="alert(Form.serialize($('slider-form'))); return false;">
  17. 			<input id="slider-value" name="slider-value" value="0" onkeyup="setSliderValue(slider1, this.value);" type="text"> 
  18. 			<input name="submit" value="Submit Data" type="submit">
  19. 		</form>
  20.  
  21. 		<p>
  22. 			Enter values from 0-100 in the text input box and watch the slider change.
  23. 		</p>
  24.  
  25. 		<script type="text/javascript" language="javascript">
  26. 		// <![CDATA[
  27.  
  28. 			// horizontal slider control
  29. 			var slider1 = new Control.Slider('handle1', 'track1', {
  30. 				onSlide: function(v) { $('debug1').innerHTML = 'slide: ' + (v*100).toFixed(); $('slider-value').value = (v*100).toFixed(); },
  31. 				onChange: function(v){ $('debug1').innerHTML = 'changed: ' + (v*100).toFixed(); $('slider-value').value = (v*100).toFixed(); }
  32. 			});
  33.  
  34. 			function setSliderValue(slider, value) {
  35. 				// due to onChange code above we need this or 
  36. 				// a 0 will be put in the text box when you delete the value
  37. 				if (value == '') return;
  38.  
  39. 				if (isNaN(value))
  40. 					slider.setValue(0);
  41. 				else
  42. 					slider.setValue(value/100);
  43. 			}
  44.  
  45. 		// ]]>
  46. 		</script>
  47.  
  48. 		<p><a href="http://www.aldenta.com/examples/script.aculo.us/index.html">Back to the main demo page</a></p>
  49.  
  50. 		<script src="slider-text-field_files/urchin.js" type="text/javascript">
  51. 		</script>
  52. 		<script type="text/javascript">
  53. 		_uacct = "UA-247334-1";
  54. 		urchinTracker();
  55. 		</script>
  56. 	<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


--------------------
Portfolio

Windows Vista Business SP1
DELL VOSTRO 200, Intel Core2 DUO E4600 2.4GHz, 3 GB RAM, ATI Radeon HD 2400 Pro, Screen DELL 22"

Pomogłem ci -> Kliknij "Pomógł" -> Dzięki
Go to the top of the page
+Quote Post
sobstel
post 19.01.2008, 11:35:32
Post #2





Grupa: Zarejestrowani
Postów: 853
Pomógł: 25
Dołączył: 27.08.2003
Skąd: Katowice

Ostrzeżenie: (0%)
-----

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


--------------------
"If debugging is the process of removing bugs, then programming must be the process of putting them in..."
sobstel.org
Go to the top of the page
+Quote Post
Spyder
post 19.01.2008, 11:42:00
Post #3





Grupa: Zarejestrowani
Postów: 269
Pomógł: 7
Dołączył: 12.10.2006
Skąd: Newcastle Upon Tyne

Ostrzeżenie: (0%)
-----

Dzieki wielkie winksmiley.jpg


--------------------
Portfolio

Windows Vista Business SP1
DELL VOSTRO 200, Intel Core2 DUO E4600 2.4GHz, 3 GB RAM, ATI Radeon HD 2400 Pro, Screen DELL 22"

Pomogłem ci -> Kliknij "Pomógł" -> Dzięki
Go to the top of the page
+Quote Post
« Następny starszy · Po stronie przeglądarki · Następny nowszy »
 

Reply to this topicStart new topic
1 Użytkowników czyta ten temat (1 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 

Tryb wyświetlania: Standardowy · Przełącz na: Linearny+ · Przełącz na: Drzewo

Śledź ten temat · Wyślij temat na e-mail · Wydrukuj ten temat · Subskrybuj to forum

RSS Wersja Lo-Fi Aktualny czas: 26.04.2024 - 06:26
Powered By IP.Board © 2024  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn