Hope this basic example keeps you going:
HTML Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title></title>
<style type="text/css">
*{margin:0px;padding:0px;}
#wrap{width:700px;margin:20px auto;}
table{background:#555;}
img{width:200px;height:150px;}
td{background:#fff;width:200px;text-align:center;height:100px;}
</style>
<script type="text/javascript">
window.onload=function(){
for(var i=0,img=document.getElementById('wrap').getElementsByTagName('img');i<img.length;i++)
{
if(img[i].getAttribute('id')){
img[i].onmouseover=function(){
document.getElementById(this.getAttribute('rel')).src=this.src;}
img[i].onmouseout=function(){
document.getElementById(this.getAttribute('rel')).src='http://h1.ripway.com/rangana/images/'+this.className+'.jpg';}
}
}
}
</script>
</head>
<body>
<div id="wrap">
<table cellspacing="1px">
<tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td></tr>
<tr><td>7</td><td>8</td><td>9</td><td>10</td><td>11</td><td>12</td></tr>
<tr><td>13</td><td><img src="http://h1.ripway.com/rangana/images/Picture4.jpg" alt="mypic" id="i14" rel="i23" class="Picture7">14</td><td>15</td><td>16</td><td>17</td><td>18</td></tr>
<tr><td>19</td><td>20</td><td>21</td><td>22</td><td><img src="http://h1.ripway.com/rangana/images/Picture7.jpg" alt="myheart" id="i23" rel="i14" class="Picture4">23</td><td>24</td></tr>
</table>
</div>
</body>
</div>
Important attributes are:
- id - give your image element a unique identifier
- rel - the rel attribute will be your target id (the id of the image you want to change).
- class - this should be the same as to your original image's source name (without extension).
New Comer (less than 5 posts)
changing and image in another cell/location
Posting Permissions
Reply With Quote
Bookmarks