PDA

View Full Version : Image with links



jcdesigns
03-22-2011, 09:49 PM
Does anyone know how to create a jpeg or any image format with links. I need to create an flyer for my facebook business page with links. You can only use images in facebook. See the example link below. thanks

http://www.facebook.com/pageprogressive

bokanegro
03-22-2011, 11:09 PM
hi,

Something like this:


<a href="path/to/you/location/"><img src="path/to/your/image.jpg" alt="" /></a>

You can add ID or CLASS to ( A or IMG ) tag, that way you can apply additional style to those tags

auntnini
03-22-2011, 11:41 PM
I have not tried to add images to Facebook. Trying to add images to various blogs is a pain. But I wonder if slicing an image in Photoshop or Illustrator (which creates a <TABLE> layout) and/or creating a "Hot spots" MAP in Deamweaver would answer your request.

From Photoshop HELP




Display the Slice Options dialog box

Do one of the following:

Double-click a slice with the Slice Select tool.
With the Slice Select tool active, click the Slice Options button in the options bar. This method is not in the Save For Web & Devices dialog box.
Specify a slice content type

You can specify how the slice data appears in a web browser when exported with an HTML file. The available options vary according to the slice type you select.

Image slices contain image data. This is the default content type.
No Image slices let you create empty table cells that can be populated with text or a solid color. You can enter HTML text in a No Image slice. If you set the "Text is HTML" option in the Save for Web & Devices dialog box, the text is interpreted as HTML when viewed in a browser. Slices of type No Image aren't exported as images and can be previewed in a browser.
Note: Setting options for an auto slice promotes the slice to a user slice.
Select a slice. If you are working in Photoshop, double-click the slice with the Slice Select tool to display the Slice Options dialog box.
In the Slice Options dialog box, select a slice type from the Type pop‑up menu.






<html>
<head>
<title>Untitled-1</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body bgcolor="#FFggaa" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<!-- Save for Web Slices (Untitled-1) -->
<table id="Table_01" width="504" height="360" border="0" cellpadding="0" cellspacing="0" align="center">
<tr>
<td colspan="5">
<img src="images/sliced_01.gif" width="504" height="47" alt=""></td>
</tr>
<tr>
<td rowspan="3">
<img src="images/sliced_02.gif" width="45" height="313" alt=""></td>
<td colspan="3">
<a href="http://www.auntnini.com" target="_blank"
onmouseover="window.status='Hey there!'; return true;"
onmouseout="window.status=''; return true;">
<img src="images/sliced_03.gif" width="380" height="98" border="0" alt="Go to AuntNiNi's Corner"></a></td>
<td rowspan="3">
<img src="images/sliced_04.gif" width="79" height="313" alt=""></td>
</tr>
<tr>
<td>
<img src="images/sliced_05.gif" width="114" height="160" alt=""></td>
<td>
<img src="images/sliced_06.gif" alt="" width="153" height="160" border="0" usemap="#Map"></td>
<td>
<img src="images/sliced_07.gif" width="113" height="160" alt=""></td>
</tr>
<tr>
<td colspan="3">
<img src="images/sliced_08.gif" width="380" height="55" alt=""></td>
</tr>
</table>
<!-- End Save for Web Slices -->

<map name="Map">
<area shape="circle" coords="92,96,59" href="#">
</map>
</body>
</html>



Either way (neither of which I like), you can create links from parts of the image.