FRIHOST FORUMS SEARCH FAQ TOS BLOGS COMPETITIONS
You are invited to Log in or Register a free Frihost Account!


Fitting an Image to the Browser





SoftStag
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.
MrBlueSky
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&amp;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&amp;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)
Requell
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.
SoftStag
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?
Dragate
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
TomS
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.
SoftStag
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! Very Happy
Dragate
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.
Related topics
A "small" list of free apps
PHP Tutorials
phbb skin
234 productions
Proactively connecting Apache to the browser
Transparent background image
How to make a image view from bluring to sharp ?
image php sripting that made a image refreshed every loaded
php / javascript script works in FireFox browser, but not IE
Vertical Menu behind on Flash HEader
Windows Vista
Great free photo editor
Best software for screen shots...
Problem with hover over images in slimbox.js
Reply to topic    Frihost Forum Index -> Webmaster and Internet -> Design Tips

FRIHOST HOME | FAQ | TOS | ABOUT US | CONTACT US | SITE MAP
© 2005-2011 Frihost, forums powered by phpBB.