Why does my images shift using ONMOUSEOVER

<html>
<head>
<title>2017 element table</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link href="table.css" rel="stylesheet" type="text/css">
</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<!-- Save for Web Slices (2017 element table.psd) -->
<table id="Table_01" width="1101" height="722" border="0" cellpadding="0" cellspacing="0">
	<tr>
		<td>
			<img src="images/2017-element-table_01.png" width="115" height"115" onMouseOver="src='Elements Table - As.png';this.width=886;this.height=505;" onmouseout= "src='images/2017-element-table_01.png';this.width=115;this.height=115;"></td>
		<td colspan="18" rowspan="4">
			<img src="images/2017-element-table_02.png" width="868" height="242" alt=""></td>
		<td colspan="2">
			<img src="images/2017-element-table_03.png" onMouseOver="src='Elements Table - Sa.png'" onmouseout="src='images/2017-element-table_03.png'"></td>
		<td rowspan="4">
			<img src="images/2017-element-table_04.png" width="1" height="242" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="1" height="115" alt=""></td>
	</tr>
</table>
<!-- End Save for Web Slices -->
</body>
</html>

Welcome to the forums, @cranecasey.

“Shift” in what way? In your first cell, you are replacing an image with one of greater dimensions, so it can’t occupy the same space. (You also have a typo in that line, where you are missing the = in the height declaration.)

on the FIRST IMAGE in your source code, your onmouseover action changes the source AND SIZE of your image. try this: <img src="images/2017-element-table_01.png" width="115" height"115" onMouseOver="src='Elements Table - As.png';" onmouseout= "src='images/2017-element-table_01.png';">

hope that helps

Try not using tables in your html write-up. Learn how to use the float w/ divs.

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.