*EDIT*
AHHHH ok, I found I have a problem, it adjusts itself to 100% of the screen width and height, not the image height. This will at least get you started untill I can fix this problem.
*/EDIT*
ok, I got it mosty working now, the only thing it doesnt do is shrink other images, so the page can grow big.
Please see the comments in the code and if you are confused please let me know and I can exsplain em.
Anything in red is what you can change.
Code:
<html>
<head>
<style type="text/css">
div.img1 {
height:10%;
width:10%;
}
div.img2 {
height:10%;
width:10%;
}
</style>
<script type="text/javascript">
function Grow(elementID)
{
var whPerc; //Variable that holds the current height and width %
var minSize = 10; //Set this as the minimum size in % that you want the image i.e. "10" = 10%
var state; //Variable that holds wether the image is growing or shrinking at the time of the click
//Find out if the image is small or full size
if(document.getElementById(elementID).style.width == "" || document.getElementById(elementID).style.width == null || document.getElementById(elementID).style.width == "10%")
{
//Set the minimum size
whPerc=minSize;
state="Grow";
}
else
{
//Tells the script if the image is full size to shrink it back to the minSize
whPerc= 100;
state="Shrink";
}
//This starts the grow/shrink, Set the 2nd parameter in miliseconds on
//how fast or slow you want the image to grow to full size
//i.e. a value of 10 will increase the size of 10% (step) every 10 miliseconds
var interval= window.setInterval(scaleStep, 10);
return false;
function scaleStep()
{
var div = document.getElementById(elementID);
var step = 10; //Sets the % that the image grows by everytime scaleStep is called.
div.style.width = whPerc + "%";
div.style.height = whPerc+ "%";
if(document.getElementById("img1").style.width != "110%" && state=="Grow")
{
whPerc += step;
}
else if(document.getElementById("img1").style.width != "0%" && state=="Shrink")
{
whPerc -= step;
}
if(whPerc > 100 || whPerc < minSize)
{
window.clearInterval(interval);
return true;
}
}
}
</script>
</head>
<body>
<div id='img1' class='img1' onClick='Grow("img1");'>
<img height='100%' width='100%' src='name.jpg' />
</div>
<div id='img2' class='img2' onClick='Grow("img2");'>
<img height='100%' width='100%' src='name.jpg' />
</div>
</body>
</html>
You will need a surrounding div to make this work.
Everything in blue in the div/image block of code needs to be the same. This is because it uses the style sheet with the element name to gather a few parameters.
Code:
<div id='img1' class='img1' onClick='Grow("img1");'>
<img height='100%' width='100%' src='name.jpg' />
</div>
You can also have th mouse over thing as well, but there is a qwerk that makes the image grow shrink if you invoke the mouse out (leave the image) while the image is growing, it will grow its max and min very rapidly as long as the mouse moves.
The code for this as follows. The blue still needs to have the same name though.
Code:
<div id='img1' class='img1' onMouseOver='Grow("img1");' onMouseOut='Grow("img1");'>
<img height='100%' width='100%' src='name.jpg' />
</div>
I hope this works for you
Wesley