Add image map to layer graphic?

There is no allowance for image maps on the Properties menu when a graphic placed in a layer is selected.
I have as US map within a <div> layer for exact placement. But I want to draw image maps for each state.
How can I do that?

There is no allowance for image maps on the Properties menu when a graphic placed in a layer is selected.
Whether or not your image is within a layer, a table, a span, or any page container would not affect your ability to add an image map to it.
I have as US map within a <div> layer for exact placement.
It is not necessary to use 'layers' to achieve exact placement, but as stated above, the image's container is immaterial to the use of image maps. What I suspect is happening is that you are trying to do this on a template controlled child page - is that correct?

Similar Messages

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

Image map Explorer trouble

In my table based layout, when I add image mapping to an
image that fits the entire cell, the cell height gets increased
when viewed in Windows Explorer splitting up the design. If I
remove the image map code, the table fits back together correctly.
All Mac browsers I've tried do not do this and display correctly.
Am downloading Firefox for windows to check that.
Would appreciate a fix if anyone can help.
Thanks,
Russ

Move the code for the Map part so that it sits directly above
</body>
Murray --- ICQ 71997575
Adobe Community Expert
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.dreamweavermx-templates.com
- Template Triage!
http://www.projectseven.com/go
- DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs,
Tutorials & Resources
http://www.macromedia.com/support/search/
- Macromedia (MM) Technotes
==================
"RustyCT" <[email protected]> wrote in
message
news:fcehig$9u3$[email protected]..
> In my table based layout, when I add image mapping to an
image that fits
> the
> entire cell, the cell height gets increased when viewed
in Windows
> Explorer
> splitting up the design. If I remove the image map code,
the table fits
> back
> together correctly. All Mac browsers I've tried do not
do this and display
> correctly. Am downloading Firefox for windows to check
that.
>
> Would appreciate a fix if anyone can help.
>
> Thanks,
>
> Russ
>

Image map rollover show/hide layer

My client needs a map of the US which has image maps on specific states. I need to trigger rollovers to change the state's color and view info (layer?). I'm having difficulty triggering the rollover with show/hide action on a layer, or even to change the state color, as I can't create odd shaped slices. Am I making this harder than it needs to be? Some smaller states will use offset names as triggers.

In article <[email protected]>,
[email protected] wrote:
> My client needs a map of the US which has image maps on specific states. I
> need to trigger rollovers to change the state's color and view info (layer?).
> I'm having difficulty triggering the rollover with show/hide action on a
> layer, or even to change the state color, as I can't create odd shaped
> slices.
You can do that with an image map and a whole bunch of images; no layers
required.
The only image that will be swapped out is a map covering the entire
area, however you'd need to create different versions of the map, each
with just one state hi-lighted.
Then create image map shapes with the polygon tool approximating the
shape of the states. Assign a Set Image URL to each polygon to swap out
the image for the one with that particular state hi-lighted.
A sample can be seen here:
Cheers Martin

Image region defining (Image Map)

Hi everyone!
I have a problem with an Image Map.
It is so simple to define a Map with Regions in HTML,
but could you help me do that in Swing?
I want to create a picture in a Swing application with couple of regions defined.
When I click one of defined regions an action is performed.
Maybe some examples? Or a link?
Thanks for help!

