Although I am new to Sharepoint, I have experience in HTML and CSS. I recently created a mini HTML application that changes the pictures of hyperlinks on hover. It works perfectly when run on a normal browser outside of Sharepoint.
However, the issue arises when I try to embed the code in a rich field within Sharepoint. Despite working in "edit mode", the code does not function after saving. Additionally, Sharepoint generates an "ExternalClass" next to each of my CSS objects once saved. Could this be the reason why my code is not working after saving? What modifications is Sharepoint making to my HTML code? Is there a solution to this problem? Any guidance would be greatly appreciated.
Original:
<style type="text/css">
#map
{
width:663px;
height:715px;
background-image:url("/sites/00172/SiteAssets/Germany1-Standard.png");
}
#Bremen
{
position:absolute;
width:37px;
height:53px;
top:359px;
left:243px;
background-image:none;
}
// Remaining CSS code omitted for brevity
<div id="map">
<a href=...>
</a>
// Remaining html code omitted for brevity
</div>After Saving in Sharepoint:
<style unselectable="on">
AFC97320FBA74F4E88F2B1AD1F833E02 .ExternalClass #map {
width:663px;
height:715px;
}
// Omitted CSS for other elements due to space constraints
</style>
<div id="map" unselectable="on">
<a title="Bremen" id="Bremen" href="/sites/00172/Lists/Calendar01/calendar.aspx">
</a>
// Omitted html code for other links for conciseness
</div>