Many a times, you have too many pictures and so small space in your blog. This is so often seen, even in a news article. You do not want users scroll to see all your pictures, do you?

Here is a solution. Well, the solution has been there for quite some time, i did not see the source yet, so i built it tonight. You are free to use, if possible, please do give us a link. (P.S. If you know me personally, i can even host your image.)

What do we have here? Two panels - one showing links and the other a picture bucket.

I know people can be so lazy to even click, yours truly is a living example for that. So, we have made it in to a onmouseover. So, you have to just place your mouse over each link to open up the image in the picture bucket near by. We use javascript for this.

On the OnMouseOver call, we send the file name to the script. The path is already present in the script. (This is a good coding style, you always have to send minimum parameters to the function.)

Just move your mouse over each name to see a pic on the right frame.

Image sources :wikipedia

Here is the actual code:

This makes up for the image bucket on the right.

<div id = “total_container” width = “450″ style = “max-width:450px;”>
<div id = “the_pic_div” width = “200″ height = “200″ style = “float:right;”>
<img src=”http://codeinsane.com/pics/Kobe_Bryant.jpg” id = “the_pic_frame” width = “200″ height = “190″ >
</div>

And this makes up for the links, though i am not showing the styles here.

<div id = “the_image_links” style = “float:left;”>
<ul>
<li><a href=”#” OnMouseOver = “setImage (’Kobe_Bryant.jpg’)”>Kobe Bryant</a></li>
<li><a href=”#” OnMouseOver = “setImage (’David_Beckham.jpg’)”>David beckham</a></li>
<li><a href=”#” OnMouseOver = “setImage (’Maurice_Greene.jpg’)”>Maurice greene</a></li>
<li><a href=”#” OnMouseOver = “setImage (’David_Ortiz.JPG’)”>David Ortiz</a></li>
<li><a href=”#” OnMouseOver = “setImage (’Eminem_rapper.JPG’)”>Marshall Mathers</a></li>
<li><a href=”#” OnMouseOver = “setImage (’alexander.jpg’)”>Alexander</a></li>
</ul>
</div>

And this small script makes up the rotation portion. You may like to have it in the same file, coz it is just a few lines of code.

<script language = “javascript”>
var url = “http://codeinsane.com/pics/”
function setImage (img_name)
{
//alert (”img_name :” + img_name);
var full_path = url + img_name;
var bucket = document.getElementById (’the_pic_frame’);
//alert (full_path);
bucket.src = full_path;
}
</script>

Hope, you have a nice show with your pictures, As always, need some help, ask the sane coder.