import java.awt.*;
import java.awt.event.*;
import java.awt.image.BufferedImage;
import java.io.*;
import java.net.*;
import javax.imageio.ImageIO;
import javax.swing.*;
public class ImageMap
    public ImageMap()
        JLabel label = new JLabel();
        label.setHorizontalAlignment(JLabel.CENTER);
        Dimension d = label.getPreferredSize();
        d.height = 25;
        label.setPreferredSize(d);
        ImageMapPanel mapPanel = new ImageMapPanel(getImage());
        MapSelector selector = new MapSelector(mapPanel, label);
        mapPanel.addMouseListener(selector);
        JFrame f = new JFrame();
        f.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
        f.getContentPane().add(mapPanel);
        f.getContentPane().add(label, "South");
        f.setSize(400,400);
        f.setLocation(200,200);
        f.setVisible(true);
    private BufferedImage getImage()
        String fileName = "images/redfox.jpg";
        BufferedImage image = null;
        try
            URL url = getClass().getResource(fileName);
            image = ImageIO.read(url);
        catch(MalformedURLException mue)
            System.err.println("url: " + mue.getMessage());
        catch(IOException ioe)
            System.err.println("read: " + ioe.getMessage());
        return image;
    public static void main(String[] args)
        new ImageMap();
class ImageMapPanel extends JPanel
    BufferedImage image;
    Dimension size;
    Rectangle left, right;
    boolean showMap;
    public ImageMapPanel(BufferedImage bi)
        image = bi;
        size = new Dimension(image.getWidth(), image.getHeight());
        showMap = false;
        addComponentListener(new ComponentAdapter()
            public void componentResized(ComponentEvent e)
                left = null;
                repaint();
    protected void paintComponent(Graphics g)
        super.paintComponent(g);
        Graphics2D g2 = (Graphics2D)g;
        g2.setRenderingHint(RenderingHints.KEY_ANTIALIASING,
                            RenderingHints.VALUE_ANTIALIAS_ON);
        int w = getWidth();
        int h = getHeight();
        int x = (w - size.width)/2;
        int y = (h - size.height)/2;
        if(left == null)
            initRects(x, y);
        g2.drawImage(image, x, y, this);
        if(showMap)
            g2.setPaint(Color.red);
            g2.draw(left);
            g2.draw(right);
    private void initRects(int x, int y)
        int w = image.getWidth()/2;
        left = new Rectangle(x, y, w, size.height);
        right = new Rectangle(x + w, y, w, size.height);
    public Dimension getPreferredSize()
        return size;
class MapSelector extends MouseAdapter
    ImageMapPanel mapPanel;
    JLabel label;
    public MapSelector(ImageMapPanel imp, JLabel label)
        mapPanel = imp;
        this.label = label;
    public void mousePressed(MouseEvent e)
        Point p = e.getPoint();
        String s = "";
        if(mapPanel.left.contains(p))
            s = "left";
        if(mapPanel.right.contains(p))
            s = "right";
        label.setText(s);
        if(e.getClickCount() > 1)
            mapPanel.showMap = !mapPanel.showMap;
            mapPanel.repaint();
}

Image map for Dreamweaver from Photoshop

Hi. How does one convert some of the layers in a Photoshop CS3 graphic to an HTML image map with each layer being a hot spot? This would be very tedious (and not very accurate) doing it manually. Thanks.

> nothing done by hand could have created anything this precise.
But take a look at the definition of the hotspots in the HTML code. It is possible that you have a massive definition that will chew up some considerable bandwidth to transmit. (The point ID and others were making.)
This isn't a problem if all your users are on high speed connections, but if a significant number are on dialup, they might not want to wait for such precision.

Get image map visible to user without mouseover

If I insert an image map, the user sees a hot spot image map when the mouse is over the image map. I want the user to see where there are hot spots before they move the mouse.
Is there a way to get this functionality without having another image overlay the image map? Perhaps I can use something other than image maps?
Peter

Use a graphics tool such as RoboScreen Capture to add a coloured border around the area.
See www.grainge.org for RoboHelp and Authoring tips
@petergrainge

Image maps not working in signatures (MS Exchange 2010)

I would like to know how to get the image maps links work in OWA 2010, it is working in all other email clients except OWA 2010

Hi,
This issue seems related to S/MIME control and IE.
Please perofrm latest updates for IE and S/MIME. More details as below:
1. OWA -> Options -> Settings -> S/MIME
2. If any security warnings appear, click Yes for the control to download and install.
Also try to add OWA web site into Compatibility View in IE.
Thanks
Mavis Huang
TechNet Community Support

