Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [JS] szerokosc i wysokosc IMG
Forum PHP.pl > Forum > Po stronie przeglądarki > JavaScript
blokern
18.01.2012, 16:30:32
czesc, mam obrazek na stronie <img src="plik.jpg"> bez okreslonej widht= oraz height=.
w jaki sposob moge wyciagnac informacje na temat szerokosci i wysokosci obrazka w chrome (w ff dziala) bo opcja document.getElementById("fotka").height; i document.getElementById("focia").width; to odpada questionmark.gif?
dzieki za odpowiedz
Łukasz
kamil4u
18.01.2012, 16:57:35
offsetWidth
blokern
18.01.2012, 17:36:42
offsetWidth bedzie dzialac jezeli w <img src=""> jest width="".
Twoje rozwiazanie w chromie nie dziala

<img src="abc.jpg" id="focia">

var intElemOffsetWidth = document.getElementById('focia').offsetWidth;
document.write(""+intElemOffsetWidth+"")

wynik w chrome = 0

kamil4u
18.01.2012, 19:43:38
Odczytaj w takim razie wymiar obrazka w zdarzeniu onload. Chrome pewnie może odczytać wymiar, gdy obraz jest załadowany. Spróbuj dwoma metodami.
blokern
18.01.2012, 23:08:30
dzieki za wskazowke

poczynilem

var image = new Image();
image.onload = function() {
// always called
alert(""+image.width+"");
var fiu = image.width;
document.write(""+image.width+"");
};
image.src = 'abc.jpg';

wiesz moze czemu wyswietla sie alert a nastepnie przeladowuje sie strona i wyskakuje wartosc szerokosci ?
chcialbym przekazac wartosc fiu i podac dalej
kamil4u
19.01.2012, 00:10:25
Strona nie powinna się przeładowywać...
Opisz problem trochę dokładniej...

W chrome trzeba dać onload, bo z tego co czytałem to szerokość ustalana jest w tej przeglądarce dopiero po wczytaniu obrazka, a nie DOM-u.
erix
19.01.2012, 10:44:50
Cytat
wiesz moze czemu wyswietla sie alert a nastepnie przeladowuje sie strona i wyskakuje wartosc szerokosci ?

Bo używasz document.write podczas, gdy dokument jest już zrenderowany. Zdarzenie onload jest wyzwalane asynchronicznie.
blokern
19.01.2012, 13:10:19 
[HTML] pobierz, plaintext 
  1.  
  2. <html>
  3. <head>
  4. </head>
  5. <body>
  6.  
  7. <div id="box">
  8.     <img src="abc.jpg"  alt="tresc">
  9. </div>
  10.  
  11. <script type="text/javascript">
  12. if (document.images) { //sprawdzamy czy przeglądarka obsługuje obiekty images
  13.  
  14. els = document.getElementById('box').getElementsByTagName('img');
  15. for( i=0; el = els[i++];){
  16.  if( el.width >=450 && el.height >=150 ){
  17.  var ok=1;}
  18.      }
  19. </script>
  20. </body>
  21. </html>
[HTML] pobierz, plaintext


w FF dziala w chrome nie smile.gif jezeli wstawie taki skrypt

[html]
var image = new Image();
image.onload = function() {
// always called
alert(""+image.width+"");
var fiu = image.width;
document.write(""+image.width+"");
};
image.src = 'abc.jpg';
[html]

no to wyskoczy mi alert potem przeladuje strone i wyrzuci szerokosc a tak naprawde to ja ta szerokosc chce gdzies podac dalej

pozdrawiam
Łukasz
kamil4u
19.01.2012, 13:28:03 
[HTML] pobierz, plaintext 
  1. <html>
  2. <head>
  3. </head>
  4. <body>
  5.  
  6. <div id="box">
  7. <img src="abc.jpg" alt="tresc">
  8. </div>
  9.  
  10. <script type="text/javascript">
  11. onload = function(){
  12.  
  13. els = document.getElementById('box').getElementsByTagName('img');
  14. for( i=0; el = els[i++];){
  15. //tu el.width powinno działać wszędzie <-------------------------------------
  16. if( el.width >=450 && el.height >=150 ){
  17. //....
  18. } else {
  19. //....
  20. }
  21. }
  22. }
  23. </script>
  24. </body>
  25. </html>
[HTML] pobierz, plaintext
blokern
19.01.2012, 14:29:09 
[HTML] pobierz, plaintext 
  1.  
  2.     <html>
  3.     <head>
  4.     </head>
  5.     <body>
  6.  
  7.     <div id="box">
  8.     <img src="http://www.google.pl/logos/classicplus.png" alt="tresc">
  9.     </div>
  10.  
  11.     <script type="text/javascript">
  12.     onload = function(){
  13.  
  14.     els = document.getElementById('box').getElementsByTagName('img');
  15.     for( i=0; el = els[i++];){
  16.     //tu el.width powinno działać wszędzie <-------------------------------------
  17.     if( el.width >=50 && el.height >=50 ){
  18. 	var ok=1;
  19.  
  20.     } else {
  21.  
  22.     }
  23.     }
  24.     }
  25. 	function ukryj()
  26.     {
  27.       document.getElementById("reklama").style.visibility = "hidden";
  28.     }
  29.     </script>
  30.     </body>
  31.     </html>
  32.  
[HTML] pobierz, plaintext


zamiast wyswietlic fotke a potem tekst "?questionmark.gif" wychodzi co wychodzi, zreszta sam zobacz smile.gif
kamil4u
19.01.2012, 15:39:37
Napisz co chcesz osiągnąć, bo teraz z tym kodem to nic nie wiadomo....

Ten kod odczytuje szerokość obrazka pod każdą przeglądarką....
Kod
<html>
<head>
</head>
<body>

<div id="box">
<img src="http://www.google.pl/logos/classicplus.png" alt="tresc">
</div>

<script type="text/javascript">
onload = function(){

els = document.getElementById('box').getElementsByTagName('img');
for( i=0; el = els[i++];){
alert(el.width);
}
}

</script>
</body>
</html>


Czego nie umiesz zrobić?
blokern
19.01.2012, 15:48:37
zamienilem alert na document.write i efekt jest taki ze fotka znika a zamiast fotki pojawia sie wartosc dla width. chce poprostu wyciagnac szerokosc zdjecia i pokazac dalej

[HTML] pobierz, plaintext 
  1. <html>
  2. <head>
  3. </head>
  4. <body>
  5.  
  6. <div id="box">
  7. <img src="http://www.google.pl/logos/classicplus.png" alt="tresc">
  8. </div>
  9.  
  10. <script type="text/javascript">
  11. onload = function(){
  12.  
  13. els = document.getElementById('box').getElementsByTagName('img');
  14. for( i=0; el = els[i++];){
  15. document.write(el.width);
  16. }
  17. }
  18.  
  19. </script>
  20. </body>
  21. </html>
[HTML] pobierz, plaintext
kamil4u
19.01.2012, 15:52:04
Daj w kodzie gdzie chcesz, żeby się wyświetliła szerokość:
[HTML] pobierz, plaintext 
  1. <span id="test"></span>
[HTML] pobierz, plaintext
, a w JS zamiast document.write(el.width);, użyj document.getElementById('test').innerHTML = el.width;

I już smile.gif
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.
Invision Power Board © 2001-2025 Invision Power Services, Inc.