i have an image that is posted on what is supposed to be a home page. Its source is on photobucket. I am trying to make the viewer have the option of zooming in, or enlarging the image just by clicking the mouse. The image posted on photobucket is at its maximum in which it was created, so would making it "bigger' essentially lower the quality? When Id prefer the opposite, a clearer, bigger perspective on the image..Sorry if this is stupid question. Thank you for any help.
well it's not hard to change the size of the picture when you click it. That doesn't address your question about image quality. If you want to create the impression of a zoom, you load the image at less than full resolution. Then, when the viewer clicks there is room to zoom in with no distortion. Does that make sense? to enlarge the image you simply reset the image's size property onmousedown.
It will be easier with javascript, you can also do it with css but it's unpractical. Set width and height (class="") of the image, make it a link and then a:hover and change the values of the width and height. Check this out nsftools.com/tips/ImageResize.htm
That's all CSS. There is no javascript in your post. Very nice script at the link though! Also the hover status will cause it to shrink again, which my original post will not. OP asked for a solution on click, though, not mouseover. The javascript, the CSS, and the DOM scripting properties like onClick ir onMouseDown are all just ways to address the DOM properties of the IMG object. each one allows you a different method of changing the property based on events. Dang, I'm doing an image site right now, I may make some use of that script. Thanks nacholibre.
Thank all you guys for all the help...looks like ive got my hands full with all this...when you mentioned CSS and Javascript, is one preferred over the other? Or one is needed and one is not? Any one simpler? thanks again!
CSS stands for Cascading Style Sheet, it's a file that tells the browser how to display the code on the Web page - that's the only thing it does. JavaScript is completely different, it's a scripting language that allows a Web developer to enhance a site, whether it's writing a cookie to your computer, making the internet window bounce around the page or just making a link flash in different colours when you hover over it. So, CSS is pretty much essential - JavaScript is more or less a luxury, definitely not essential. In response to your original question, unfortunately when you make an image larger it will lose its quality. The only work-around I think would be to post the smaller version on your website, and then when it's enlarged it can load the full size version whilst still keeping its quality. You should also host the image on your hosting account, as it can sometimes take a good few seconds for images to load - especially on huge image hosts like photobucket. To add the "enlarging" effect, you could use a simple Javascript such as the one demonstrated here: http://www.dynamicdrive.com/dynamicindex4/thumbnail.htm . Full instructions on how to implement can be found on that page.
thank you guys, this helped so much!! Another question for ya.. Lets say theres a gif image on a site with an email address displayed as part of the image. Is it possible to make just the email address clickable and open to a link, and not have the entire picture be clickable?
Yes, but it's a bit complicated. You could do something like this: <div id="tehemail"> <a href="mailto:theemail@address"></a> </div> #tehemail { width: the image width; height: the image height; background: url(theimage) 0 0 no-repeat; } #tehemail a { display: block; width: the width of the address part of the image (measure it); height: the height or a bit more of the address part; either use margins or positioning to set this anchor right over the part of the image with the address; } The problem with this setup is, no css, no link is clickable, because without content it will collapse to no height or width (or font-height in IE due to a bug). A way to fix this is a bit more complicated, either using Gilder-Levin image replacement to have the anchor have both text and a child with a copy of a part of the image, or you could have the anchor contain another image which is just the email address, still need to position it right over the exact part of the div element though so it looks like just one image: <div id="tehemail"> <a href="mailto:theemail@address"><img src="addresspart.png" alt="theemail@address"></a> </div> This way, there's real width on the anchor, so clickable in just about every instance, and alt text to tell those who can't see images what the email address is (and again makes the anchor large enough to be selected).
wow... I tried to create the email link as a slice with a rollover state in ImageReady, which totally worked, but when added to my files, I noticed it created 3 or 4 auto slices, which realigned things, and nothing would line up properly. The email address link on its own is 195px x 24px. It sits all the way at the bottom of the image. Would I have to do all this positioning with code? thanks for the help!!!!
Ah, don't let ImageReady do this for you, it'll make more gobbledygook than you would make doing it yourself... You have a normal image editor like Gimp, Photochop or PaintShopPro? Open the entire image in one of those. That will be your regular background image in your div (doesn't have to be a div but I don't know the context of your page). Write down the total height and width for adding to your CSS code. With a square selection tool, select the email address in the width and height of where you want the clickable area to be (have some space around the letters a bit). Note the height and width of this selection, and also what the top-left coordinate is (so you know where to set it relative to the main/original image). This'll be the height and width of your anchor, and its top and left position (either margins or absolute positioning or it could also be top and left padding on the parent div so long as you make that parent div smaller to account for added padding). Copy that selection as a new file, your anchor's background image. The rollover version should be exactly the same dimensions, and yes you can have that be a single image, rollover on the bottom and normal state on the top... if you do this, your anchor image will be the same width but twice as high of course. This is usually called CSS Sprites... read about them here: http://www.fiftyfoureleven.com/weblog/web-development/css/doors-meet-sprites and http://www.fiftyfoureleven.com/weblog/web-development/css/css-sprites-images-optimization (you could get fancier and do all this with one image but I'm wondering if what I'm talking about now exceeds your CSS level). Now you can just stuff your original image in the div/parent, and stuff your new anchor image in the anchor, and then like I said, there are a couple of ways you can move that anchor. Prolly the easiest way is #thediv { position: relative; } #thediv a { position: absolute; left: the left coord; top: the top coord; } something like that; obviously this isn't all the code you need, just the positioning code.
oh man...my head hurts form reading that...lol.. well, unfortunately, I dont have any of the image editors you mentioned... I do most of that in Photoshop...so not sure how that affects the rest of that suggestion.. So lets say the image is 419px (wide) x 906px (height). This was the size that I originally wanted the image, and wanted it to be "clickable", to enlarge to 495px x 1070px. (hence my initial post)..Im mostly challenged in CSS currently with positioning...So although I will definitely make an attempt, at all of this, its likely to be a banging head against the wall issue...(lol).. Not sure what your thought are on not using those image editors.. thanks you again!!!
Photochop is my bastardisation of Photoshop, lawlz. You want the image to become larger after being clicked, but not actually go anywhere? Or is it a real link? If it's the former (clicking to enlarge only) then re-read the tips from the first two people who answered your post... because usually when you want something to happen "when someone clicks..." means Javascript. CSS can do a lot, but except in some browsers who keep the focus on something that's just been clicked, you don't do things like enlargement "on click" with CSS. That's Javascript duty. It kinda sounds like you want some complicated version of CSS rollovers with Javascript enlargement or something... rollovers are one thing (the image seems to change when the mouse (OR the focus) sits on the area in question) and things growing onclick are another.
ya i mean maybe i wasnt clear...i didnt need it to be a link to take you someplace else. I just wanted the viewer to have the option to "zoom" into it by clicking the mouse..