Any way to open new browser window without using image maps?

Is there any way to open new browser window without using image maps? My code works fine in Firefox, but not in IE. There are 2 problems in IE: 1st is that the thumbnail images move up within their own borders & 2nd that when you click on an image it does open up a new browser window, but also redirects to the index page (in this case it's just a placeholder index page - the new one I've called index_new.html for the time being).
Here is the link:
http://www.susieharperdesigns.com/gallery_beads.html
Any help is greatly appreciated.

Your missing a value on the HREF. In your code you have this:
<area shape="rect" coords="-24,-9,106,144" href=" " onclick="MM_openBrWindow('gallery_bead1.html','','width=255,height=360')" />
</map></div>
and it should be this:
<area shape="rect" coords="-24,-9,106,144" href="javascript:void()" onclick="MM_openBrWindow('gallery_bead1.html','','width=255,height=360')" />
</map></div>
If you fix the code on all your beads, it should work.
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
http://alt-web.com/
http://twitter.com/altweb
http://alt-web.blogspot.com

Can you create an image map that will link to a different element on the same page?

I have used image maps before and know how to create an image map to link to a new page. In this case, however, I want to be able to click on my image using an image map and load a new image with text on the same page as the image map. Is this even possible? Is there some sort of behavior that allows you to create same-page links, perhaps using AP divs? I want the end result to be a type of gallery that loads different images depending on where you click on the main image.
Again, I don't even know if this is possible. Any suggestions on how to make this work would be greatly appreciated.
Thank you!

Go to this site and mouse over the image map of South America.
http://alt-web.com/testing.html
Is that what you are looking for?
Insofar as linking to a position on the same page, do a Help search (F1) in DW for "named anchors."
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
www.alt-web.com/
www.twitter.com/altweb
www.alt-web.blogspot.com

How do I update/edit/change an image map in Fireworks CS4 or CS5?

Hi,
I've created an imagemap in Fw CS4, exported the image + html file, and it works ok.
1. I closed Fireworks, then ran it again and re-opened the exported PNG, and could see the hotspots, and could edit/update/add/remove them.
2. I closed Firewoks again, then moved the exported .png image (the original was a PNG as well) and html file to a different folder.
Problem: When I open the (exported) image, I can no longer edit the hotspots. The image map still works (in a browser), however.
Doesn't the HTML file define the hotspots? How do I update or edit an image map in Fireworks? Do I need to re-import the HTML file somehow? Fw help isn't very helpful on this topic.
I've also found that Fw seems to change the PNG when exporting it. Is it adding some kind of metadata to the exported PNG?
I've made sure the "Show slices and hotspots" button is on. This is really puzzling!
Environment: Windows XP SP3, Fireworks 10.03.011

Thanks to you both.
I think I understand what's happened, and yes, I've overwritten my original PNG
sigh. Fireworks doesn't really make this obvious!
That renaming tip is great! We already have a process for making PNGs of marked-up PDFs (so the extension is .pdf.png), so this will fit in just nicely!
You both ROCK!

Adding A HREF or image map to an image puts 3px L/R padding on image

