Image Map examples?

HI,
I have been asked to create a reporting application that drills down via image maps (map of: world => region => country).
Not sure how to do this in HTML DB and I can't find any samples/examples.
Does anyone have some experience with this and can point me in the right direction?
Thanks
Kirk

Wajid,
This is a dead thread. Please start a new one when you have a new question.
I blogged about this recently:
http://www.danielmcghan.us/2009/05/html-image-maps-old-trick-with-new.html
Regards,
Dan
http://danielmcghan.us
http://sourceforge.net/projects/tapigen
http://sourceforge.net/projects/plrecur
You can reward this reply by marking it as either Helpful or Correct ;-)

Similar Messages

Help with Images Maps,

Hi,
I have an HTML page where an IMG is loaded:
<img src="images/renders/Main_Image.jpeg" alt="Main Image" name="Main_IMG" width="800" height="600" border="0" usemap="#Main_MAP" id="Main_IMG" />
Then I have 4 images maps laid on top of the image:
<map name="Main_MAP" id="Main_MAP">
<area shape="poly" coords="--some numbers--" href="Area1.html" target="_parent" alt="Area1 Button" />
<area shape="poly" coords="--some numbers--" href="Area2.html" target="_parent" alt="Area2 Button" />
<area shape="poly" coords="--some numbers--" href="Area3.html" target="_parent" alt="Area3 Button" />
<area shape="poly" coords="--some numbers" href="Area4.html" target="_parent" alt="Area4 Button"/>
</map>
See Example:
Each area is essentially an invisible button. I want to make it so when the mouse hovers over the areas, I want the background image to display something different. On mouse out of the area, I want the image to go back. When the user clicks the Area, the user is moved to another part of the site.
Area 1 should change Main_Image.jpeg to Main_Image1.jpeg
Area 2 should change Main_Image.jpeg to Main_Image2.jpeg
etc.
I thought I could do this with Images Maps, but I can't figure out how. Is there an easier way? I have Dreamweaver CS4.
Thank you in advance!

Hey CF. Thank you very much for the reply! I thought I was losing my mind trying to figure out a way.
I'll try out the slice and dice approach... where's a turtle when you need one.
Cheers Dude.
S

Spry XML and image map

Hi all-
I'm new to using spry and xml, but not new to xhtml and layout, having said that. I'm trying to store file paths in my xml and parse that xml to repace <href> tags in an image map. For example (the actual cooridnates in the map are just made up for the example below, the actual map has 88 locations and very detailed coordinates, as it is a state map):
<head>
<script src="../SpryAssets/xpath.js" type="text/javascript"></script>
<script src="../SpryAssets/SpryData.js" type="text/javascript"></script>
var ds1 = new Spry.Data.XMLDataSet("../files/research/counties_census.xml", "ohio");
</head>
<body>
<div spry:region="ds1">
<img src="../images/CountyMap.gif" width="565" height="611" usemap="#Map">
        <map id="Map" name="Map">
          <area shape="rect" coords="103,156,155,202" href="../files/research/{Location}" />
          <area shape="rect" coords="216,156,286,210" href="../files/research/{OtherLocation}" />
        </map>
</div>
</body>
Am I just making a syntax error or is this just outside the scope of what I can use spry for? Any help is appreciated.
thanks in advance

