Skip to main content

Flip Images on hover in Sharepoint 2010

Add a CEWP in the page and then use the CSS class to achieve the hover effect. These images can also be made links.
There can be more than one image and put in a table format in CEWP

<table width="462" height="250" align="center" style="background-color: black"><tbody><tr><td style="width: 25%"><div class="example one"><div class="wrapper"><a href="#"><img src="<image url>" alt=""/></a> </div></div></td>
<td style="width: 25%"><div class="example two"><div class="wrapper"><a href="#"><img src="<image url>" alt=""/></a> </div></div></td>
<td style="width: 25%"><div class="example three"><div class="wrapper"><a href="#"><img src="<image url>" alt=""/></a> </div></div></td>
<td style="width: 25%"><div class="example four"><div class="wrapper"><a href="#"><img src="/<image url>" alt=""/></a> </div></div></td></tr></tbody></table>

The CSS is below
CSS Class
.example.one a {display:block; width:230px; height:125px; background:url('http://<imageurl>') left top no-repeat;}
.example.one a:hover img {position:absolute; left:-999em; top:-999em;}
.example.one a:hover {zoom:1;}
.example.one a:link img {border:none;}
.example.two a {display:block; width:230px; height:125px; background:url('http://<imageurl>') left top no-repeat;}
.example.two a:hover img {position:absolute; left:-999em; top:-999em;}
.example.two a:hover {zoom:1;}
.example.two a:link img {border:none;}
.example.three a {display:block; width:230px; height:125px; background:url('http://<imageurl>') left top no-repeat;}
.example.three a:hover img {position:absolute; left:-999em; top:-999em;}
.example.three a:hover {zoom:1;}
.example.three a:link img {border:none;}
.example.three a {display:block; width:230px; height:125px; background:url('http://<imageurl>') left top no-repeat;}
.example.four a:hover img {position:absolute; left:-999em; top:-999em;}
.example.four a:hover {zoom:1;}
.example.four a:link img {border:none;}

Comments

Post a Comment

Popular posts from this blog

Cannot open SharePoint 2010 Approval task form from Outlook

When trying to click on Open this task from Outlook 2010, it brings an error - " Outlook cannot open a new form. The form contains schema validation errors" Element '{ http://www.w3.org/1999/xhtml}div ' is unexpected according to the content model of parent element '{ http://schemas.microsoft.com/office/infopath/2009/WSSList/dataFields}Body '. As given in the error message, the issue is with the Body column of the workflow tasks list. For the approval workflow, there would be a tasks list. In the workflow task list, the Body column is Enhance Rich multi-line column. Change the setting to Plain text, instead of enhanced rich text. After that do an iisreset.
7 comments
Read more

How to link to Download a copy option in Office 365/SharePoint 2013

At times it is required to have the option to save a copy of a document uploaded in SharePoint document library, in a page or a webpart. The url to get the save option for a doc is - http:// site /_layouts/download.aspx?SourceUrl= url-of-document-in-library Change the bold text with the actual url, i.e., with the site url and the url to the doc in the doc library. For example, if the site is www.contso.com and the doc "Test" is uploaded in SiteAssets library, the url to save a copy would be - http://contso.com/_layouts/download.aspx?SourceUrl=http://contso.com/SiteAssets/Test.docx
1 comment
Read more

Display a Thank You message at the end of survey form in Sharepoint 2010

A quick and easy way to display a Thank you message at the end of survey for submitting the form. At the end of last question, insert a page breaker. After the page breaker, add the Thank you message as a question, and select the type Single line of text. Enter the default value as "Internal". Go to the survey form and click on Respond to Survey. Click Next and in the Editform url in the browser, append &ToolPaneView=2 to the end of URL. Add a CEWP to the below of the page and insert the below code, in HTML source or else paste the code in a text file uploaded to sharepoint library and refer to the text file. (referring the text file is preferred) <script> // hide the input textbox for the "thank you " message  var x = document.getElementsByTagName("INPUT");  var i=0;  for (i=0; i<x.length; i++)  {   if (x[i].value=="Internal")   {     x[i].style.display="none";   }  }  </script> Save the page. Respo...
1 comment
Read more