inserting html document with hyperlinks into email

WJ
Posted By
Wendy j Chapman
Jul 31, 2003
Views
1382
Replies
27
Status
Closed
Hello,
I have created an 8×10 size document in InDesign – newsletter style with photos and text. Then I export it as an EPS so I can open it in Photoshop and save it as a JPG. Then, I go to my email (Microsoft Outlook) and insert the JPG newsletter into the body of the email. I want to insert versus attaching it. I want the image to appear instantaneously when the email is opened. And, I also want the recipent of the email to be able to click on a hyperlink within my JPG newsletter. I have created hyperlinks using Photoshop and Image Ready, but then it is an HTML document. So, can I insert this HTML document into my email? When I tried the link was broken. I am sure I am doing this the long way, so any suggestions would be greatly appreciated. Thanks!

How to Improve Photoshop Performance

Learn how to optimize Photoshop for maximum speed, troubleshoot common issues, and keep your projects organized so that you can work faster than ever before!

Y
YrbkMgr
Jul 31, 2003
Create an HTML page based on your image. Use it as a stationary in Outlook.
WJ
Wendy j Chapman
Jul 31, 2003
I tried to insert the document as stationary, but all the links were still broken. I can see the boxes defining the slices I made in Image Ready, but again, the links are x-ed out. Maybe I am saving the file incorrectly from Image Ready?
DM
dave milbut
Jul 31, 2003
you need to host the images somewhere and make sure your links point at that server.
CW
Colin Walls
Jul 31, 2003
Wendy:

What Dave is saying is: when an email has "embedded" images, they are actually on a Web server somewhere. The email just contains hyperlinks to that place. So, the first thing to establish is: do you have somewhere to store [=host] them?
WJ
Wendy j Chapman
Jul 31, 2003
Continuing to prove my ignorance….
Yes, I have a place to store my images. I can post them on my company’s "extranet" if I can’t save them on my hard drive. I have embedded images using InDesign and Illustrator, but have not considered it in regards to email.
CW
Colin Walls
Jul 31, 2003
The point is: an HTLM email is just like a Web page. It’s a bunch of HTML, which manifests itself as text on the screen and pulls other stuff [like images] of the Internet. So, in constructing one, that’s the approach you need to take. It’s one of these things that’s more complex than it appears.
Y
YrbkMgr
Jul 31, 2003
So, it goes like this.

Use Front Page or your favorite HTML Editor, and create a web page. Add your JPG and your links to the HTML page.

Use an FTP Program to put the JPG and any other graphic elements on your server, make sure your HTML page references the location on the server.

Then save the HTML page. In MS Outlook Tools|Options|Mail Format, use HTML, use the stationary picker, click New, and go navigate to the location of the HTML page.

That will be your new stationary, an HTML page, that references graphics items on your server.
WJ
Wendy j Chapman
Jul 31, 2003
Thanks! I will give it a shot.
WJ
Wendy j Chapman
Aug 15, 2003
Ok, I have tried and tried numerous things and have been very frustrated. I saved Optimized As and made my file an html document and then went to Microsoft Outlook and attempted to make this file my stationary. This did not work. All my slices were broken. I do not know how to write html code (although attempting to learn using Evrsoft’s 1st Page 2000). Pouring over the Adobe Photoshop manual, web tutorials, etc. it seems that an html editor is the only way to do this. Also, when I make slices, IR creates additional slices around the remaining image. How can I avoid all these unneeded slices? What do I do after I have saved my file Saved Optimized As?
P
Phosphor
Aug 15, 2003
Pouring over the Adobe Photoshop manual, web tutorials, etc. it seems that an html editor is the only way to do this.

Most people would use a program like Dreamweaver for this, or perhaps code by hand.

Did you upload your images to your extranet? If not, then you’re still going to get those broken links! Also, check that your links aren’t pointing at the local version of your images.
P
Phosphor
Aug 15, 2003
I think you’re getting there Wendy- sometimes it can take a while for the penny to drop, but it will, I promise!

If you’re using slices to make your links (instead of an image map), IR should have chopped your original image up into lots of bits for you. It’s these bits which you need to upload to the server (extranet). The html will link to these, not your original jpeg.

Have a go at that and see if it works 🙂
WJ
Wendy j Chapman
Aug 15, 2003
I tried an image map as I liked that it did not create all the extra slices. But I couldn’t get the image maps to work either. Also, in the manual it says that for basic optimization, saving as GIF, JPG, PNG or WBMP means that I will loose web features such as slices, links, rollovers. So I am confused after reading that. Also, whether I use slices or image maps, I need to load these images to my server, right? These images are in the images file that automatically gets created, right? Assuming I do that right and it works, how then do I get the whole thing inserted into the body of my email?
P
Phosphor
Aug 15, 2003
These images are in the images file that automatically gets created, right?

