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

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

Redirect to a desired page on click of submit/ cancel button in infopath form

By default, when a user clicks on Submit/Cancel button, the InfoPath list form redirects to the AllItems.aspx page of the list. Instead of redirecting the user to the default view of list, to redirect it to the desired page, append the URL of the InfoPath form with &Source=redirect-url http://xyzportal/..../xyzform.xsn&DefaultItemOpen=1 &Source=redirect-url Also, make sure that in the button properties, in the "Browser Forms" tab, "Always" option is selected.
Post a Comment
Read more