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