How to embed an image map in email?

I couldn't find any help on this topic when I searched Fireworks and Dreamweaver.
I want to create an image map (either in Fireworks or in Dreamweaver) and then send it in an email. I've created image maps in older versions of Dreamweaver, and I've used slices in older versions of Fireworks. I just want different parts of the picture to take me to different URLs, but I haven't even been able to get close in my tests.
Any tips, please?
Chuck

Creating HTML for email is a subject unto itself. Every major email client has different limitations. Before you try just copying an HTML page into an email, you should do some research into creating HTML emails. SitePoint has some articles:
http://www.sitepoint.com/article/code-html-email-newsletters/
http://www.sitepoint.com/article/designers-guide-html-email/
http://www.sitepoint.com/article/principles-beautiful-html-email/
One of the SitePoint articles links to two services: CampaignMonitor and MailChimp. CampaignMonitor does not recommend the use of image maps becasue of poor support by Gmail:
http://www.campaignmonitor.com/blog/post/2432/do-image-maps-work-in-html-ema/
MailChip recommends being careful with image placement simply because many clients will automatically block images when the mail is first loaded:
http://www.mailchimp.com/articles/stupid-html-email-design-mistakes/
Both sites have free templates you can download to use.
Good luck!

Similar Messages

HELP!!!! I have spent hours trying to find out how to embed an image with a link or a Microsoft Word document with a hyperlink built within the document -- not as an attachment! Does ANYONE know the secret? Can it be done, or not! My PC clients do it.

HELP!!!! I have spent hours trying to find out how to embed an image with a link, or embed a Microsoft Word document with a hyperlink built within the document -- not as an attachment into my email -- but where it shows as the email content when opened! Does ANYONE know the secret? Can it be done, or not? My PC clients do it all the time easily. Then I want to be able to send the embedded image/document (not as an attachment, but visable within the email when opened) to many email contacts at once, BUT the individuals receiveing them DO NOT SEE the other email contacts. Cannot seem to be able to find anything on being able to do these 2 tasks.PLEASE, SOMEONE, HELP!!!

Don't know if this applies to Lion, but read here:
http://www.makeuseof.com/tag/create-html-announcement-mail-iweb-mac/

How to embed the Images in the java sourse

How to embed the Images in the java sourse
The size of the file will be too large while I put the binary code of the image into the java sourse!
thanks

You could encrypt them with a private key and then
decrypt them with a public key.
Almost had it... public key encryption works the other
way around... otherwise what's the point of
encrypting... if the decryption key is public?Spinoza's right. Public key encryption works both ways, but it would be useless in this case to encrypt with the private key. The problem is, how do you package your private key with the application in a way that doesn't allow the user to get it? Encrypt it? :-) I agree that there's no point to this exercize. If users want to screw up the application by editing its image files, let 'em.

How to detect imbedded image inside GroupWise email?

Hi,
I am using GroupWise 8.0. I created a new mail and used File->Attachments->Attach Files...to attach files, and selected one MS WORD and one Excel file to attach to this emai. Then I launched Paint to open a jpg file name image.jpg, selected the image to copy to clipboard, and went back to the mail to use Edit->Paste to paste (embed) the image into this email, then send the email.
Using Object API when I try to fetch the message, the attachment collection shows 3 attachments, one is MS WORD document with Objtype is egwFile, second is Excel file with Objtype again is egwFile, so far so good, then the third one shows name as image.bmp, BUT the Objtype also is egwFile (instead of egwOLEEmbedded)?? I used these statements to get the objtype of each attachment.
AttachmentTypeConstants type;
hRes = m_pGWAttachment->get_ObjType(&type);
Where CComPtr<IGWAttachment> m_pGWAttachment;
Is there a way to know that an attachment is an embedded attachment?
Regards,
Phong