I have one more question. What you gave me worked like a charm btw. Thanks a lot. Onto the question:
I'd like to use the same XML to also power a drop down menu, here's a snippet of the XML/XHTML below. I can't seem to get it to work on the drop down, the image map works great.
XML snippet:
<locations>
<location>
     <filepath>P1008.pdf</filepath>
     <coords>192,496,193,497,194,497,195,497,196,497,197,497,199,497,201,497,201,498,202,498,2 01,498,201,499,202,499,203,500,204,500,204,501,205,502,206,502,206,503,207,503,207,504,207 ,506,207,510,207,511,207,512,207,514,207,518,207,521,207,522,207,524,207,525,207,526,207,5 27,207,528,207,529,207,530,207,531,207,532,207,533,207,535,207,537,207,538,207,539,207,540 ,207,541,207,542,207,543,207,545,207,547,207,548,207,549,207,550,206,552,206,554,206,555,2 06,556,206,558,206,559,206,560,206,562,206,563,206,564,206,565,206,566,206,567,206,568,206 ,569,206,570,206,571,205,571,205,572,204,572,204,573,203,573,203,574,203,573,202,573,201,5 73,201,572,200,572,200,571,200,570,199,570,199,569,199,568,199,567,198,566,197,566,197,565 ,196,565,196,564,195,564,194,564,194,563,193,563,192,563,192,562,191,562,190,562,189,562,1 88,562,187,562,186,562,186,561,187,561,186,561,185,561,184,561,183,561,182,561,182,560,181 ,560,180,560,179,559,178,558,177,557,176,557,176,556,175,556,174,556,174,555,173,555,172,5 55,171,556,169,556,168,556,168,557,167,557,166,557,165,557,164,557,164,558,163,558,162,558 ,161,558,160,559,159,559,159,560,158,560,158,561,158,562,158,563,157,563,157,564,157,565,1 57,566,156,567,155,567,155,568,154,568,153,568,153,567,152,567,151,567,150,566,149,566,149 ,565,149,564,149,563,149,562,149,561,149,560,149,559,149,558,149,557,149,555,150,555,150,5 54,150,553,150,552,150,551,150,549,150,548,150,547,150,546,150,545,150,544,151,543,151,541 ,151,540,151,538,151,537,151,536,151,534,151,532,152,531,152,530,152,529,152,528,152,527,1 52,526,152,525,152,523,152,522,152,521,152,520,152,519,153,519,153,518,153,517,153,516,153 ,515,153,514,153,513,153,512,153,510,153,508,153,507,154,506,154,505,154,504,154,503,154,5 02,155,502,156,502,159,502,160,502,161,502,162,502,163,502,164,502,165,502,165,501,166,501 ,167,501,168,501,169,501,170,501,170,500,171,500,172,500,173,500,174,500,175,500,175,499,1 76,499,177,499,178,499,179,499,180,499,180,498,182,498,184,498,188,497,189,497,190,497,191 ,497</coords>
     <county>Adams County</county>
</location>
<location>
     <filepath>P1009.pdf</filepath>
     <coords>132,183,132,184,132,185,132,186,132,187,132,188,132,189,132,190,132,192,132,194,1 31,195,131,196,131,197,131,199,131,201,131,202,131,203,131,204,131,206,131,207,131,208,131 ,209,131,210,131,211,131,212,131,213,131,214,131,216,131,217,131,218,131,219,131,220,131,2 21,131,223,131,224,131,225,131,226,131,227,131,228,131,229,130,229,129,229,126,229,125,229 ,124,229,123,229,122,229,119,229,118,229,117,229,116,229,114,229,113,229,112,229,111,229,1 10,229,109,229,108,229,107,229,106,229,105,229,104,229,102,229,102,227,102,226,100,226,99, 226,98,226,97,226,96,226,95,226,92,226,90,226,89,226,87,226,87,225,87,224,87,222,87,221,85 ,221,84,221,83,221,82,221,81,221,80,221,78,221,77,221,76,221,75,221,72,221,71,221,69,221,6 8,221,65,221,65,220,65,219,65,218,65,217,65,216,65,215,65,214,65,212,65,211,65,210,65,209, 65,207,65,206,65,205,65,204,65,203,65,201,65,200,65,199,66,199,67,199,68,199,70,199,71,199 ,72,199,73,199,73,197,73,196,73,195,73,194,73,193,73,192,74,192,75,192,76,192,77,192,79,19 2,80,192,81,192,82,192,83,192,84,192,85,192,86,192,87,192,88,192,90,192,91,192,92,192,95,1 92,99,192,100,192,101,192,102,192,102,191,102,190,102,188,102,187,102,186,102,185,105,185, 106,185,107,185,108,185,109,185,110,185,111,185,113,185,114,185,115,185,116,185,117,185,11 7,184,117,183,117,182,118,182,119,182,120,182,121,182,122,182,123,182,124,182,125,182,126, 182,127,182,128,182,129,183</coords>
     <county>Allen County</county>
</location>
</locations>
Here's my XHTML:
<div spry:region="ds1">
     <p>Click on a county, or select from the following:
          <select onchange="jumpMenu(this)" name="menu1">
          <option spry:repeat="ds1" value="../files/research/{filepath}">{county}</option>
          </select>
     </p>
        </div>
<div spry:region="ds1"> <img src="../images/OhioCountyMap.gif" usemap="#Map">
     <map id="Map" name="Map">
     <area spry:repeat="ds1" shape="poly" coords="{coords}" href="../files/research/{filepath}">
     </map>
