In the following script, I have used a table to make the images align to the bottom of the table border where the image grow UP when moused over.
How do I accomplish the same thing with CSS in the 'Container'?
I want the images to be initially lined up along the bottom and then 'grow' when moused over.
I cannot figure how to set the bottom of the image to the bottom of the "Container".
Code:
<html>
<head>
<title>Roll-over image enlarger</title>
<style type="text/css">
#Container { height:200px; width:400px; border:1px solid blue; }
#pic1, #pic2, #Cpic1, #Cpic2 { height:125px; width:100px; bottom-margin:0px; }
</style>
<script type='text/javascript'>
// From: http://www.dreamincode.net/forums/showtopic136650.htm
var oheight = 125;
var owidth = 100;
var nheight = Math.floor(oheight*3/2); // scaling factor of 1.5
var nwidth = Math.floor(owidth*3/2);
function popImg(open,pic) {
if (open) {
document.getElementById(pic).style.height = nheight+'px';
document.getElementById(pic).style.width = nwidth+'px';
} else {
document.getElementById(pic).style.height = oheight+'px';
document.getElementById(pic).style.width = owidth+'px';
}
}
</script>
</head>
<body>
<!-- One method that works -->
<table border="1"><tr><td valign="bottom" height="200" width="400">
<img src="http://www.nova.edu/~rumsey/snoopy.gif" id="pic1"
onmouseover="popImg(true,this.id);" onmouseout="popImg(false,this.id);">
<img src="http://www.nova.edu/~rumsey/BanjBird.GIF" id="pic2"
onmouseover="popImg(true,this.id);" onmouseout="popImg(false,this.id);">
</td></tr></table>
<!-- -->
<div id="Container">
<img src="http://www.nova.edu/~rumsey/snoopy.gif" id="Cpic1"
onmouseover="popImg(true,this.id);" onmouseout="popImg(false,this.id);">
<img src="http://www.nova.edu/~rumsey/BanjBird.GIF" id="Cpic2"
onmouseover="popImg(true,this.id);" onmouseout="popImg(false,this.id);">
</div>
</body>
</html>
11-06-2009, 10:01 PM
Align images to bottom of container.
Linear Mode
