when hover at different text the image at the center will change - css

Question

I am doing a website about the property plan, my customer required that when their customer hover on the text, the image at the center will change, is there any method that can do by using only css?
<div>
<img src="http://www.ucl.ac.uk/news/news-articles/1213/muscle-fibres-heart.jpg" class="imgcenter">
<table class="plantable">
<tbody>
<tr>
<td style="color:#469785;">Type <b>E</b></td>
<td style="color:#9BB8A0;">Type <b>F</b></td>
<td style="color:#9DB77F;">Type <b>G</b></td>
<td style="color:#9FA278;">Type <b>G1</b></td>
<td style="color:#C9AE77;">Type <b>H</b></td>
</tr>
</tbody>
</table>
</div>
When the user hover at Type E, the imgcenter will change to image E, when the user hover at Type G, the imgcenter will change to image G, how can i do that?
Here is the solution that i found which can be use
http://fiddle.jshell.net/tbz9nL4g/
<style>
.hover_image {position:relative;}
.hover_image .img1{position:absolute; display:none; z-index:99;}
.hover_image:hover .img1{display:block;}
.hover_image .img2{position:absolute; display:block; z-index:99;}
.hover_image:hover .img2{display:none;}
</style>
<div>
<a href="#" class="hover_image"> link text
<span class="img1"><img src="http://www.imagingshop.com/images/sharptone/hdr-2.jpg" /></span>
<span class="img2"><img src="http://www.gettyimages.co.uk/gi-resources/images/Homepage/Category-Creative/UK/UK_Creative_462809583.jpg" />
</span>
</a>
</div>
However there is some problem regarding this coding, which when I add another text, this code unable to work
http://fiddle.jshell.net/tbz9nL4g/2/

Answer 1

Use the data attribute to store data-img in a tag and use that on hover
//js
$('a').hover(function(e){
if(e.type==='mouseenter' || e.type==='mouseover'){
$('.imgcenter').prop({'src':$(this).data('img')});
}else if(e.type==='mouseleave'){
$('.imgcenter').prop({'src':$('.imgcenter').data('img')});
}
})
img{width:300px;height:300px;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<img data-img="http://www.ucl.ac.uk/news/news-articles/1213/muscle-fibres-heart.jpg" src="http://www.ucl.ac.uk/news/news-articles/1213/muscle-fibres-heart.jpg" class="imgcenter" />
<table class="plantable" border=1>
<tbody>
<tr>
<td style="color:#469785;"><a data-img="http://www.ucl.ac.uk/news/news-articles/1213/muscle-fibres-heart.jpg" href="">Type <b>E</b></a></td>
<td style="color:#9BB8A0;"><a data-img="http://www.rodalesorganiclife.com/sites/rodalesorganiclife.com/files/images/animal_bird_300.jpg" href="">Type <b>F</b></a></td>
<td style="color:#9DB77F;"><a data-img="https://sanaakosirickylee.files.wordpress.com/2012/05/chirping-birds.jpg" href="">Type <b>G</b></a></td>
<td style="color:#9FA278;"><a data-img="http://img1.cookinglight.timeinc.net/sites/default/files/image/2005/09/0509p113-bird-m.jpg" href="">Type <b>G1</b></a></td>
<td style="color:#C9AE77;"><a data-img="http://orig10.deviantart.net/6a53/f/2012/074/3/0/profile_picture_by_birds_love_us_all-d4sv1v2.jpg" href="">Type <b>H</b></a></td>
</tr>
</tbody>
</table>
</div>