I want to have a similar page to this, whereby the image is resized to fit in the browser, but when you click on the image it shows it in full size.
I assume you will have to do this with Javascript, but I don't have a clue how. I'd appreciate any help with this. You should study the source of the page. I don't know if you know javascript, but if you do you probably can find out how to do it.
Look especially at this:
| Code: |
<script type="text/javascript">var actualWidth = 1600;var actualHeight = 1200;
function scaleImg() {if (fitsInWindow())return;what = document.getElementById('thepic');if(what.width==tableWidth()) {what.width=actualWidth;what.height=actualHeight;displayWarning("none");}else{what.style.cursor = "pointer";what.width=tableWidth();what.height = (actualHeight/actualWidth) * what.width;displayWarning("block");}}function liveResize() {if (fitsInWindow())return;what = document.getElementById('thepic');if (what.width!=actualWidth) {what.width=tableWidth();what.height = (actualHeight/actualWidth) * what.width;displayWarning("block");}}function setImgWidth() {if (fitsInWindow())return;document.getElementById('thepic').width=tableWidth();displayWarning("block");}
function fitsInWindow() {
if (actualWidth<tableWidth()) {
displayWarning("none");
document.getElementById('thelink').removeAttribute('href');
return true;
} else {
document.getElementById('thelink').setAttribute('href','http://imageshack.us/?x=my6&myref=http://www.frihost.com/forums/vt-64008.html');
return false;
}
}
function tableWidth() {return windowWidth()-100;}function windowWidth() {if (navigator.appName=="Netscape")return window.innerWidth;return document.body.offsetWidth;}function displayWarning(how) {document.getElementById('scalewarning').style.display=how;}onresize=liveResize;</script>
<a href="http://imageshack.us/?x=my6&myref=http://www.frihost.com/forums/vt-64008.html" id="thelink" onclick="return fitsInWindow();"><img id="thepic" onclick="scaleImg()" src="http://img223.imageshack.us/img223/237/waterfall084ml8.jpg" title="Click to visit ImageShack for Image Hosting!" alt="img223/237/waterfall084ml8.jpg" /></a><script type="text/javascript">setImgWidth();</script></td></tr></table><br /><div align="center">
|
(Sorry, for the horrible layout. Before looking at it you should use a text editor to add some newlines) When I first started trying to learn how to web design, the first thing I did was copy and paste cool designs that people did from their source. Then try to duplicate it.
It truly is the easiest way to learn the tricks. Once you understand the idea well enough, look up some tutorials on the scripting language used for it, and sure enough, with some dedication you begin to understand it.
Thanks for the advice.
I don't know JavaScript, so looking at the code is pretty meaningless at the moment. I also don't want to just rip off someone else's code without permission, after all this is their work and copyrighted.
Does anyone know of any free scripts that I can use to achieve this?
That's PHP.
Just learn some basic code from java, or learn some php. Just learn how to detect resolutions.
IT's quite easy.
If you know what resolution... then all you have to do is put it to that size.
Unless... they are not in full window, then in that case, you have to know window size.
It's really easy. Try it.
GOOD LUCK and have fun
Nothing about php. Simple html...
There is table and in the middle cell there's the picture. It has the tags "width=100% height=100%".
You can test that easily without tables or any style.
just get a picture, that is bigger than your screen and write this in your htmlfile
| Code: |
| <img src="picture.jpg" width=100% height=100%> |
Then resize your browserwindow and you'll see the effect. | TomS wrote: |
Nothing about php. Simple html...
There is table and in the middle cell there's the picture. It has the tags "width=100% height=100%".
You can test that easily without tables or any style.
just get a picture, that is bigger than your screen and write this in your htmlfile
| Code: | | <img src="picture.jpg" width=100% height=100%> |
Then resize your browserwindow and you'll see the effect. |
TomS, you are a genius! OK, it doesn't do quite what I want it to, but I'm sure I can click between 2 pages showing it as I want to. I'll play with this and see if I can get it working.
Thanks again! 
omg...
i didn't know percentages worked...
I used percentages for a banner once and it went stupid. I'm just stupid then
That code works just fine.
haha us stupid people recomending php and java!~
haha, but if you're gonna like have something to differenciate between the horizontal and vertical images, then i'd recommend some java or php.
I don't think HTML can do that.