</div>

Does WDA support HTML Image Maps?

How to implement HTML image maps in Web Dynpro for ABAP?
Is the usemap (and related area shapes) available?
What I mean is explained by the following example:
<body>
<img src="trees.gif" usemap="#green" border="0">
<map name="green">
<area shape="polygon" coords="19,44,45,11,87,37,82,76,49,98" href="http://www.trees.com/save.html">
<area shape="rect" coords="128,132,241,179" href="http://www.trees.com/furniture.html">
<area shape="circle" coords="68,211,35" href="http://www.trees.com/plantations.html">
</map>
</body>
Thanks

Use IFrame UI element (if exists - hope yes) and link to it an HTML file with only your image-map.
If the image-map change by user, you must find the way to create the HTML in a dynamic way.
Sorry i haven't alot experience with ABAP, i did this in Java Web Dynpro but i guess you can do also with ABAP.

Image map bug in RH7

Hi,
I've noticed that sometimes after I create a rectangle over
an area in the image, the rectangle is not visible. To see the
rectangle, I save the topic. Close and re-open the topic. Now, I
can see the rectangle, and assign a link, add a screen tip, etc.
Any suggestions?
Thanks,
FMnRH

Good review, David. Thanks for the analysis!
Murray --- ICQ 71997575
Adobe Community Expert
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.projectseven.com/go
- DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs,
Tutorials & Resources
==================
"David Powers" <[email protected]> wrote in message
news:gqdp6t$70c$[email protected]..
> Murray *ACE* wrote:
>> Or whether it is an issue. For example, the fact
that others are not
>> able to reproduce the problem doesn't bode well in
that regard....
>
> I've just been reading the comments on the CS3 Livedocs
about the same
> problem. Two things stood out: the problem seems to
arise when the image
> is inside a div, and several people said the answer was
to create the
> image map in a new page. Being inside a div should not
present a problem,
> because all my tests have used an image directly inside
a div.
>
> What interested me was that there was no problem
creating an image map in
> a new page. Dreamweaver uses JavaScript in the
background to run a lot of
> its functionality. If there are any errors in the
underlying code, or if
> the code is complex, Dreamweaver can't analyze the page
properly. Another
> possible cause of problems is insufficient memory. If
you have the minimum
> RAM, but other programs are running, this is likely to
cause Dreamweaver
> to fail to function correctly, particularly on large,
complex pages.
>
> So, if Dreamweaver fails to create a hotspot on an
existing page, try it
> on a new page. If it works in the new page, it sounds as
though it's a
> problem with the complexity of the page and/or memory.
If it fails to work
> on the new page, it's back to square one. :(
>
> --
> David Powers
> Adobe Community Expert, Dreamweaver
>
http://foundationphp.com

Non rectangular hotspots for image maps

Hi everyone,
I've been stuck with this problem for a while. I'm trying to make an image map of sectors in a circle. I have the four coordinates of each sector. How do I determine if the the user has clicked inside a particular sector. Most of the examples for image maps I've seen are for rectangular hotspots. Is there a PointInRegion() method or anything like that??
Thanks a million for your help!

Found it out myself!!
There is a contains() method in the Polygon class that tests if a given point is contained within a polygon

Multiple image maps opening defined new windows

I want to make one image, with two image maps. Each image map
when clicked, opens a new browser window that is SIZED depending on
how I define it to be in the code.
Here is an example of an image with two image maps. How do I
add the code to make those maps open a SIZED window (lets say 500
pixels x 500 pixels?)
<img src="sidebarhome.jpg" width="165" height="113"
border="0" usemap="#foo" href="makedonations.htm"
target="_blank">
<map name="foo">
<area shape="rect" coords="2,13,163,58"
href="ceo_message.htm" target="_blank" alt="In these pages you'll
learn more about the CSO Program.">
<area shape="rect" coords="3,63,164,86" href="csoblog.htm"
target="_blank" alt="Visit our blog and discover what we're doing
next.">
</map>

