It is very easy to give a painting effect to images on your website. Just use simple CSS Sprite logic only or use PHP (or other scripting language like ASP etc.) with CSS Sprite to make it easy and more dynamic. Read more about this effect at Dynamic CSS Sprite implementation gives a Painting effect
Include following in your CSS Style Sheet
[css]
<style type="text/css">
.sprite-img-color { background-image : url(‘images/logo/kunal-bansal.jpg’); background-color : transparent; background-repeat : no-repeat;
cursor:url(images/img/paint-brush-drip.gif),auto;}
.sprite-img-bw { background-image : url(‘images/logo/kunal-bansal-bw.jpg’); background-color : transparent; background-repeat : no-repeat;
cursor:url(paint-brush.gif),auto;
}
</style>
[/css]
To change the cursor to a paint bursh, following code has been added to the style above
[css]
cursor:url(paint-brush.gif),auto;
[/css]
Change Painting Brush image according to your requirement.
Now, define each individual division of two images using CSS sprite (non-dynamic), something like:
[php]
//Code for Row 1 of image sprite
<div style=’clear:left;’>
<div id=’img_div_id_00′ class=’sprite-img-bw’ style=’width:20px; height:20px; background-position: -0px -0px; display:block; float:left;’
onmouseover=’document.getElementById("img_div_id_00").setAttribute("class", "sprite-img-color");’>
</div>
<div id=’img_div_id_01′ class=’sprite-img-bw’ style=’width:20px; height:20px; background-position: -20px -0px; display:block; float:left;’
onmouseover=’document.getElementById("img_div_id_01").setAttribute("class", "sprite-img-color");’>
</div>
<div id=’img_div_id_02′ class=’sprite-img-bw’ style=’width:20px; height:20px; background-position: -40px -0px; display:block; float:left;’
onmouseover=’document.getElementById("img_div_id_02").setAttribute("class", "sprite-img-color");’>
</div>
<div id=’img_div_id_03′ class=’sprite-img-bw’ style=’width:20px; height:20px; background-position: -60px -0px; display:block; float:left;’
onmouseover=’document.getElementById("img_div_id_03").setAttribute("class", "sprite-img-color");’>
</div>
<div id=’img_div_id_04′ class=’sprite-img-bw’ style=’width:20px; height:20px; background-position: -80px -0px; display:block; float:left;’
onmouseover=’document.getElementById("img_div_id_04").setAttribute("class", "sprite-img-color");’>
</div>
<div id=’img_div_id_05′ class=’sprite-img-bw’ style=’width:20px; height:20px; background-position: -100px -0px; display:block; float:left;’
onmouseover=’document.getElementById("img_div_id_05").setAttribute("class", "sprite-img-color");’>
</div>
<div id=’img_div_id_06′ class=’sprite-img-bw’ style=’width:20px; height:20px; background-position: -120px -0px; display:block; float:left;’
onmouseover=’document.getElementById("img_div_id_06").setAttribute("class", "sprite-img-color");’>
</div>
<div id=’img_div_id_07′ class=’sprite-img-bw’ style=’width:20px; height:20px; background-position: -140px -0px; display:block; float:left;’
onmouseover=’document.getElementById("img_div_id_07").setAttribute("class", "sprite-img-color");’>
</div>
<div id=’img_div_id_08′ class=’sprite-img-bw’ style=’width:20px; height:20px; background-position: -160px -0px; display:block; float:left;’
onmouseover=’document.getElementById("img_div_id_08").setAttribute("class", "sprite-img-color");’>
</div>
<div id=’img_div_id_09′ class=’sprite-img-bw’ style=’width:20px; height:20px; background-position: -180px -0px; display:block; float:left;’
onmouseover=’document.getElementById("img_div_id_09").setAttribute("class", "sprite-img-color");’>
</div>
</div>
//Code for Row 2 of image sprite
<div style=’clear:left;’>
<div id=’img_div_id_10′ class=’sprite-img-bw’ style=’width:20px; height:20px; background-position: -0px -20px; display:block; float:left;’
onmouseover=’document.getElementById("img_div_id_10").setAttribute("class", "sprite-img-color");’>
</div>
<div id=’img_div_id_11′ class=’sprite-img-bw’ style=’width:20px; height:20px; background-position: -20px -20px; display:block; float:left;’
onmouseover=’document.getElementById("img_div_id_11").setAttribute("class", "sprite-img-color");’>
</div>
<div id=’img_div_id_12′ class=’sprite-img-bw’ style=’width:20px; height:20px; background-position: -40px -20px; display:block; float:left;’
onmouseover=’document.getElementById("img_div_id_12").setAttribute("class", "sprite-img-color");’>
</div>
<div id=’img_div_id_13′ class=’sprite-img-bw’ style=’width:20px; height:20px; background-position: -60px -20px; display:block; float:left;’
onmouseover=’document.getElementById("img_div_id_13").setAttribute("class", "sprite-img-color");’>
</div>
<div id=’img_div_id_14′ class=’sprite-img-bw’ style=’width:20px; height:20px; background-position: -80px -20px; display:block; float:left;’
onmouseover=’document.getElementById("img_div_id_14").setAttribute("class", "sprite-img-color");’>
</div>
<div id=’img_div_id_15′ class=’sprite-img-bw’ style=’width:20px; height:20px; background-position: -100px -20px; display:block; float:left;’
onmouseover=’document.getElementById("img_div_id_15").setAttribute("class", "sprite-img-color");’>
</div>
<div id=’img_div_id_16′ class=’sprite-img-bw’ style=’width:20px; height:20px; background-position: -120px -20px; display:block; float:left;’
onmouseover=’document.getElementById("img_div_id_16").setAttribute("class", "sprite-img-color");’>
</div>
<div id=’img_div_id_17′ class=’sprite-img-bw’ style=’width:20px; height:20px; background-position: -140px -20px; display:block; float:left;’
onmouseover=’document.getElementById("img_div_id_17").setAttribute("class", "sprite-img-color");’>
</div>
<div id=’img_div_id_18′ class=’sprite-img-bw’ style=’width:20px; height:20px; background-position: -160px -20px; display:block; float:left;’
onmouseover=’document.getElementById("img_div_id_18").setAttribute("class", "sprite-img-color");’>
</div>
<div id=’img_div_id_19′ class=’sprite-img-bw’ style=’width:20px; height:20px; background-position: -180px -20px; display:block; float:left;’
onmouseover=’document.getElementById("img_div_id_19").setAttribute("class", "sprite-img-color");’>
</div>
</div>
[/php]
Similarly, write code for other rows of image sprite
Following code is being used so that when a mouse is taken over a Sprite Block, colored block comes up.
[php]
onmouseover=’document.getElementById("img_div_id_01").setAttribute("class", "sprite-img-color");’
[/php]
To do it dynamically using PHP implement the following code, otherwise as mentioned in non-dynamic you have to define so many DIV tags. But with PHP it can be done easily.
[php]
<?php
$img_width=200; //Define Image Width
$img_height=260; //Define Image Height
//If you don’t know it or want to implement dynamic images which have different dimensions and images changes, then use the PHP function to calculate width and height. Just specify the image path and use following function
//$img_path="directory path to// image";
//list($img_width, $img_height, $type, $attr) = getimagesize($img_path);
$img_cols=10; //number of columns in which image will be divided. i.e. number of blocks to form
$img_rows=13; //number of rows in which image will be divided. i.e. number of blocks to form
//More the number of cols and rows better paiting effect.
$img_blocks=$img_cols*$img_rows; //Total Number of blocks
$img_block_width=ceil($img_width/$img_cols,0); //Try to provide img_cols in such a way so that img_blocks comes to whole number
$img_block_height=ceil($img_height/$img_rows,0);
$img_block_width_px=$img_block_width."px";
$img_block_height_px=$img_block_height."px";
$img_div_id_arr=array();
for($i_col=0; $i_col{
echo "</pre>
<div style="clear: left;">";
for($i_row=0; $i_row {
$img_block_start_position=$i_row*$img_block_width;
$img_block_end_position=$i_col*$img_block_height;
$img_block_start_position_px=$img_block_start_position."px";
$img_block_end_position_px=$img_block_end_position."px";
$img_div_id="img_div_id_".$i_col.$i_row;
$img_div_id_arr[]=$img_div_id;
echo "
";
}
echo "</div>
<pre>
";
}
?>
[/php]