Script that auto resizes your picture to fit your screen

**WillAllon** · 04-10-2008, 05:18 PM

Hi, im looking for a script that automatically resizes pictures to fit your screen and if you click on the picture it will resize back to its original size. (kinda like photobucket or imageshack)

**Medyman** · 04-10-2008, 08:55 PM

You could use a javascript script that changes the CSS class of something (google for a ton of ways to do it).

Then, have one class with width:100% and one with width:auto;

100% would make the image as wide as the container that it's in. auto would make it it's real size.

**WillAllon** · 04-11-2008, 01:18 AM

Could you give me abit more info please :s, i didn't really understand what you just said.

**rangana** · 04-11-2008, 01:36 AM

Does this help

HTML Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>::: Please Give me a title</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
img.small{width:300px;}
img.large{width:100%;}
</style>
<script type="text/javascript">
window.onload = function()
{
	var obj=document.getElementById('wrap').getElementsByTagName('img');
	for(var start=0;start<obj.length;start++)
		{obj[start].onclick=function() 
			{this.className = (this.className != 'small')? 'small': 'large';}
		}
}
</script>
</head>
<body>
<div id="wrap">
<img src="http://www.digitalphotoguides.com/tuts/background-removal.jpg" class="large"/>
</div>
</body>
</html>

**Medyman** · 04-11-2008, 03:43 AM

WillAllon,

What rangana posted is what I'm talking about (assuming everything works. he probably tested it, so i'm guessing it does).

Basically what's happening is this:

in it's initial presentation on the page, the image is assigned a CSS class of small. This class limits the size of the image to certain dimensions. These can be either absolute dimensions (width:200px; height:400px

, proportioned dimensions (width:200px OR height:400px), or flexible dimensions (width:20%).

Now, when you click on the image, the class of the image changes from small to large. The large version doesn't have any constraints on the image's dimensions, so it will show up as it's original height/width.

A couple of changes that you'll want to make to rangana's script:
1) Change the initial class from large to small. You probably want the restricted version to appear first.

You can change it here:
<img src="http://www.digitalphotoguides.com/tuts/background-removal.jpg" class="large"/>

2) In the CSS, change the large style block to have width:auto. 100% will make it 100% of it's container not it's original size.

HTH

**WillAllon** · 04-12-2008, 12:04 AM

wow sweet, thx guys, appreciate it

, works perfectly

**matthewbluewars** · 04-12-2008, 12:27 AM

Make the id of the image "img". Use this javascript to resize the image to the size of the screen:

Code:

<script type="text/javascript">
//Set the original width of the picture
var originwidth = 100;
//Set the original height
var originheight = 100;
var idImg = document.getElementById("img");
window.onload = function() {
resizeImg(document.body.clientHeight - 100, document.body.clientWidth - 100, idImg);
}
window.onresize = function() {
resizeImg(document.body.clientHeight - 100, document.body.clientWidth - 100, idImg);
}
      function resize(width, height, elem) {
        elem.style.height = height;
        elem.getElementById("img").style.width = width;
elem.onclick = function(evt) { resize(originwidth, originheight, idImg); }
}
</script>

**rangana** · 04-12-2008, 12:54 AM

One obvious mistake is:

Code:

<script type=""text/javascript>
window.onload = resizeImg(document.body.clientHeight - 100, document.body.clientWidth - 100);
window.onresize = resizeImg(document.body.clientHeight - 100, document.body.clientWidth - 100);
      function resizeImg(width, height) {
        document.getElementById("img").style.height = height;
        document.getElementById("img").style.width = width;    
}


</script>

...Also, when do you want it to resize to it's original size BTW?

...Maybe you want a button..or what...If you're on the decision already, just use the image's id:

Code:

document.getElementById("img").style.height = '300px';
document.getElementById("img").style.width = '300px'

Hope that helps

**WillAllon** · 04-12-2008, 10:51 PM

I would like to have an image (kinda like a magnifier glas) when they hover over the resized image.

So if i want to use images i add this code?

document.getElementById("img").style.height = '300px';
document.getElementById("img").style.width = '300px'

Also, since i don't want to start a new thread, i'm also looking for a script that highlights certain links when you hover over them (kinda like this site : http://us.91.com/ (The links below the HEADLINE section, not the images that turn yellow when you hover over them, the links that are blue-ish but turn orange-ish if you hover over them)

**Medyman** · 04-12-2008, 11:10 PM

Originally Posted by WillAllon

Also, since i don't want to start a new thread, i'm also looking for a script that highlights certain links when you hover over them (kinda like this site : http://us.91.com/ (The links below the HEADLINE section, not the images that turn yellow when you hover over them, the links that are blue-ish but turn orange-ish if you hover over them)

That's basic CSS.

HTML:

HTML Code: