[JS] IE, css, expression i width

0

Mam takie coś:

<img src="http://www.marcreichelt.de/spezial/firefox/firefox_huge.png"
 style="width:expression(this.width>300?'300px':this.width);"
 onclick="this.style.width='900px';"/>

Jednak po kliknięciu na obrazek nie chce się on powiększać (pomniejszać się da).
Co zrobić żeby obrazek powiększał się po kliknięciu?

Potrzebne jest mi to tylko i wyłącznie pod IE (do WebBrowsera).

0

chociaż mi to w ogóle nie działa, to wydaje mi się że powinno pomóc zamiana
this.style.width='900px'
na
this.width='900'
bo ustalając style.width nadpisujesz ją i już nie jest równa expression(...) tylko na stała 900px, ale z drugiej strony po ustaleniu width na 900 chyba zadziała pseudo max-width na 300 i powróci do wymiaru 300 więc nie za bardzo rozumiem co chcesz uzyskać

0
<img src="http://www.marcreichelt.de/spezial/firefox/firefox_huge.png"
 style="width:expression((this.width>300)&&(!window['ustawionko'])?'300px':this.width);"
 onclick="ustawionko=!window['ustawionko'];"/>
<img src="http://www.marcreichelt.de/spezial/firefox/firefox_huge.png"
 style="width:expression(window['ustawionko']?window['ustawionko']:(this.width>300?'300px':this.width));"
 onclick="ustawionko=(window['ustawionko']?'':'900px');"/>

Nietestowane, z glowy pisane ;-P
Ale wydaje mi sie ze pierwszy kod bedzie bardziej odpowiedni ;)

(oczywiscie jak masz wiecej obrazkow to ponazywaj inaczej zmienne ;] )

0

no to jak już to wydaje mi się że:

<img src="http://www.marcreichelt.de/spezial/firefox/firefox_huge.png"
 style="width:expression(this.huge ? this.huge : (this.width>300 ?'300px':this.width));"
 onclick="this.huge = this.huge ? false : '900px'"/>
0
Adamo napisał(a)

no to jak już to wydaje mi się że:

<img src="http://www.marcreichelt.de/spezial/firefox/firefox_huge.png"
 style="width:expression(this.huge ? this.huge : (this.width>300 ?'300px':this.width));"
 onclick="this.huge = this.huge ? false : '900px'"/>

O takie coś mi chodziło, tylko jest z tym pewien problem...
Jeśli obrazek nie jest w cache przeglądarki, to pojawia się o wymiarach 28x21 zamiast szerokości 300px.
Podejrzewam, że this.width ma prawidłową wielkość dopiero po pobraniu obrazka, a wcześniej przyjmuje wartość 28px.

Da się coś z tym zrobić?

0
fleming86 napisał(a)

O takie coś mi chodziło, tylko jest z tym pewien problem...
Jeśli obrazek nie jest w cache przeglądarki, to pojawia się o wymiarach 28x21 zamiast szerokości 300px.
Podejrzewam, że this.width ma prawidłową wielkość dopiero po pobraniu obrazka, a wcześniej przyjmuje wartość 28px.

Da się coś z tym zrobić?

Bo pewnie trzeba na koncu dodac width="300" height="300" :-)

0

może zamiast this.width dać 'auto' albo '' czy nie wiem co tam się daje

0
Shreq napisał(a)

Bo pewnie trzeba na koncu dodac width="300" height="300" :-)

Nie chcę żeby małe obrazki były powiększane.

Adamo napisał(a)

może zamiast this.width dać 'auto' albo '' czy nie wiem co tam się daje

Już próbowałem... albo IE się zawiesza, albo w ogóle nie działa.

0
fleming86 napisał(a)
Shreq napisał(a)

Bo pewnie trzeba na koncu dodac width="300" height="300" :-)

Nie chcę żeby małe obrazki były powiększane.

Cos macisz :)

Juz nie bardzo wiem, o co Ci chodzi, ale jest prosta metoda zeby zlapac wymiary "zdalnego" obrazka przed zaladowaniem do cache przegladarki:

var myImg = new Image();
myImg.src = "http://www.marcreichelt.de/spezial/firefox/firefox_huge.png";
alert( myImg.width + ' x ' + myImg.height );

W przypadku tego obrazka daje 2500 x 2405.
Czy to Ci wystarczy? :)

Pozdrawiam

0
Shreq napisał(a)