Select each map and apply an OpenBrowserWindow behavior to
it.
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
==================
"devidas" <[email protected]> wrote in
message
news:e2mprq$mn$[email protected]..
>I want to make one image, with two image maps. Each image
map when clicked,
> opens a new browser window that is SIZED depending on
how I define it to
> be in
> the code.
>
> Here is an example of an image with two image maps. How
do I add the code
> to
> make those maps open a SIZED window (lets say 500 pixels
x 500 pixels?)
>
> <img src="sidebarhome.jpg" width="165" height="113"
border="0"
> usemap="#foo"
> href="makedonations.htm" target="_blank">
>
> <map name="foo">
> <area shape="rect" coords="2,13,163,58"
href="ceo_message.htm"
> target="_blank"
> alt="In these pages you'll learn more about the CSO
Program.">
> <area shape="rect" coords="3,63,164,86"
href="csoblog.htm" target="_blank"
> alt="Visit our blog and discover what we're doing
next.">
> </map>
>

Combining Image Maps and Dropdown Menus

In Dreamweaver 5.5, I want to create a dropdomn from a sliced graphic. There is a toolbox called the Tag Inspector that contains 3 tabs. The Behaviors tab with the + sign brings up a menu, from which I should to be able select the Show Pop-Up Menu -- but it's not there!
Where can I find a toll to create dropdowns from image maps?

Image maps don't produce drop-down menus. You would be better served with a CSS styled list menu.
Example 1 (same styled):
http://alt-web.com/DEMOS/CSS-Horiz-menu-2.shtml
Example 2 (multi-colored)
http://alt-web.com/DEMOS/CSS-Multi-colored-drop-menu.shtml
Nancy O.

How to produce image map with java servlet?

Hello,
I know the way to produce an image map from a static image. And I also know how to use ServeltOutputStream to generate an image on the fly. But I don't know how to use the dynamically generated image to produce an image map. Can anyone help me? Thanks a lot!
Louis

The database is a BioSQL database and I am using Biojava "BioSQLSequenceDB class" to access it. Sorry I don't really know the schema of the BioSQL
The easiest example is to ignore the database totally.
At the moment, I just want to do the folloing thing:
1. Use HTML form to retireve the height and length of a rectangle that user specified
2. draw the rectangle on the fly
3. make the rectangle a hyper link to an HTML documet, which represents "Hello world" to the user
Could you show me how to do it please?
Thanks very much.
Louis

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();
}

Ho do you remove Border on Image Map Links in Safari

Hi,
I am having a problem with Safari 5.1 with an image map. I designed an Image Map for my Website in Fireworks with three hotspots.
When you click on the hotspot in Safari to link to the page a border appears around the hotspot. It doesn't happen in any other browser.
Anyone have an idea how to get around this?
Web address is: http://79.170.44.76/agrisearch-site.org/

