Image Swap with Text for Search Engine Optimization

This article is for CSS Image swap with text for SEO purpose. This article is also for the following reasons:
I need to create a template kind of system on a page, so that new row can be added easily without any new consideration of the styling. All image was not of the same size, so there was problem of alignment. Those were little bit different from each other and one image was completely different in size. I need to accommodate each. I do not want the link to extend to whole box (td). I just want it over image. It should work in major browsers, and it was most important.
There could be a better method of doing this. I am not a CSS guru but I got good solution after must try, so sharing it with you.
This code is not the exact code I have written for work, so there can be some difference came over.
Example code for Image swap with text for Search Engine Optimization

<style type="text/css">
.program {
font-size:1px;
margin:3px;
padding:3px;
}
.program-img-swap .img-swap
{
width:300px;
height:300px;
float:left;
background-position:center center;
background-repeat:no-repeat;
overflow:hidden;
}
.program-img-swap span {font-size:0px;}
/*
We can only provide image url for each program. If image size is different for any program then
we should provide size also.
*/
#program1 {
background-image:url('/wp-content/uploads/2009/11/satya-prakash_300284.jpg');
/*width:350px;
height:100px;*/
}
#program2 {
background-image:url('/wp-content/uploads/2009/11/satya-prakash_300312.jpg');
}
#program3 {
background-image:url('/wp-content/uploads/2009/11/satya-prakash_308318.jpg');
}
</style>

HTML for image swap example :

<table border=1 >
 <tr>
 <td>
 <a href="#">
 <p id="program2">
 <span>program two tag line for SEO; hidden behind image</span>
 &nbsp; <!-- space are important -->
 </p>
 </a>
 </td>
 <td>
 Satya Prakash - Open-Source enthusiast.
 </td>
 </tr>
 <tr>
 <td>
 <a href="#">
 <p id="program3">
 <span>program three tag line for SEO; hidden behind image</span>
 &nbsp; <!-- space are important -->
 </p>
 </a>
 </td>
 <td>
 Satya Prakash - who own this blog
 </td>
 </tr>
 <tr>
 <td>
 <a href="#">
 <p id="program1">
 <span>program one tag line for SEO; hidden behind image</span>
 &nbsp; <!-- space are important -->
 </p>
 </a>
 </td>
 <td>
 Satya Prakash - on PHP platform
 </td>
 </tr>
</table>

I do not want to extent the link to whole 'td'. I just want to get it over image. Check by mouse
hovering over the images on first two, link is there only.

Text behind image must be hidden for me.

&nbsp; <!-- space are important --> was required. Without I was facing
some problem in any browser. I do not remember.

My all images were not of exact size, but it need to look nice. So, images size is
mentioned in .program-img-swap .img-swap{}. It is here so that for each
images, I do not have to write size. #program1, #program2,.. are there
so that separate images can be provided for each box.

This all has created a template kind of system. Just copy the whole 'td' part and
change the paragraph's (p) id attribute. and create the css for each separate Id for
providing image.
Demo page of Swap Image with text.

  • # 1 - by SEO Services London

    That's a wonderful information..

    Thanks for sharing..

  • # 2 - by gisnap

    Its really cool, I came to know this really worth visiting, just bookmarked your site.

Comments are open for an year period. Please, write here on Facebook page.