Script that auto resizes your picture to fit your screen [Archive]

View Full Version : 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 ;)

<!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:

<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:

<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? :rolleyes:

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

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

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:

<a href="#">I'm a link. Click me.</a>

CSS:

a:hover { color:red }

Tutorial on anchor pseudo-classes (http://www.echoecho.com/csslinks.htm)

WillAllon

04-12-2008, 11:19 PM

Hm Medyman, this doesn't seem to work with the Switch Content script ( i would like to make the headers change color, red maybe) that im using

Medyman

04-13-2008, 02:16 PM

Making links change color when you hover over them is different than changing the color of plain text.

Also, which "Switch Content" script are you talking about? I'm not sure if you're just mischaracterizing what rangana posted or if you have another script.

Lastly, you might want to upload your page someone and post a link. I suspect something is off with your HTML markup and/or CSS.

matthewbluewars

04-13-2008, 02:44 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?

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)
Here is my answer to the
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/ question.
Use this code:

<script type="text/javascript">
window.onload = load;
function load()
{
linkChange();
//Wire everything else below
}

function linkChange(){
//Set the hexadecimal color that the link would be changed to, in quotes (the one set now is orange)
var newColor = "FFCC33";
//Set the hexadecimal color that the link would be changed to, in quotes (the one set now is blue)
var oldColor = "0000FF";
var links = document.getElementsByTagName("a");
for (var i = 0;i < links.length; i++)
{
var curLink = links[i];
curLink.onmouseover = function()
{
curLink.style.color = newColor;
}
curLink.onmouseout = function()
{
curLink.style.color = oldColor;
}
}

}
</script>
Note that you could also use the hover attribute in CSS, like this: a.hover { color:FFCC33 }.

WillAllon

04-13-2008, 06:52 PM

http://home.euphonynet.be/euphoria/index1.htm

I would like the headers to change color if you hover over them (e.g [04/02/08] [TQ Digital] Hand In Hand Travel In TQ Games <-- if you hover over that i would like the color to change to red) but the scripts you guys gave me don't seem to work :s, i really appreciate the help tho

Medyman

04-13-2008, 07:13 PM

the scripts you guys gave me don't seem to work :s

That's because you're not doing it right.

Again, here is the HTML syntax that you need to use:

<a href="path/to/link">The text that you want to link</a>

That goes anywhere within the <body> tags of the page. The :hover pseudo class only reliably works across all browsers on anchor (<a>) elements. You could add the :hover pseudo class to other elements if you don't care about IE6 but what you need is a link anyway, so you should be using the anchor.

And here is the CSS. This needs to be added within the <style> tags that you have in the <head> section of your page.

a:hover { color:red }

Also while matthewbluewars' script probably works, I don't recommend going the javascript route for something that can be done so easily in CSS. It just presents a whole host of accessibility issues for no reason.

WillAllon

04-13-2008, 07:35 PM

Hm i think you guys are misunderstanding what im trying to do, probably because im not clear enough :s, sorry. This is what im trying to do :

http://home.euphonynet.be/euphoria/index1.htm

If you go to that link you'll see news headers like :

[04/02/08] [TQ Digital] Hand In Hand Travel In TQ Games
[03/31/08] [Zero Online] Get Your Easter Prizes!
[03/28/08] [Eudemons Online] Renaming Visual Effects & Win Your Eudemons!
[03/25/08] [Eudemons Online] 1 EP Only! For Item Lock And Item Unlock!
...

Now, if you hover over those news headers i would like them to change color, thats what i've been trying to explain :s, hope this is abit more clearer.

rangana

04-15-2008, 12:44 AM

A simple mistake you made is highlighted:

<style type="text/css">
.handcursor{
cursor:hand;
cursor:pointer;
}
</style>
<style>
a:hover { color:red }
</style>

Add type="text/css" or like this:

<style type="text/css">
.handcursor{
cursor:hand;
cursor:pointer;
}
a:hover { color:red }
</style>

Medyman

04-15-2008, 01:45 AM

Hm i think you guys are misunderstanding what im trying to do.

Actually, I don't think you're totally understanding our instructions.

Make the change that rangana point out but, as I stated in my previous post, a:hover only works on anchors.

So, instead of this (what you have now):

<span id="bobcontent18-title" class="handcursor">[04/02/08] [TQ Digital] Hand In Hand Travel In TQ Games</span>

change it to this:

<a id="bobcontent18-title" class="handcursor">[04/02/08] [TQ Digital] Hand In Hand Travel In TQ Games</a>

WillAllon

04-15-2008, 02:04 AM

I've changed it to

<a id="bobcontent18-title" class="handcursor">[04/02/08] [TQ Digital] Hand In Hand Travel In TQ Games</a>
and added

<style type="text/css">
.handcursor{
cursor:hand;
cursor:pointer;
}
a:hover { color:red }
</style>
But its still not working, so im thinking im still doing something wrong :s or it just won't work with the Switch Content script im using.

Btw guys, im really really thankful that you put up with all my questions :)

rangana

04-15-2008, 02:35 AM

Unluckily, your JS controls the color, then let's have a JS fix with this:

Add this script in the head section:

<script type="text/javascript">
window.onload=function()
{
var accept=document.body.getElementsByTagName('a');
for(var start=0;start<accept.length;start++)
{
accept[start].onmouseover=function()
{
for(var start=0;start<accept.length;start++)
{
accept[start].style.color='#222';
{
this.style.color='#f00';
}
}
}
}
}
</script>

See if it helps ;)

WillAllon

04-15-2008, 01:20 PM

ahahahahaha yes !!!! it works :D, thx sooo much :D

Medyman

04-15-2008, 01:22 PM

Unluckily, your JS controls the color

Ahh, didn't even think of that. Good catch rangana ;)

ahahahahaha yes !!!! it works :D, thx sooo much :D

Glad it finally worked for you. Sorry about the confusion. At least you know how to do simple links in that manner now (without using the Content Switcher Script :-p)

hmsnacker123

04-15-2008, 07:11 PM