image size onload in IE
in [JavaScript]
|
Prev: FAQ Topic - How can I disable the back button in a web browser? (2010-02-15)
Next: how does recaptcha get around XSS protection?
From: rf on 15 Feb 2010 18:34 "jeff" <jeff_thies(a)att.net> wrote in message news:hlch9k$q4m$1(a)news.albasani.net... > This is all a simple product image viewer with a magnifier. It's just a a > large movable image in a div with the overflow hidden so the image is > "clipped": > > html looks like this: > > <div class="product_image" style="position: relative;width: 400px; height: > 400px;overflow: hidden"> > ... > > <img src="/images_products/my_large_image.jpg" id="magnified" > style="display: none;position: absolute;" onload="setLimits(this)" > > > </div> > > The magnified image id is changed by changing the source: > > document.getElementById('magnified').src = '/path_to_new_image'; > > The function setLimits, just reads the image width and height so I can > center the image and know where the edges are. Why do you need to do this? Just centre the image using CSS and let the browser do the work. > I've put up a version of the actual code, this being a site in > development: > > http://theceramicknifestore.com/test_magnifier.html In IE6 (and IE7) you have an invalid argument on this line: magnified.style.top = '-' +parseInt(magnifier.magnifier_limit_y/2) + 'px';
From: jeff on 15 Feb 2010 19:10
rf wrote: > "jeff" <jeff_thies(a)att.net> wrote in message > news:hlch9k$q4m$1(a)news.albasani.net... > >> This is all a simple product image viewer with a magnifier. It's just a a >> large movable image in a div with the overflow hidden so the image is >> "clipped": >> >> html looks like this: >> >> <div class="product_image" style="position: relative;width: 400px; height: >> 400px;overflow: hidden"> >> ... >> >> <img src="/images_products/my_large_image.jpg" id="magnified" >> style="display: none;position: absolute;" onload="setLimits(this)" > >> >> </div> >> >> The magnified image id is changed by changing the source: >> >> document.getElementById('magnified').src = '/path_to_new_image'; >> >> The function setLimits, just reads the image width and height so I can >> center the image and know where the edges are. > > Why do you need to do this? Just centre the image using CSS and let the > browser do the work. Many reasons. First I still need to know the image width as I need to know when to stop being able to drag the image. I didn't realize you could center an image in a smaller container than it is, I'll test for my own curiosity. But assuming that was possible, it is impossible to vertically center in IE6 and IE7, neither understands either display: table cell, or vertical-align: middle. I had earlier considered using background images, as they center cross browser, but had discarded that for other reasons. > >> I've put up a version of the actual code, this being a site in >> development: >> >> http://theceramicknifestore.com/test_magnifier.html > > In IE6 (and IE7) you have an invalid argument on this line: > magnified.style.top = '-' +parseInt(magnifier.magnifier_limit_y/2) + 'px'; Thanks, bad way to make a negative, it didn't work when I did this: magnified.style.top = parseInt(magnifier.magnifier_limit_y/-2) + 'px'; > > > |