Where/How do we place/refer to images in SharePoint 2010 WebParts

The location of images in SharePoint 2010 Project/web part

This one is especially useful for the new bie because when you start with building webparts for SharePoint 2010, you often come to a point where you wanna add a URL somewhere, lets say programatically or in the CSS or may be in the ASCX code and you wonder, hey wait a minute where are the images for SharePoint placed anyway? How do I refer to them? So here’s your answer.

What you do is that you Right Click the Web parts project > Add > SharePoint “Images” Mapped Folder option. Doing that will give you an images folder inside your project directory and you can refer to that like this:

“~/_layouts/Images/ProjectNamesETC/xyz.png”

Have fun!

Hover effect on input type=image element

I was thinking about putting a hover effect on ASP .NET’s Imagebutton Control and well, first thing I did is that I found out what it gets rendered into. So I found out that it gets rendered into an input type=image Html tag. I used a technique of putting a hover effect with sprite images. It’s just that you put an image that actually has two images for the two states of the button, one for the hover mouse state and one for the normal state. And through CSS you just change the value of margin-top value of the div that contains that input tag and it gives the effect of a hovering image. Below is the CSS, the sample image and the HTML code for you.

#backbutton
{ cursor:pointer;
height:34px;

_height:34px; /*for IE 7 only*/

overflow:hidden;
width:99px;
}

#backbutton:hover input
{
margin-top:-33px;
}
#nextbutton
{
cursor:pointer;
height:33px;
overflow:hidden;
width:99;
}

#nextbutton:hover input
{
margin-top:-33px;
}
#nextbutton:hover img
{
margin-top:-33px;
}

---

<table cellspacing=”5″>
<tr>
<td>
<div id=”backbutton”>
<input type=”image” src=”images/backonoff.jpg” />
</div>
</td>
<td>
<div id=”nextbutton”>
<%–<input type=”image” src=”images/nextonoff.jpg” />–%>
<img src=”images/nextonoff.jpg” id=”Button2″ alt=”Next” onclick=”SaveFinalCard();” />
</div>
</td>
</tr>
</table>

---

http://blog.josh420.com/archives/2008/07/using-sprite-images-with-input-typeimage-for-hover-effect.aspx

How to change the mouse pointer to a hand with CSS

hello there,

there are some scenarios where u want to change the mouse pointer to the one that looks like a hand, you know like the one u get when you hover over a link. Sometimes its pretty useful when you’re thinking about making a popup window that would come up when you click on a link, by the way, when you do such a thing you put some javascript in the onclick event and with that you want to give the user a feeling that he/she’s clicking on a hyperlink. So this is a sample class I’ve made

All you need to do is to use the Cursor:pointer; property and walllah, u got it

.mousetoHand
{
color:#5B3C1D;
font-family:Arial;
font-size:12pt;
cursor:pointer;
text-decoration:none;

}

How to Left, Right, Center Align With CSS

http://www.communitymx.com/content/article.cfm?cid=529B0

http://www.ehow.com/how_2284643_left-right-center-align-css.html

body {
width: 80%;
margin-right: auto;
margin-left: auto;
border: 1px solid black;

}

.container {
position: relative;
height: 50px;
}

.left-element {
position: absolute;
left: 0;
width: 50%;
}

.right-element {
position: absolute;
right: 0;
width: 50%;
text-align: right; /* depends on element width */
}

Download Samples