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

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

Audit Log Reports issue in sharepoint 2010

When enabling audit log reports, there were a couple of issues faced, given below 1.        I could not find the Audit Log Reports link in Site Collection Administration. Enabled it using stsadm as given in the below link How to enable the audit log reports link - http://www.danielbrown.id.au/Lists/Posts/Post.aspx?List=276dae61%2D6562%2D4ad1%2D8ca5%2Dba66c07b0cff&ID=47&Web=8a2513e7%2D4048%2D450e%2Dbd08%2Dea5ab59830ef 2.        When trying to generate audit reports or when trying to click Browse to select the location, I was getting an error "An unexpected error has occurred” with a correlation id. a.        As mentioned in sites, I checked in ULS logs for the description – The ULS logs can be found in C:\Program Files\Common Files\Microsoft Shared\Web Server Extensions\14\LOGS b.       There was an exception related to Search c.   ...
6 comments
Read more