Entry
How can centralize two different images, one on top of the other,without knowing the correct sizes of the images??
Apr 29th, 2001 14:25
Colin Fraser, marco vranken,
There are two possible solutions, but this is obvious. I assume you want
to do an image swap so try:
<HTML>
<HEAD>
<SCRIPT>
//preload the images
if (document.images) {
arrowPink = new Image
arrowBlue = new Image
arrowBlue.src="image1.gif"
arrowPink.src="image2.gif"
} //end if
//This function performs the actual rollovers in the document and
//appears AFTER the above code
function chgImage (imgName,newImg ) {
if (document.images) {
document[imgName].src=eval(newImg+".src")
} //end if
} //end function
</SCRIPT>
</HEAD>
<BODY>
<SCRIPT>
document.write(" <p><table width=100% border=1>")
document.write(" <tr><td align=center>")
document.write("<a href=javascript:void
onMouseOver=chgImage('pic0','arrowPink')
onMouseOut=chgImage('pic0','arrowBlue')> <img src='image1.gif' border=0
name='pic0' alt='going nowhere'></a>")
document.write(" <p>One <p> Two")
document.write(" </td></tr>")
document.write(" </table>")
</SCRIPT>
</BODY>
</HTML>
<p>
This should work, the table is 100% width and the single cell aligns to
the centre. However, I discovered a very interesting effect which may
mean this is completely the wrong solution. In which case try :
<p>
In the
<HEAD>
<STYLE TYPE="text/css">
<!--
#parent1Div{position:absolute; left:0; top:250; width:100%;
text-align:center}
#child1Div{position:absolute; left:0; top:0;width:100%;
text-align:center; }
-->
</STYLE>
</HEAD>
In the body
<DIV ID="parent1Div">
<IMG src="image1.gif">
<DIV ID="child1Div">
<IMG src="image2.gif">
</DIV>
</DIV>
This will work, but you will not be pleased with the results if the
larger image is placed over the smaller image.