var myImg = new Image();
myImg.src = "http://www.marcreichelt.de/spezial/firefox/firefox_huge.png";
alert( myImg.width + ' x ' + myImg.height );

Już to znałem, nic mi to nie daje...

0
fleming86 napisał(a)
Shreq napisał(a)

var myImg = new Image();
myImg.src = "http://www.marcreichelt.de/spezial/firefox/firefox_huge.png";
alert( myImg.width + ' x ' + myImg.height );

Już to znałem, nic mi to nie daje...

Jeszcze raz, powoli:
Jesli bedziesz znal wymiary obrazka PRZED jego wyswietleniem - mozesz dolaczajac do <img src ..> parametry width="x" height="y" - zdecydowac, jak obrazek bedzie wyswietlany. Czyli male obrazki nie beda powiekszane, a wielkie - beda przycinane do Twoich zamiarow.
Chyba ze nic nie rozumiem - ale w takim razie moze zdefiniuj poprawnie problem?
Pozdrawiam

0

no może coś takiego:

<script>
function imgloaded(co){
  co.rozm = {x: co.width,
             y: co.height}
  co.min = {x: iks = (co.rozm.x > 300 ? 300 : co.rozm.x),
            y: Math.round(iks / co.rozm.x * co.rozm.y) }
  co.width = co.min.x;
  co.height = co.min.y;
  co.huge = false;
  co.onclick = function(){
    xy = (this.huge ^= true) ? this.rozm : this.min;
    this.width = xy.x;
    this.height = xy.y;
  }
}

</script>
<img src="http://www.marcreichelt.de/spezial/firefox/firefox_huge.png" onload="imgloaded(this)">
0
Shreq napisał(a)

Jeszcze raz, powoli:
Jesli bedziesz znal wymiary obrazka PRZED jego wyswietleniem - mozesz dolaczajac do <img src ..> parametry width="x" height="y"

Tak, tylko że obrazek najpierw zostanie pobrany i po pobraniu - nagle cały wyświetlony.
Z małymi obrazkami to nie ma znaczenia, jednak dla dużych obrazków chciałbym uzyskać efekt progresywnego pojawiania się obrazka (że widać pobrany fragment obrazeka).

Przykład podany przez Adamo nie jest dobry, bo obrazek najpierw jest pobierany tak, że widać go w orginalnym rozmiarze (duży) i dopiero po całkowitym pobraniu (onload), pomniejsza się.

0
fleming86 napisał(a)
Shreq napisał(a)

Jeszcze raz, powoli:
Jesli bedziesz znal wymiary obrazka PRZED jego wyswietleniem - mozesz dolaczajac do <img src ..> parametry width="x" height="y"

Tak, tylko że obrazek najpierw zostanie pobrany i po pobraniu - nagle cały wyświetlony.
Z małymi obrazkami to nie ma znaczenia, jednak dla dużych obrazków chciałbym uzyskać efekt progresywnego pojawiania się obrazka (że widać pobrany fragment obrazeka).

Przykład podany przez Adamo nie jest dobry, bo obrazek najpierw jest pobierany tak, że widać go w orginalnym rozmiarze (duży) i dopiero po całkowitym pobraniu (onload), pomniejsza się.

Zanim napisalem ten przyklad - sprawdzilem na FF i IE.
Wyczyscilem cache przegladarki.
Kliknalem na stronie takiej, jak podawalem.
Obrazek NIE JEST pobierany.
Wynik mialem OD RAZU.
Mozesz powiedziec, jaka masz przegladarke, ze ona Ci wczytuje caly obrazek zanim poda wymiary?

[dopisane]
Mala poprawka. Widocznie na FF nie wyczyscilem dobrze cache. FF i Opera podaja wymiary 0x0. IE - podaje dobre.
[dopisane 2]
Ale sam zaznaczyles na poczatku, ze ma to byc pod IE :-)

0

Jednak IE nie czeka na pobranie...
W końcu osiągnąłem taki efekt jaki chciałem.

<script>
var myImg = new Image();
myImg.src = "http://www.marcreichelt.de/spezial/firefox/firefox_huge.png";
w=(myImg.width>300?300:myImg.width);
document.write("<img src=\""+myImg.src+"\" width=\""+w+"\" onclick=\"if ("+myImg.width+">300) { this.zm=!this.zm; this.width=(this.zm?"+myImg.width+":300)}\" ondblclick=\"this.onclick();\">");
</script>

Dziękuję wszystkim za pomoc ;-)

1 użytkowników online, w tym zalogowanych: 0, gości: 1