Hi all --
I'm having an interesting problem. I'm designing a web page that has a navigation banner (home - programs - schedule of events - contact us - downloads) that is made up of a .png for each page (i.e. home.png, programs.png, etc). My page is 1000px wide and all of the navigation banner's images add up to 1000px wide.
I'm using JavaScript to create an onMouseOver and onMouseOut effect on each of the images. The problem that I'm having occurs when I tried to add a link (either by <A HREF= or using an image map). Whenever I add a link to the image, a small (3px) area of white space shows up to the right of the image. This shifts all of my other images 3px to the right (and 3 more for each link I add to subsequent images) thus making the total width of the navigation banner over 1000px and the last image gets shoved to a new line.
I can find no way to get rid of this white space other than to remove the link from the image. There is no property on the page that adds any sort of padding, margins, or borders to images or links, so I can see no property that has to be changed.
Help! How do I get rid of this white space but still keep the link on the image??
[I've attached a screen shot showing a before/after of the images without/with links]
Thanks in advance!
//kl

First, how are you looking at it?
Internet Exploder frequently adds padding and space -- especially where there is white space in your code (so take that out for a start). Additionally, if you are using Microsoft's non-compliant browsers, you will note that many of them automagically adjust placement of objects and you have to write code specifically to stop that from happening.

For Internet Exploiter 6, you literally may need to rewrite navigation:

Now my menu has a special CSS stylesheet for that idiotic browser here:
ul#content {
background-image: url("../content_images/bg.jpg");
background-repeat: repeat-x;
cursor: default;
height: 30px;
list-style-type: none;
margin: 0 0 0 0;
padding: 0 0 0 0;
ul#content ul {
cursor: default;
font-size: 0;
list-style-type: none;
margin: 0 0 0 0;
padding: 0 0 0 0;
ul#content ul li {
background-image: none;
border-bottom: solid 1px black;
float: none;
margin-bottom: -1px;
ul#content li {
background-image: none;
border-bottom: solid 1px black;
float: left;
margin-bottom: -1px;
padding: 0 0 0 0;
position: relative;
white-space: nowrap;
z-index: 100;
ul#content li ul {
display: none;
top: 0;
ul#content li.hover ul {
display: block;
position: absolute;
ul#content li.current ul {
position: absolute;
ul#content li {
background-image: url("../content_images/center.jpg");
background-repeat: repeat-x;
ul#content li span {
background-image: url("../content_images/right.jpg");
background-position: right top;
background-repeat: no-repeat;
display: block;
ul#content li span a {
background-image: url("../content_images/left.jpg");
background-position: left top;
background-repeat: no-repeat;
color: #fff;
display: block;
font-family: "Trebuchet MS", Helvetica, sans-serif;
font-size: 10px;
font-style: normal;
font-weight: bold;
height: 20px;
margin: 0 0 0 0;
padding: 5px 5px 5px 5px;
text-align: center;
text-decoration: none;
text-transform: uppercase;
width: 100px;
ul#content li * a {
height: auto;
width: auto;
ul#content li span * a {
height: auto;
width: auto;
ul#content ul.level-1 {
left: 0px;
top: 100%;
ul#content ul.level-1 li {
background-image: none;
ul#content ul.level-1 li a {
background-color: #DA4D33;
background-image: none;
border-bottom: dotted 1px #E9E5F9;
border-left: solid 1px #E9E5F9;
border-right: solid 1px #656586;
color: #fff;
display: block;
font-family: "Trebuchet MS", Helvetica, sans-serif;
font-size: 10px;
font-style: normal;
font-weight: bold;
margin: 0 0 0 0;
padding: 5px 5px 5px 5px;
text-align: left;
text-decoration: none;
text-transform: uppercase;
width: 100px;
ul#content ul.level-1 li a.active {
background-color: #E9E5F9;
border-bottom: dotted 1px #DA4D33;
border-right: solid 1px #E9E5F9;
color: #332151;
font-weight: bold;
text-decoration: none;
ul#content ul.level-1 li * a {
height: auto;
width: auto;
ul#content ul.level-1 li span * a {
height: auto;
width: auto;
ul#content ul.level-1 li.hover a {
background-color: #E9E5F9;
border-bottom: dotted 1px #DA4D33;
border-right: solid 1px #E9E5F9;
color: #332151;
font-weight: bold;
text-decoration: none;
ul#content ul.level-1 li.current a.current {
background-color: #E9E5F9;
border-bottom: dotted 1px #DA4D33;
border-right: solid 1px #E9E5F9;
color: #332151;
font-weight: bold;
text-decoration: none;
ul#content ul.level-2 {
left: 112px;
ul#content ul.level-2 li {
background-image: none;
ul#content ul.level-1 ul.level-2 li a {
background-color: #DA4D33;
background-image: none;
border-bottom: dotted 1px #E9E5F9;
border-left: solid 1px #E9E5F9;
border-right: solid 1px #656586;
color: #fff;
display: block;
font-family: "Trebuchet MS", Helvetica, sans-serif;
font-size: 10px;
font-style: normal;
font-weight: bold;
margin: 0 0 0 0;
padding: 5px 5px 5px 5px;
text-align: left;
text-decoration: none;
text-transform: uppercase;
width: 100px;
ul#content ul.level-1 ul.level-2 li a.active {
background-color: #E9E5F9;
border-bottom: dotted 1px #DA4D33;
border-right: solid 1px #E9E5F9;
color: #332151;
font-weight: bold;
text-decoration: none;
ul#content ul.level-2 li * a {
height: auto;
width: auto;
ul#content ul.level-2 li span * a {
height: auto;
width: auto;
ul#content ul.level-1 ul.level-2 li.hover a {
background-color: #E9E5F9;
border-bottom: dotted 1px #DA4D33;
border-right: solid 1px #E9E5F9;
color: #332151;
font-weight: bold;
text-decoration: none;
ul#content ul.level-1 ul.level-2 li.current a.current {
background-color: #E9E5F9;
border-bottom: dotted 1px #DA4D33;
border-right: solid 1px #E9E5F9;
color: #332151;
font-weight: bold;
text-decoration: none;

Image map + link in background image

Is it possible to put an image map and link to a background
image of a table?

no but you can put a 1px by 1 x blank transparent image over
the background image and add an image map to that

Image Maps from FM9 RH8

Using TCS2.
I am trying to create an image map in FM and have the hyperlink retained when in the linked RH project. Does anyone know how to do this so that the hyperlink in the active area over an image is retained when bringing the file into RoboHelp (linking to the FM doc) without forcing me to recreate the link in RH? I've read the FM documentation, and I've successfully made the link work in a PDF saved from the FM doc (clicking the graphic successfully launches the link from the PDF), but RH doesn't bring over the hyperlink when I link to the FM doc.
Any ideas?
Thanks,
Michael Cohen

I don't want to upload it. Its simply a div with a backgound image that consists of artwork and words. The words of course were not typed in Dreamweaver so I can't select them and make links. I'm fairly new to dreamweaver.
Could I place the artwork as an image on the page and then make links? I don't know how to place an image on the page so that it goes anywhere but the upper left corner. We used to use GoLive 6 (the older version of dreamweaver) and place the artwork on the DW page and make links on the artwork.

Rollover images using image maps

alright so heres what im trying to do. I have one really big
image, and i have about 4 image maps on it. what i want is for
everytime you roll over on of them, a new layer (which are hidden)
pops up. Would that be possible using image maps?
i cant seem to figure out how to use the behavior panel to do
this

> Would that be possible using
> image maps?
Yes.
> i cant seem to figure out how to use the behavior panel
to do this
Select the mapped area. Apply the Show/Hide Layer behavior.
Murray --- ICQ 71997575
Adobe Community Expert
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.dreamweavermx-templates.com
- Template Triage!
http://www.projectseven.com/go
- DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs,
Tutorials & Resources
http://www.macromedia.com/support/search/
- Macromedia (MM) Technotes
==================
"franco937523ut" <[email protected]> wrote
in message
news:efi43i$bqh$[email protected]..
> alright so heres what im trying to do. I have one really
big image, and i
> have
> about 4 image maps on it. what i want is for everytime
you roll over on of
> them, a new layer (which are hidden) pops up. Would that
be possible using
> image maps?
> i cant seem to figure out how to use the behavior panel
to do this
>

Add image map to layer graphic?

Similar Messages

Maybe you are looking for