Should be- and it’s these images that you need to upload to the server (extranet).

The final step is to take the html file that IR created while making those slices, and make that into your e-mail. (You can do this by making it e-mail stationery- there’s plenty of help how to do this in Outlook). Then, when you send it to someone the e-mail will automatically pull in the images from the web. So you’re not sending anyone the images, you’re just telling the e-mail where to get them from. Does that make sense?
WJ
Wendy j Chapman
Aug 15, 2003
It makes sense, but it doesn’t seem to work. I uploaded all the images the IR turned into slices on my server. I went to Outlook and made a new stationary from the html file, but it is still broken. Also, if I get this stationary to work, won’t it repeat the image over and over to fill the body of the email?
P
Phosphor
Aug 15, 2003
It shouldn’t do- although I have had problems with stationery myself in the past which defy all logic! I’m at work for another 20 minutes, if you like feel free to send me the html file and I’ll see if I can get it into the stationery for you.

My e-mail is helen.polson"atsign"ebbon-dacs.com (Change "atsign" to @, just a little trick to foil the e-mail address harvesters!)
WJ
Wendy j Chapman
Aug 15, 2003
I sent you 2 emails. Thanks for helping!
DM
dave milbut
Aug 15, 2003
wendy, make sure the html <img> tags are pointing at the new loctaion of the image files (your slices) on the extranet before creating the stationary.
P
Phosphor
Aug 15, 2003
I’ve just explained that to you in an e-mail Wendy, I’ll hang around at work a little bit longer just to check everything is working ok 🙂
P
Phosphor
Aug 15, 2003
I’ve got to get off home now (it’s quarter to 6 here and the weekend has arrived!). I hope my e-mail makes sense to you Wendy, if you’re still working on this on Monday please feel free to give me a shout then if you need any more pointers or help with the html.
DM
dave milbut
Aug 15, 2003
I guess I don’t understand what you mean when you say "pointing"

what i mean is you need to make sure the links in the generated html are directed to your extranet web server….

so instead of something like:

<img src="file|//c|/images/myfirstslice.jpg">

you need to make sure it’s something like:

<img src="http://www.myextranetserver.com/images/myfirstslice.jpg">

is that clearer?

dave
V
viol8ion
Aug 15, 2003
Wendy,

Can you give us the URL to the page in question?
DM
dave milbut
Aug 15, 2003
i’m getting a page not found…
P
Phosphor
Aug 18, 2003
Me too. Can you link to a page on an extranet like that Dave, or do you have to be looking from a certain IP address? Might that be why we’re having access problems?

And Wendy, sorry I ran out on you on Friday but it was time for me to go home! Is this bit:

img src="http://www.myextranetserver.com/images/myfirstslice.jpg

making any sense yet?
WJ
Wendy j Chapman
Aug 18, 2003
Good Morning (8 a.m. here)

I opened the html in notepad to view the code. You were right, the images don’t really point to anywhere right now. So, I am going to attempt to the location and see what happens. (not sure what I am doing, but am going to give it a try.)

and helen, hope you enjoyed the weekend! i was too frustrated to continue working anyway.
WJ
Wendy j Chapman
Aug 18, 2003
I think I got it!!! (almost anyway) I edited the source code for the images in Notepad and it actually worked, except one of my images didn’t, but the rest worked so I am thrilled. I then made this new corrected html a new stationary in my Outlook, sent it to myself and it worked, links and all. Thanks so much for your help and patience!! Now, let’s see if remember all the steps correctly and in the right order to do it again! 🙂
WJ
Wendy j Chapman
Aug 18, 2003
Anyone have the patience to help with a couple more questions? I got it completly figured out in regards to inserting the html into my email. Thanks everyone!

When I created my slices, I added alternative text that said "Go to Our Web Site" kind-of thing. I previewed it in Internet Explorer and my curser changed to a hand and then a little text box appeared and showed the alternative text I had typed in. So, I am all excited with my progress and so I insert this into my email and send it to myself. But, when I open the email, the text boxes do not appear, but the links do work. Is this because it is not in a browser?

Also, I have been looking at the rollover features and animation features in IR, but am not sure this is where I need to be looking for the effect I want. When the curser moves over my link, it changes to a hand, but how can I have the link (or slice) change color or do something a little more obvious to identify this as a link?

How to Improve Photoshop Performance

Learn how to optimize Photoshop for maximum speed, troubleshoot common issues, and keep your projects organized so that you can work faster than ever before!

Related Discussion Topics

Nice and short text about related topics in discussion sections