I opened a thread on ee for this and was give some suggestions:
http://www.experts-exchange.com/Web_Development/Blogs/Q_27227996.html
I tried implementing the example in the first link. I added the following code
to the blog layout:
(Go to Design->Edit Html and check "Expand Widget Templates")
/* Custom image code */
#picture {width:100px; height: 250px; background-color:#ffffff;}
#picture a.small, #picture a.small:visited { display:block; width:100px;
height:100px; text-decoration:none; background:#ffffff; top:0; left:0;
border:0;}
#picture a img {border:0;}
#picture a.small:hover {text-decoration:none; background-color:#000000;
color:#000000;}
#picture a .large {display:block; position:absolute; width:0; height:0;
border:0; top:0; left:0;}
#picture a.small:hover .large {display:block; position:absolute; top: 90px;
left:150px; width:700px; height:500px; z-index:9999; }
/* End custom image */
Here's the code that I put into the actual blog post:
<div id="picture">
<a class="small"
href="http://2.bp.blogspot.com/-ZJcU39ZQp2c/TjMhhy1ZHqI/AAAAAAAADtY/Y9B8gSf-dI4/
s1600/fireshot-7-29.png" onblur="try {parent.deselectBloggerImageGracefully();}
catch(e) {}"><img style="display:block; margin:20px auto 10px;
text-align:center;cursor:pointer; cursor:hand;width: 400px; height: 264px;"
src="http://2.bp.blogspot.com/-ZJcU39ZQp2c/TjMhhy1ZHqI/AAAAAAAADtY/Y9B8gSf-dI4/s
400/fireshot-7-29.png" border="0" alt=""
id="BLOGGER_PHOTO_ID_5634884423235739298" />
<img class="large"
src="http://2.bp.blogspot.com/-ZJcU39ZQp2c/TjMhhy1ZHqI/AAAAAAAADtY/Y9B8gSf-dI4/s
1600/fireshot-7-29.png" title="large image" />
</a>
</div>
A couple of issues with this method:
1) (minor) both the larger and smaller image appear when previewing the post in
blogger - this may actually be considered a good thing.
2) The formatting of the smaller image is messed up - it isn't center and
sometimes interferes with the following text.
3) the z-index property doesn't work in ie.
4) From playing around with this, it appears that a lot of manually work will
have to be done for each method to get the proportions and spacing right.
Original issue reported on code.google.com by hastapas...@gmail.com on 29 Jul 2011 at 10:05
Original issue reported on code.google.com by
hastapas...@gmail.com
on 29 Jul 2011 at 10:05