On 11/20/2012 7:16 AM, pholoan wrote:
>
> Michael Bell;2231289 Wrote:
>> On 11/19/2012 12:16 PM, pholoan wrote:
>>>
>>> Hi,
>>>
>>> I am using GroupWise 8.0. I created a new mail and used
>>> File->Attachments->Attach Files...to attach files, and selected one
>> MS
>>> WORD and one Excel file to attach to this emai. Then I launched Paint
>> to
>>> open a jpg file name image.jpg, selected the image to copy to
>> clipboard,
>>> and went back to the mail to use Edit->Paste to paste (embed) the
>> image
>>> into this email, then send the email.
>>> Using Object API when I try to fetch the message, the attachment
>>> collection shows 3 attachments, one is MS WORD document with Objtype
>> is
>>> egwFile, second is Excel file with Objtype again is egwFile, so far
>> so
>>> good, then the third one shows name as image.bmp, BUT the Objtype
>> also
>>> is egwFile (instead of egwOLEEmbedded)?? I used these statements to
>> get
>>> the objtype of each attachment.
>>>
>>> AttachmentTypeConstants type;
>>> hRes = m_pGWAttachment->get_ObjType(&type);
>>>
>>> Where CComPtr<IGWAttachment> m_pGWAttachment;
>>>
>>> Is there a way to know that an attachment is an embedded attachment?
>>>
>>>
>>> Regards,
>>>
>>> Phong
>>>
>>>
>> ONly via the MIME. With soap this would be easy.
>
> Do you mind elaborating more on the MIME method for me?
>
> Thanks,
>
> Phong
>
>
With mime you'd look for items with Content-ID headers....
See the RFC on Compound HTML
example
multipart/related;boundary="turnip"
--turnip
text/html
I am <b>html</b> here's an embedded pic <img src="cid:cabbage">
--turnip
image/jpeg
content-id: cabbage
encoded base64 stuff

How do you embed an image in an email?

Am trying to embed an image (jpeg) in an email but when I send it it comes out to the recipient as an attachment. How can I ensure the image is received in an embedded format?

Check the menu item "Edit > Attachments > Always insert attachments at end of message". If it is on, disable it.
You could also use the Mail stationary to format a mail with embedded photos. The stationary dropdown menu is in the upper right corner of the "New Message" window.

How to embed an Image onto a Shape?

I'd like to use Shape.contains() and intersects() functionalities on clipped free-form Images on a custom component. Could we embed an Image into a Shape? If the answe is yes, then, how?
If Shape is not usable, then, how could we achieve similar functionalities on Images? Do we only have run-of-the-mill coord caluculation?

