Embed a Power. Point presentation into HTMLI got so sick of trying all of the different options to web host a power point that were flaky or required flash so I rolled my own. My solution uses a very simple javascript function to simply scroll / replace a image tag with GIFs that I saved from the Power Point presentation itself. In the power point presentation click Save As and select GIF. Pick the quality you want to display the presentation at. Power Point will save one GIF image for each slide and name them Slide. GIF, Slide. 2. GIF, etc... Now when we want to get the HTML code we can simply do following. Alternative embed methods. Using the object tag with the commercial player. Create a HTML page and add a image tag to display the Power point GIF images.< img src="Slide. GIF" id="main. Image" name="main. Image" width="1. 00%" height="1. ![]() Add some first, previous, next and last clickable objects with the on. Click action as below: < a href="#" onclick="swap. Image(0); "> < img src="/images/first. First"> < /a>. Image(current. Index- 1); "> < img src="/images/left. Back"> < /a>. Image(current. Index+1); "> < img src="/images/right. Next"> < /a>. Image(max. Index); "> < img src="/images/last. Last"> < /a>. Finally, add the below javascript function that when called grabs the next Slide. GIF image and displays it to the img tag.< script type="text/javascript">. Initilize start value to 1 'For Slide. GIF'. var current. Index = 1. //NOTE: Set this value to the number of slides you have in the presentation. Index=1. 2. function swap. Image(image. Index){. Check if we are at the last image already, return if we are. Index> max. Index){. Index=max. Index. Check if we are at the first image already, return if we are. Index< 1){. current. Index=1. return. current. Index=image. Index. Otherwise update main. Image. document. get. Element. By. Id("main. Image"). src='Slide' + current. Index + '. GIF'. return. Make sure the GIFs are reachable from the HTMl page. They are by default expected to be in the same directory but you should be able to see the logic and how to set to a image directory if required. I have training material up for my company that uses this technique at http: //www. I hope this helps someone else out there who is having as much headaches with this as I did...
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. Archives
October 2016
Categories |