Printable Version of Topic

Click here to view this topic in its original format

HTMLHelp Forums _ General Web Design _ image size

Posted by: lisas Mar 7 2017, 10:50 PM

I have an image that I edited in photoshop to make the text into links for the webpage I am building. In Photoshop I chose 'Save for web and devices' as my output. I copied the code in the html file Photoshop created and pasted it in the top of each of the webpages for my site. The only problem is Photoshop resized the image; before it (almost) covered the width of the page and I can't fix it in Frontpage. The image slices created in photoshop don't all resize the same. How can I get the image's size back to what is was before Photoshop?

line of code before Photoshop of image:

<code>
<p align="center"><img border="0" src="jb%20Landing.jpg" width="841" height="387"></p>
<code>

Code Photoshop created:

<code>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>jb Landing</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
</head>
<body bgcolor="#FFFFFF">
<!-- Save for Web Slices (jb Landing.jpg) -->
<table id="Table_01" width="437" border="0" cellpadding="0" cellspacing="0">
<tr>
<td colspan="5">
<img id="jb_Landing_01" src="images/jb-Landing_01.jpg" width="437" height="113" alt="" /></td>
</tr>
<tr>
<td rowspan="6">
<img id="jb_Landing_02" src="images/jb-Landing_02.jpg" width="9" height="147" alt="" /></td>
<td>
<a href="G:\~~~jbac test ~03-07-2017~~~\johnbondac5\index.htm"
onmouseover="window.status='Home Page'; return true;"
onmouseout="window.status=''; return true;">
<img id="jbx20Landing_03" src="images/jb-Landing_03.jpg" width="44" height="22" border="0" alt="" /></a></td>
<td colspan="3">
<img id="jb_Landing_04" src="images/jb-Landing_04.jpg" width="384" height="22" alt="" /></td>
</tr>
<tr>
<td colspan="2">
<a href="G:\~~~jbac test ~03-07-2017~~~\johnbondac5\Products & Services.htm"
onmouseover="window.status='Products & Services'; return true;"
onmouseout="window.status=''; return true;">
<img id="jbx20Landing_05" src="images/jb-Landing_05.jpg" width="137" height="23" border="0" alt="" /></a></td>
<td colspan="2">
<img id="jb_Landing_06" src="images/jb-Landing_06.jpg" width="291" height="23" alt="" /></td>
</tr>
<tr>
<td colspan="3">
<a href="G:\~~~jbac test ~03-07-2017~~~\johnbondac5\Service Request Form.htm"
onmouseover="window.status='Service Request Form'; return true;"
onmouseout="window.status=''; return true;">
<img id="jbx20Landing_07" src="images/jb-Landing_07.jpg" width="152" height="21" border="0" alt="" /></a></td>
<td rowspan="4">
<img id="jb_Landing_08" src="images/jb-Landing_08.jpg" width="276" height="102" alt="" /></td>
</tr>
<tr>
<td colspan="2">
<a href="G:\~~~jbac test ~03-07-2017~~~\johnbondac5\Media & Feedback.htm"
onmouseover="window.status='Media & Feedback'; return true;"
onmouseout="window.status=''; return true;">
<img id="jbx20Landing_09" src="images/jb-Landing_09.jpg" width="137" height="20" border="0" alt="" /></a></td>
<td rowspan="3">
<img id="jb_Landing_10" src="images/jb-Landing_10.jpg" width="15" height="81" alt="" /></td>
</tr>
<tr>
<td>
<a href="G:\~~~jbac test ~03-07-2017~~~\johnbondac5\FAQ.htm"
onmouseover="window.status='FAQ'; return true;"
onmouseout="window.status=''; return true;">
<img id="jbx20Landing_11" src="images/jb-Landing_11.jpg" width="44" height="22" border="0" alt="" /></a></td>
<td rowspan="2">
<img id="jb_Landing_12" src="images/jb-Landing_12.jpg" width="93" height="61" alt="" /></td>
</tr>
<tr>
<td>
<img id="jb_Landing_13" src="images/jb-Landing_13.jpg" width="44" height="39" alt="" /></td>
</tr>
</table>
<!-- End Save for Web Slices -->
</body>
</html>
<code>

Posted by: pandy Mar 8 2017, 09:22 AM

Do you still have the original image?

Slicing images isn't done very often today. Is the text in a fancy font? If not, you can just place an ordinary text link on top of the image. That's better for many reasons.

Powered by Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)