css: zoom overlay on image thumbnail

I was thinking of an alternative method of doing this instead of the absolute positioning of another div. 

 <a href="image.png" class="screen-img" target="_blank">  
 <img src="image.png" width="100" />  
 </a>  

using this class:

 .screen-img {  
 display: inline-block;  
 margin-right: 5px;  
 background: #999 url(zoom.png) 50% 50% no-repeat;  
 height: 75px;  
 width: 100px;  
 img {  
 &:hover { opacity: 0.4; }  
 }  
 }  

The zoom.png is the magnify image, set as a background in the link tag.  So when the image is hovered, it will be a little transparent showing the magnify image from behind.

bonus: niffy code formatting gen for blogger - http://codeformatter.blogspot.ca/

extra space using position relative (css)

use negative margin instead.

html image mapping.. is it used in the web? part1

Image mapping is an interesting method of breaking down an image to display added information  like clicking to a link or offering more specific details on an image.

The common way it seeems to be used is by breaking the image and by hovering specific areas shows a specific detail for that area.  Recently I have come acrossed this method to try to recreate this nifty annotation widget I saw on a blogging site.  What the annotation does is it allows the user to click an area of the image and take a snapshot of it where the user can make a comment of that particular detail on the image.  Another way this is used where everyone is familiar with is the facebook photo tagging.

In my circumstance I mapped an image of a car, detailing each car part.  So when the user creates a snapshot it will also include the name of the part.

I'm still experimenting the whole thing.. more to come later.

AnkhSVN.. i can't remember everything.

This is a great free subversion program!

So how do I show SVN on Visual Studio?

1. Go to Tools > Options > Source Control > Plugin selection

2. Select "AnkhSVN – Subversion Support for Visual Studio"

3. Then press OK

done.

tabindex for popups

I've designed many forms with tab ordering and usually they are on the main browser window.  So the tabindex flows through each item with no issue.  But what if you have a popup window with a form?  Does the popup tabindex trump the tabindexes from the main window?  Yes it does actually but you would need to arrange you indexes so that the numbers are not the same as the ones from the main window.

So if in the main window the numbering is 1,2,3,..10
The popup ordering has to be a different set 20, 21, 22,..30

The More You Don't Know... SASS

When I first started to read more about CSS3 and HTML5, I thought that they were relatively new since browsers began catching up to them around 2009 (I have only started learning around 2012).  Today I have discovered that there are evolved ways for CSS, ie SASS.  SASS is a dynamic template to generate CSS.  It seems like it is a method to creating a more tidy css style sheet for a webpage/app/etc.  And it was developed in 2008. 

http://sass-lang.com/

Best way to remove Gum on clothing

I haven't posted in awhile but I haven't forgotten my blog site.  So here's another installment for new found treasure!

I recently had to remove some gum off from clothing and I tried three methods suggested on the internet.  One was freezing the clothing then scrap off the gum (not work), the other was ironing the gum to a cardboard piece of paper (not work either).  The last option I tried also the best and took the gum right off was soaking the clothing under hot water then brushing the gum off with a tooth brush.

I wish I did that first coz there was left over residue from the previous attempts and unfortunately unremovable.  Anyway hope this was helpful.