Well I found out! Here yer go! Paste the code in bold in the same area as the example and any Dreamweaver CS5.5 Hot Spots you create, this will get rid of the Blue Border when the links are clicked on in Safari. You would think either Apple or Adobe would sort this? Make life alot easier?
<html>
<head>
<title>"Trailer Music"</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style type="text/css">
body {
          margin-left: 10px;
          margin-top: 0px;
          margin-right: 0px;
          margin-bottom: 0px;
*:focus
outline: none;
outline-width: 0;
</style>
</style>
</head>
<body bgcolor="#FFFFFF">

<table id="Table_01" width="742" height="578" border="0" cellpadding="0" cellspacing="0">
          <tr>
                    <td>
                              <img src="http://www.donhughes-music.com/mailtrailers/images/index_01.jpg" alt="image1" width="361" height="298" border="0"></td>
                    <td><img src="http://www.donhughes-music.com/mailtrailers/images/index_02.jpg" alt="dhm link" width="381" height="298" border="0" usemap="#click"></td>
          </tr>
          <tr>
                    <td>
                              <img src="http://www.donhughes-music.com/mailtrailers/images/index_03.jpg" alt="" width="361" height="280" border="0" usemap="#Map"></td>
                    <td><a href="http://trailers.donhughes-music.com"><img src="http://www.donhughes-music.com/mailtrailers/images/index_04.jpg" alt="image4" width="381" height="280" border="0"></a></td>
          </tr>
</table>

<map name="click">
<area shape="rect" coords="51,135,260,185" href="http://trailers.donhughes-music.com" target="_blank" usemap="#click" border="0">
</map>
<map name="Map">
<area shape="rect" coords="12,140,276,198" href="http://www.donhughes-music.com" target="_self" alt="DHM Link">
</map>
</body>
</html>

Mistake creating an Image Map

Hello, I have a problem with my Image Map. Here are my steps:
1.Create areas for the Image Map
2.Create the Image Map with areas
3.upload the image
4.create the OTH file
5.Enable rendering information option
6.Create KM navigation iView and its layout set mode as default
All references for directories and for my pic are OK but it doesn´t show any Image Map. I need help please!
Thank you

Hi,
   You can follow this example:
In KM, image maps are used for a graphical depiction of folder contents. These objects are displayed using graphics instead of in their normal text form.
Step 1 Determine the image you want to use for navigating. This can be any JPG or GIF file. In this example I will reference the file world.gif.
Step 2 Configuring an image map. Take your image file world.gif and place it in the system. For our example place the file in the path: ../knowledgemanagement/etc/public/graphics. The subdirectory graphics was created within the public folder.
Step 3 In the documents folder, create the following folders:
World
     Within the World folder, create the subfolders:
     North America
     South America
     Europe
     Asia
Note: you can create as many folders as you like. This structure will serve as the navigation structure for world.gif image map.
Step 4 Determine the navigation coordinates for the image world.gif. Any tool can be used, for this example the tool GeoHTML was used. It is a freeware tool that can be downloaded from http://www.fegi.ru/geohtml.
The following coordinates were determined for the folders:
     North America: 253, 255, 303, 285
     South America: 424, 171, 474,201
     Europe: 368, 43, 418, 73
     Asia: 276, 37, 326, 67
Step 5 Create new link-sensitive Areas for the image map. Menu path: Configuration -> Content Management -> User Interface -> Image Maps -> Areas
Please note, an area would need to be defined for each area on the image map that would be link-sensitive areas.
Step 6 Defining an Image Map. In this step the name of the image map will be defined as well as specifying the path of the image, the tooltip, and lastly assigning the areas.
Step 7 Configure an Object Type Handling (OTH) file for the image map. OTH files are located in the /oth subdirectory within the /etc repository. Copy an existing OTH file in this subdirectory and copy it to world.oth. In This OTH file, define the navigation path, collection renderer, layout controller, action and image map. The OTH file should look as follows:
<?xml version="1.0"?>
<ObjectTypeHandler Name="Image Map world"
Class="com.sapportals.wcm.service.objecttypehandler.GenericObjectTypeHandler">
<SelectionCriteria>
<Paths>
    <Path>/documents/World</Path>
</Paths>
</SelectionCriteria>
<Properties>
<Property Key="rndCollectionRenderer"              Value="ImageMapRenderer"/>
<Property Key="LayoutController"                   Value="DefaultLayoutController"/>
<Property Key="rndShowActions"                      Value="false"/>
<Property Key="rndMap"                      Value="MapOfWorld"/>
</Properties>
<Actions/>
</ObjectTypeHandler>
Step 8 Display the image map. For the navigation iView that is being used, ensure that the iView property Layout Set Mode is set to default.
Step 9 Reload the object type handler in order for the system to read the new oth file world.oth. This can be done by within the Rendering Information link in any navigation iView for a user that is specified in the Debugging Settings (this is done in the user interface configuration).
Another option to reloading the object type handler would be restarting the J2EE engine.
Step 10 In the navigation iView for this mage map, navigate to the image map. In this example, the menu path would be documents/World
Patricio.
ps: If you want I can send you complete example.

Image Map Bug in Dreamweaver CS4

I've included a video sample of Dreamweaver's inability to
draw polygonal hotspots in Design view on an image map. The image
is inside an absolutely positioned div tag. After clicking the
first corner, the drawing tool is deactivated. A second click to
create the next corner point selects the underlying image.
In this video sample, I'm using Dreamweaver CS4 on a MacBook
Pro with a 2.4 GHz Intel processor and OS X 10.5.6. The image is
actually a transparent PNG. I'm very careful to click on an opaque
area, but that shouldn't make a difference.
The workaround is to open the image in a blank HTML file,
create the polygonal hotspots there and then copy and paste the
code back into the original HTML page. Adobe should really consider
fixing this.
The video can be viewed here:
http://www.youtube.com/watch?v=tRZGUi53PbI

Good review, David. Thanks for the analysis!
Murray --- ICQ 71997575
Adobe Community Expert
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.projectseven.com/go
- DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs,
Tutorials & Resources
==================
"David Powers" <[email protected]> wrote in message
news:gqdp6t$70c$[email protected]..
> Murray *ACE* wrote:
>> Or whether it is an issue. For example, the fact
that others are not
>> able to reproduce the problem doesn't bode well in
that regard....
>
> I've just been reading the comments on the CS3 Livedocs
about the same
> problem. Two things stood out: the problem seems to
arise when the image
> is inside a div, and several people said the answer was
to create the
> image map in a new page. Being inside a div should not
present a problem,
> because all my tests have used an image directly inside
a div.
>
> What interested me was that there was no problem
creating an image map in
> a new page. Dreamweaver uses JavaScript in the
background to run a lot of
> its functionality. If there are any errors in the
underlying code, or if
> the code is complex, Dreamweaver can't analyze the page
properly. Another
> possible cause of problems is insufficient memory. If
you have the minimum
> RAM, but other programs are running, this is likely to
cause Dreamweaver
> to fail to function correctly, particularly on large,
complex pages.
>
> So, if Dreamweaver fails to create a hotspot on an
existing page, try it
> on a new page. If it works in the new page, it sounds as
though it's a
> problem with the complexity of the page and/or memory.
If it fails to work
> on the new page, it's back to square one. :(
>
> --
> David Powers
> Adobe Community Expert, Dreamweaver
>
http://foundationphp.com

Image Map duplication error

I have a curious problem with image maps. Whenever they are
placed in the top of the page, in a table, they are duplicated and
offset in the bottom of the page and vice versa. If I draw an IM
for example in the bottom of the page there is a hot spot created
with the same link in the top of the page in the first table row.
If I delete the unwanted hot spot (duplicate) it removes the
wanted IM.
If I delete the image in the bottom table it seems that when
I added a Flash button the top IM then had no problem. In Photoshop
there are no maps in the image.
Is this due to a #div container, padding, floats, or
something ?
Here is the map code;
<map name="Map" id="Map"><area shape="rect"
coords="48,137,293,167" href="../color/index.html" target="_top"
alt="blah"
onclick="MM_nbGroup('down','group1','navBarRLink02','',1)"
onmouseover="MM_nbGroup('over','navBarRLink02','images/cmO_02.jpg','',1)"
onmouseout="MM_nbGroup('out')" /><area shape="rect"
coords="134,110,329,134" href="../HP9180_review.htm" target="_top"
alt="printer reviews"
onclick="MM_nbGroup('down','group1','navBarRLink02','',1)"
onmouseover="MM_nbGroup('over','navBarRLink02','images/printerO_02.jpg','',1)"
onmouseout="MM_nbGroup('out')" /><area shape="rect"
coords="207,67,332,93" href="portraits.html" target="_top"
alt="portraits"
onclick="MM_nbGroup('down','group1','navBarRLink02','',1)"
onmouseover="MM_nbGroup('over','navBarRLink02','images/portraitsO_02.jpg','',1)"
onmouseout="MM_nbGroup('out')" />
<area shape="rect" coords="231,42,328,67"
href="stills.html" target="_top" alt="stills"
onclick="MM_nbGroup('down','group1','navBarRLink02','',1)"
onmouseover="MM_nbGroup('over','navBarRLink02','images/stillsO_02.jpg','',1)"
onmouseout="MM_nbGroup('out')" />
<area shape="rect" coords="246,16,344,40"
href="beauty.html" target="_top" alt="beauty"
onclick="MM_nbGroup('down','group1','navBarRLink02','',1)"
onmouseover="MM_nbGroup('over','navBarRLink02','images/navBarR_02.jpg','',1)"
onmouseout="MM_nbGroup('out')" />
</map></body>
</html>

Your narrative is too vague to follow. Sorry.
Murray --- ICQ 71997575
Adobe Community Expert
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.projectseven.com/go
- DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs,
Tutorials & Resources
==================
"Neil Snape" <[email protected]> wrote in
message
news:g0shio$sg4$[email protected]..
> Unfortunately I didn't save the original html page that
was doing this.
> Thanks for your replies though.
>
> What I did was delete the Td, and TR, more than once ,
then rather than
> importing the same image just added a background image.
I was then able to
> place two Flash buttons into the TR, and no duplication
of the hot zones.
> After
> deleting the Flash buttons I was able to add two text
zones and place hot
> zones
> over the text whereas before they were duplicating and
deplacing the
> zones.
> Strange, I have no idea why, but it works as expected
now.
>

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.

Image Map examples?

Similar Messages

Maybe you are looking for