I have created a graphic in photoshop with 22 layers some with Hyperlinks created using _blank to force the students to open them in a new tab.
I am trying to use this image as my homepage on Canvas.
I saved the document as HTML and Images to my computer. I uploaded the image slices to Canvas. I navigated to and found all of the Image Id numbers and IMG SRC codes for the image slices on Canvas.
I changed the Img Src in the HTML code to reflect the images saved in Canvas. The images and links pull up.
HOWEVER, the spacing of my original image does follow the actual image all of the slices are off.
I am uploading my HTML file and image examples:
This is the image from Photoshop
Here is the image on canvas:
Here is my HTML coding:
<html>
<head>
<title>Profile</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<!-- Save for Web Slices (Profile.psd) -->
<table id="Table_01" width="833" height="1793" border="0" cellpadding="0" cellspacing="0">
<tr>
<td colspan="9">
<img id=6853007" src="https://tulsaps.instructure.com/courses/90532/files/6853007/preview" alt="1.gif" width="832" height="516" alt=""></td>
<td>
<img id="6853006" src="https://tulsaps.instructure.com/courses/90532/files/6853006/preview" alt="spacer.gif" width="1" height="516" alt=""></td>
</tr>
<tr>
<td colspan="9">
<a href="https://tulsaps.instructure.com/courses/90532" target="_blank">
<img id="6853008" src="https://tulsaps.instructure.com/courses/90532/files/6853008/preview" alt="2.gif" width="832" height="81" border="0" alt=""></a></td>
<td>
<img id="6853006" src="https://tulsaps.instructure.com/courses/90532/files/6853006/preview" alt="spacer.gif" width="1" height="81" alt=""></td>
</tr>
<tr>
<td colspan="9">
<img id="6853009" src="https://tulsaps.instructure.com/courses/90532/files/6853009/preview" alt="3.gif" width="832" height="75" alt=""></td>
<td>
<img id="6853006" src="https://tulsaps.instructure.com/courses/90532/files/6853006/preview" width="1" height="75" alt=""></td>
</tr>
<tr>
<td colspan="3">
<a href="https://tulsaps.instructure.com/courses/90532/modules" target="_blank">
<img id="6853010" src="https://tulsaps.instructure.com/courses/90532/files/6853010/preview" alt="4.jpg" width="292" height="114" border="0" alt=""></a></td>
<td colspan="2">
<a href="https://docs.google.com/spreadsheets/d/12CXLUtFD0L77KUBe70xJw5lF94y_1Ds9KgoquyVxIec/edit#gid=1050590..." target="_blank">
<img id="6853011" src="https://tulsaps.instructure.com/courses/90532/files/6853011/preview" alt="5.png" width="258" height="114" border="0" alt=""></a></td>
<td colspan="4">
<a href="mailto:crispti@tulsaschools.org" target="_blank">
<img id="6853012" src="https://tulsaps.instructure.com/courses/90532/files/6853012/preview" alt="6.jpg" width="282" height="114" border="0" alt=""></a></td>
<td>
<img id="6853006" src="https://tulsaps.instructure.com/courses/90532/files/6853006/preview" width="1" height="114" alt=""></td>
</tr>
<tr>
<td>
<a href="https://tulsaps.instructure.com/courses/90532/assignments/syllabus" target="_blank">
<img id="6853013" src="https://tulsaps.instructure.com/courses/90532/files/6853013/preview" alt="7.gif" width="184" height="179" border="0" alt=""></a></td>
<td colspan="3">
<a href="https://tulsaps.instructure.com/courses/90532/pages/welcome-letter" target="_blank">
<img id="6853014" src="https://tulsaps.instructure.com/courses/90532/files/6853014/preview" alt="8.gif" width="194" height="179" border="0" alt=""></a></td>
<td colspan="2">
<a href="https://rogers.tulsaschools.org/school-calendar" target="_blank">
<img id="6853015" src="https://tulsaps.instructure.com/courses/90532/files/6853015/preview" alt="9.gif" width="177" height="179" border="0" alt=""></a></td>
<td colspan="2">
<a href="https://tsaweb.org/tsa" target="_blank">
<img id="6853016" src="https://tulsaps.instructure.com/courses/90532/files/6853016/preview" alt="10.gif" width="182" height="179" border="0" alt=""></a></td>
<td>
<a href="https://www.linkedin.com/in/timothy-w-crisp-jr-m-s-75126513b/" target="_blank">
<img id="6853017" src="https://tulsaps.instructure.com/courses/90532/files/6853017/preview" alt="11.gif" width="95" height="179" border="0" alt=""></a></td>
<td>
<img id="6853006" src="https://tulsaps.instructure.com/courses/90532/files/6853006/preview" width="1" height="179" alt=""></td>
</tr>
<tr>
<td colspan="9">
<img id="6853018" src="https://tulsaps.instructure.com/courses/90532/files/6853018/preview" alt="12.gif" width="832" height="127" alt=""></td>
<td>
<img id="6853006" src="https://tulsaps.instructure.com/courses/90532/files/6853006/preview.gif" width="1" height="127" alt=""></td>
</tr>
<tr>
<td colspan="2">
<a href="https://curriculum.code.org/csp-20/" target="_blank">
<img id="6852996" src="https://tulsaps.instructure.com/courses/90532/files/6852996/preview" alt="13.gif" width="274" height="273" border="0" alt=""></a></td>
<td colspan="4">
<a href="https://research.google.com/colaboratory/" target="_blank">
<img id="6852997" src="https://tulsaps.instructure.com/courses/90532/files/6852997/preview" alt="15.gif" width="281" height="273" border="0" alt=""></a></td>
<td colspan="3" rowspan="2">
<a href="http://web.stanford.edu/class/cs101/index.html" target="_blank">
<img id="6852998" src="https://tulsaps.instructure.com/courses/90532/files/6852998/preview" alt="15.jpg" width="277" height="278" border="0" alt=""></a></td>
<td>
<img id="6853006" src="https://tulsaps.instructure.com/courses/90532/files/6853006/preview" width="1" height="273" alt=""></td>
</tr>
<tr>
<td colspan="2" rowspan="2">
<a href="https://login.live.com/login.srf?wa=wsignin1.0&rpsnv=13&rver=7.3.6963.0&wp=MBI_SSL&wreply=https%3a%2..." target="_blank">
<img id="6852999" src="https://tulsaps.instructure.com/courses/90532/files/6852999/preview" alt="16.gif" width="274" height="281" border="0" alt=""></a></td>
<td colspan="4" rowspan="2">
<a href="https://www.thingiverse.com/" target="_blank">
<img id="6853000" src="https://tulsaps.instructure.com/courses/90532/files/6853000/preview" alt="17.gif" width="281" height="281" border="0" alt=""></a></td>
<td>
<img id="6853006" src="https://tulsaps.instructure.com/courses/90532/files/6853006/preview" width="1" height="5" alt=""></td>
</tr>
<tr>
<td colspan="3">
<a href="https://rogers.tulsaschools.org/" target="_blank">
<img id="6853001" src="https://tulsaps.instructure.com/courses/90532/files/6853001/preview" alt="18.gif" width="277" height="276" border="0" alt=""></a></td>
<td>
<img id="6853006" src="https://tulsaps.instructure.com/courses/90532/files/6853006/preview" width="1" height="276" alt=""></td>
</tr>
<tr>
<td colspan="2">
<a href="https://twitter.com/TulsaWillRogers" target="_blank">
<img id="6853002" src="https://tulsaps.instructure.com/courses/90532/files/6853002/preview" alt="19.gif" width="274" height="46" border="0" alt=""></a></td>
<td colspan="5">
<a href="https://www.facebook.com/TulsaWillRogersSchool" target="_blank">
<img id="6853003" src="https://tulsaps.instructure.com/courses/90532/files/6853003/preview" alt="20.gif" width="283" height="46" border="0" alt=""></a></td>
<td colspan="2">
<a href="https://tulsaps.instructure.com/courses/38292" target="_blank">
<img id="6853004" src="https://tulsaps.instructure.com/courses/90532/files/6853004/preview" alt="21.gif" width="275" height="46" border="0" alt=""></a></td>
<td>
<img id="6853006" src="https://tulsaps.instructure.com/courses/90532/files/6853006/preview" width="1" height="46" alt=""></td>
</tr>
<tr>
<td colspan="9">
<img id="6853005" src="https://tulsaps.instructure.com/courses/90532/files/6853005/preview" alt="22.gif" width="832" height="100" alt=""></td>
<td>
<img id="6853006" src="https://tulsaps.instructure.com/courses/90532/files/6853006/preview" width="1" height="100" alt=""></td>
</tr>
<tr>
<td>
<img id="6853006" src="https://tulsaps.instructure.com/courses/90532/files/6853006/preview" width="184" height="1" alt=""></td>
<td>
<img id="6853006" src="https://tulsaps.instructure.com/courses/90532/files/6853006/preview" width="90" height="1" alt=""></td>
<td>
<img id="6853006" src="https://tulsaps.instructure.com/courses/90532/files/6853006/preview" width="18" height="1" alt=""></td>
<td>
<img id="6853006" src="https://tulsaps.instructure.com/courses/90532/files/6853006/preview" width="86" height="1" alt=""></td>
<td>
<img id="6853006" src="https://tulsaps.instructure.com/courses/90532/files/6853006/preview" width="172" height="1" alt=""></td>
<td>
<img id="6853006" src="https://tulsaps.instructure.com/courses/90532/files/6853006/preview" width="5" height="1" alt=""></td>
<td>
<img id="6853006" src="https://tulsaps.instructure.com/courses/90532/files/6853006/preview" width="2" height="1" alt=""></td>
<td>
<img id="6853006" src="https://tulsaps.instructure.com/courses/90532/files/6853006/preview" width="180" height="1" alt=""></td>
<td>
<img id="6853006" src="https://tulsaps.instructure.com/courses/90532/files/6853006/preview" width="95" height="1" alt=""></td>
<td></td>
</tr>
</table>
<!-- End Save for Web Slices -->
</body>
</html>
