6.Adding Image album with image enlarge or mouse hoovering or expando effectTo day we are going to learn how to Arrange images in table with "mouse hoovering effect"
(Please continue reading if you already activated Expando or mouse hoovering effect to your blog else first read my post "Adding Expando Effect to your images")
Step1:-upload all images, this step create the Html code for images in “Edit Html”
Step2:-Copy the following code at top of the Html code
<style type="text/css">.nobrtable br { display: none }</style>
<div class="nobrtable"><table><tbody><tr><td>
Step3:-A).For your convenience separate or give space between
onblur="try {pare and <img style="cursor: pointer; width: 97px; height: 103px;" src="http://
B)Replace <img style with <img class="expando" styleBefore replace image
After replace image 
Step4:-immeadiately after </a>close and open the cell with </td> <td> 
Step5:-change the size of the image to half.., means if height and width of image is width: 120px; height: 100px; make it as width: 60px; height: 50px;
Repeat the process for all images.
Step6:-if you want to display two images table then add
<tr> at the first image starting and close it after two images with </tr>
Step7:-Close the table with
</tbody></table> and style type with </div>
Demo
 |  | |
 |  | |
 |  | |
 |  |
Tags:
0 comments:
Post a Comment