import java.awt.*;
import java.awt.event.*;
import java.awt.geom.*;
import java.awt.image.BufferedImage;
import java.io.*;
import javax.imageio.ImageIO;
import javax.swing.*;
public class ImageShapes extends JPanel {
    BufferedImage image;
    Shape[] shapes;
    JLabel xLabel, yLabel;
    ImageShapes(BufferedImage image) {
        this.image = image;
    public void setCoordinates(Point p) {
        String sx = "";
        String sy = "";
        if(p != null) {
            sx = String.valueOf(p.x);
            sy = String.valueOf(p.y);
        xLabel.setText(sx);
        yLabel.setText(sy);
    protected void paintComponent(Graphics g) {
        super.paintComponent(g);
        Graphics2D g2 = (Graphics2D)g;
        g2.setRenderingHint(RenderingHints.KEY_ANTIALIASING,
                            RenderingHints.VALUE_ANTIALIAS_ON);
        if(shapes == null)
            initShapes();
        Shape origClip = g2.getClip();
        for(int j = 0; j < shapes.length; j++) {
            g2.setClip(shapes[j]);
            Rectangle r = shapes[j].getBounds();
            // center image in clip shape
            int x = r.x + (r.width - image.getWidth())/2;
            int y = r.y + (r.height - image.getHeight())/2;
            g2.drawImage(image, x, y, this);
            // smooth the edges of the clipped image
            g2.setClip(null); // or origClip
            g2.setPaint(getBackground());
            g2.draw(shapes[j]);
    private void initShapes() {
        int w = getWidth();
        int h = getHeight();
        shapes = new Shape[3];
        shapes[0] = new Ellipse2D.Double(w/2, h/3, 175, 175);
        int R = 60;
        int sides = 5;
        int[][]xy = generateShapeArrays(w/4, h/4, R, sides);
        shapes[1] = new Polygon(xy[0], xy[1], sides);
        GeneralPath path = new GeneralPath();
        double x1 = w/4;
        double y1 = h*9/16;
        double ctrlx1 = w*9/32;
        double ctrly1 = h*5/16;
        double ctrlx2 = w*11/16;
        double ctrly2 = h*9/16;
        double x2 = w/4;
        double y2 = h*15/16;
        CubicCurve2D curve = new CubicCurve2D.Double(x1, y1, ctrlx1, ctrly1,
                                                     ctrlx2, ctrly2, x2, y2);
        path.append(curve, false);
        AffineTransform at = AffineTransform.getTranslateInstance(w/2, 0);
        at.scale(-1,1);
        Shape left = at.createTransformedShape(curve);
        path.append(left, false);
        shapes[2] = path;
    private int[][] generateShapeArrays(int cx, int cy, int R, int sides) {
        int radInc = 0;
        if(sides % 2 == 0)
            radInc = 1;
        int[] x = new int[sides];
        int[] y = new int[sides];
        for(int i = 0; i < sides; i++) {
            x[i] = cx + (int)(R * Math.sin(radInc*Math.PI/sides));
            y[i] = cy - (int)(R * Math.cos(radInc*Math.PI/sides));
            radInc += 2;
        // keep base of triangle level
        if(sides == 3)
            y[2] = y[1];
        return new int[][] { x, y };
    private JPanel getLabels() {
        xLabel = new JLabel(" ");
        yLabel = new JLabel(" ");
        Dimension d = new Dimension(45, 25);
        JPanel panel = new JPanel(new GridBagLayout());
        GridBagConstraints gbc = new GridBagConstraints();
        gbc.insets = new Insets(2,2,2,2);
        gbc.weightx = 1.0;
        addComponents(new JLabel("x"), xLabel, panel, gbc, d, false);
        addComponents(new JLabel("y"), yLabel, panel, gbc, d, true);
        panel.setBorder(BorderFactory.createEtchedBorder());
        return panel;
    private void addComponents(JComponent c1, JComponent c2, Container c,
                               GridBagConstraints gbc, Dimension d, boolean b) {
        gbc.anchor = gbc.EAST;
        c.add(c1, gbc);
        c2.setPreferredSize(d);
        gbc.weightx = b ? 1.0 : 0;
        gbc.anchor = gbc.WEST;
        c.add(c2, gbc);
    public static void main(String[] args) throws IOException {
        BufferedImage image = ImageIO.read(new File("images/cougar.jpg"));
        ImageShapes test = new ImageShapes(image);
        test.addMouseMotionListener(new ShapeFinder(test));
        JFrame f = new JFrame();
        f.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
        f.getContentPane().add(test);
        f.getContentPane().add(test.getLabels(), "Last");
        f.setSize(400,400);
        f.setLocation(200,200);
        f.setVisible(true);
class ShapeFinder extends MouseMotionAdapter {
    ImageShapes imageShapes;
    boolean hovering = false;
    ShapeFinder(ImageShapes c) {
        imageShapes = c;
    public void mouseMoved(MouseEvent e) {
        Point p = e.getPoint();
        boolean haveSelection = false;
        Shape[] shapes = imageShapes.shapes;
        if(shapes == null) return;
        for(int j = 0; j < shapes.length; j++) {
            if(shapes[j].contains(p)) {
                haveSelection = true;
                imageShapes.setCoordinates(p);
                if(!hovering)
                    hovering = true;
        if(!haveSelection && hovering) {
            hovering = false;
            imageShapes.setCoordinates(null);
}

How to embed multiple images

Hello!
I have been tying to figure out how I could easily embed multiple linked images easily. I have some 1000 .svg images which have about 1-7 .tif images linked in to them. I now need to get those links embedded and becouse of the amount of images I'm hoping to make an action out of it. I have a script to embed single image in .svg but haven't have luck with multiple embeddings.
Any ideas?

Great got it working now. Thanks for Your help.
BUT (there always seems to be a but) now I'm facing new troubles. Kind of the same that Dovidgold seems to be facing http://forums.adobe.com/message/4733717#4733717
After running the script on a image with two linked items. One of the items jumps on a different layer and scales it self to original size.
So, once again, any ideas?

How to make an image map rotate?

I have 4 images and how do i make them rotate with the image map part. Rotation removes the image mapping when it is done with Jquery. Help

Sudarshan Thiagarajan wrote:
The plug-in itself seems conky. http://blog.stableflow.com/jquery-plugins/360-degrees-product-view/ - doesn't do anything to the image on their plugin demo page.
If you could tell us what you'd like to do with your anatomy images, maybe we can suggest a different solution?
It rotates the image in my browser
I want to make the body turn around 360 degrees when mouse is used to rotate,mean while the image map should be clickable on all 4 sides .

Does anyone know how to save / preserve image maps when updating graphics?

Hello all,
I'm currently working on a RH7 HTML project, which I've designed to be used in support of a software application.
Some of the application's dialogue boxes have quite complex multi-tabbed GUIs, so when it comes to describing their functionality, you often end up with a long list below the graphic image. What this means of course, is that the user is forever scrolling up and down to make reference between the GUI and the explanatory text.
I hit upon an idea I'd used previously, whereby I created popups to multiple image map hotspots. It works like a dream and the client and users really like the concept - but there's a snag (apparently).
Because the application is still in development. some of those GUIs are (and will continue to) change. No problem with that either - until I try and insert the updated graphic. Poof !! All my hotspots disappear . . .
Surely I'm not alone in trying this approach and there must be some way of preserving the hotspots?
Any suggestions?
Bob (in a UK time zone)

Hi there
It sounds like you are using the standard methods of inserting an image. Don't do that!
All you need to do in these cases is to use Windows Explorer to save the updated image using the same file name and replacing the former image. When you do this your other data will remain intact. If the new image is a different size, just right-click it inside the RoboHelp HTML editor and choose Reset Size. You also may need to tweak your hotspots if things shifted some.
Cheers... Rick
Helpful and Handy Links
RoboHelp Wish Form/Bug Reporting Form
Begin learning RoboHelp HTML 7 or 8 within the day - $24.95!
Adobe Certified RoboHelp HTML Training
SorcerStone Blog
RoboHelp eBooks

Blast from the past: How do I draw image maps in Dreamweaver CC 2014?

Need to update some old stuff, and can´t find where to draw image-maps on images.

First, you need to be in Design View to get the image map tools to appear.
Once there, the image map icons should show when you select an image. If they don't, you may have your Properties panel collapsed. In the bottom right corner of the Properties panel, there's a tiny triangle, click that to expand the panel to include the image map tools.

Can someone help me and explain how to affect hotspot/image map with css rules or any other way?

i have problem with hotspot because its position cant be fixed to follow the proportion of the fixed background in different resoulutions.

You can't affect hotspots at all with css. Here are a couple different options you have available though...
You could try using multiple images that scale, linking each individual image, instead of hotspots.
You could also look into "responsive image maps" to get quite a few examples of jquery/javascript run image maps that can be scaled.
Depending on your image, (for example, if you are linking states on a map) you would be able to use SVG paths and link the paths with javascript.

How to export an image map as polygons?

Hoping someone can help with this as im having no luck with google.
I have a shape and in the attributes i have set the image map as polygon and put in a url
I export this in jpg format and it generates a jpg and html file. however, the HTML file is only showing rectangle.
<area shape="rect" coords="70,85,278,282" href="http://www.example.com">
I would have expected this choosing rectangle for the image map.
I am trying to export polygon coordinates.
Does any one know why this is not working and what i have missed?
Thanks in Advance

This was posted before and I tried it myself but when I exported the polygon shape image map it exported properly.
In the attributes you must choose polygon as the option it is not good enough just to have the shape a polygon.
Perhaps the problem might be connected to the document color space was the document the default CMYK or was it a we document from the start?
But what I always do is make a slice of the art or the artboard and save for the web as a jpeg and include the html.
You can check it out here http://mysite.verizon.net/wzphoto/Polygon.html
Here are the screen shots of what I did

How to embed 32 images and a cover letter in an email and then send.

I write and illustrate picture books. I need to know how to be able to embed an entire book and a cover letter in an email to send out for submissions. What is the best way of compressing the images so they arrive embedded.

If you have an App which can handle PDFs you can use the Share icon (box with arrow) to create and send an email containing the PDF.

How do I embed an image in an email?

I have an infopath form in Sharepoint that submits to email. One of the fields is a picture box that allows users to upload a photo. They are able to upload the photo but when it is submitted, it does not show in email.
I have also tried adding a rich-text box instead that allows the user to insert picture from address but if the address is of a sharepoint site then it gets manipulated. For instance, if I put company.sharepoint.com/folder/image.jpg in the rich-text box
then it manipualtes it to /folder/image.jpg
Any suggestions?
Thank you! :)

No, you do not need to make anything public. URL shorteners are simply translating addresses. For example when you access bit.ly/NikCharlebois (just an example) the server translates it to http://nikcharlebois.com/.../blahblah/.../page.aspx and simply redirects
the user there. All the remote server keeps is a text reference mapping your short url to whetever other url.
Your stuff can remote protected internally. If by some miracles an external user stumble on your short URL, he won't be able to access it if its on your internal network.
Nikolas Charlebois-Laprade Microsoft Certified Professional & Software Engineer http://nikcharlebois.com

How do I send images in an email, but not embedded in the message body?

I want to submit some jpg images of artwork to a competition and the rules state that attached images must *not* be embedded in the email body. They want the list where you can see the file name and you click on it to open it, as I've seen in Windows MS Outlook. I've searched the net and I see that this is a problem for other people, but I've not seen a solution.
I'm using the current version of iMail, and I've tried setting the message to Plain Text, the "Windows Friendly" setting, as well as the "Always attach at end of message" setting. All leave the image embedded. I'm using the current version of iMail. Anyone know how to do this? I have a deadline approacing so time is of the essence. Thanks!!

I agree that it's a shame to have to buy something that I feel Mail should already do. That said, it seems that people's experience with sending attachments using Mail seems varies - I believe it's often to do with how the recipients email client is configured.
All I know is that since installing Attachment Tamer (used to be called Mail Attachments Iconizer) a few years ago it's something I no longer have to bother about.
I think you can run AT in demo mode to test flight it, before committing to buy.

How to embed an image map in email?

Similar Messages

Maybe you are looking for