Image Map with rollover mouse effect

Hi,
I inserted a image map to portal and I'm facing following problem:
The image is a world map and I want the regions e.g. North America to be highlited if the mouse is over the region. I've already created the images for that and have uploaded them.
How can I reach my goal? Has anyone an idea?
Here's my image map so far:
<MAP NAME="mymap">
<area shape="poly" coords="9,31,10,43,8,56,24,49,41,66,45,102,63,127,86,136,69,105,85,105,150,35,156,11,136,5,100,17,78,25,62,31,8,26,10,29,10,29,3,20"
HREF="http://server:7778/portal/page?_pageid=553,68779&_dad=portal&_schema=PORTAL" target="_blank"
alt = "North America"
onmouseover="mymap.src='http://server:7778/pls/portal/docs/PAGE/PGR_BRS_PUR/TAB_STANDARD_INFO/TAB78030/WORLD_NA.BMP'">
</MAP>
Best Regards
Daniela

<img src="/../..../img.gif" border="0" name="image" width="453" height="417" usemap="#imageMap">
<map name="imageMap">
<area shape="poly" coords="277,....."
href="/portal/page?_pageid=313,215796&_dad=portal&_schema=PORTAL" target="_top"
onMouseOver="document.images['image'].src='/..../....img_over.gif';"
onMouseOut="document.images['image'].src='/.../...img.gif';">
I use this in html pages that I integrate in portal trough URL pages (for easier updates management). But it should work directly in portal imagemap too.
Regards
Loko

Similar Messages

  • Image map with hotspots refuses working in Google Chrome

    I made a page with an image map with a few mouse-over's to swap images. Everything is working fine, but the image map refuses working in Google Chrome. It's a little complicated to explain, so here my link. You can see the broncode if you want.
    http://users.telenet.be/gepo/X_Tests/mouse_over.html
    To see the misfunction, you need to open the link in Chrome.
    Is there a workaround for Chrome ?

    Thanks for the link. Clicking off the 'Overlap Items Below' button fixed the issue. The other tip, test your site on different platforms, mobile devices and browsers – it was working in Safari but not in Chrome .

  • 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 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 maps error with IE 6

    Hallo!
    I have a problem with Internet Explorer 6 (Windows XP) and only 2 image maps with rollovers on a page with a total of 6 image maps.
    This is the page:
    http://www.eqmultimedia.it/paolobisi/home_2009f.html
    Everything is OK on Mac OS X (Safari and Firefox) and IE 7 on Windows XP and Vista.
    ONLY the 2 image maps named "ART FOR SALE" and "CONTACT" do not work with IE 6.
    This is my workflow:
    - Page design in Photoshop.
    - Slices, image maps, rollovers and remote rollovers with ImageReady
    - Save html page and images folder from ImageReady
    - Import html page and images folder in Golive CS
    - Check and correct ALL the links in the image-map code generated with ImageReady
    - Export site from Golive (with Flatten Script Library) and FTP transfer on Unix server.
    I suspect that the image-map code is not FULLY loaded by IE6 and for this reason only 2 image maps on the page do not works.
    Any suggestion will be very appreciated.
    Thank you and sorry for my English!
    ettore

    Correct link:
    www.eqmultimedia.it/paolobisi/home_2009f.html
    Sorry!
    ettore

  • Maps zoom/scroll with Magic Mouse

    Hi
    In Maps.app, scrolling over the map with magic mouse, moving the map instead of zooming, i need to press SHIFT when i need zoom in or out. Other apps (google maps in safari, or google earth.app) working with zoom set as default. 
    How can i change this behaviour?

    I second this. seems like an oversight. i can live it, i'll just screw up every time I try maps because at this point, google Maps is still better. so it'll be quite some time before i think of Maps first.
    I do feel like Maps is just a Beta right now. There are 0 preferences.
    I tried using Better Touch Tool but it doesn't seem to work... i could be doing something wrong though.
    If someone figures out a trick with the BTT, and Maps, please let us know.
    In the mean time, apple has it's work cut out for it. Maps has Millions of Miles that needs updating/correcting/ect. perhaps in one of it's many to roll outs, they'll give us some preferences.

  • Image Mapping in PS CS4??

    Hey guys,
    Alright, I'm trying to learn new things, and I'm converting over to designing parts of my web site with Photoshop CS4. Eventually I would like to be able to design a full template and use that as my web page etc, but right now I'm only doing a navbar. Previously, I used ImageReady to make my image maps (only 1 page right now, so I have the navbar pointing to 5 different parts of my page using the href="#<name" link). However, after doing a lot of searching through Google, I have yet to find one guide on how to make image maps with CS4... I've created the entire navbar, along with layers for onMouseOver for each link. Seeing as how I have no ImageReady with CS4, I'm at a loss. I've tried to create a navbar with DreamWeaver CS4, but it just wanted to do buttons and my one attempt at testing DW's navbar with my rollover images was a huge failure.
    So could someone, anyone, please please explain how to make image maps from my navbar.psd file? Thank you!! (A few other tuts said to Save As > HTML which is a flop, because I don't have HTML as an option...)

    I was afraid of that. Thank you Zeno.
    I finally did get my image maps drawn and everything is working fine now... you are right, it is all through Dreamweaver. I ended up starting my first image map with an online website, and once I got the HTML code for the first map, I was able to copy and adapt it for the other 5 area's to map out. Apparently there is a map drawing tool in DW program that I didn't see.

  • CFDocument Image Maps

    We've run into issues using client image maps in CFDocument.
    We're able to render the image maps fine, and when we use a fixed
    image size like 800x600, they work fine:
    <img src="/express/cache/#imagename#" class="map"
    usemap="##map1" border="1" width="800" height="600"/>
    However, when we attempt to use percentages to get the image
    to scale to the size of the whole page,
    <img src="/express/cache/#imagename#" class="map"
    usemap="##map1" border="1" width="100%" height="100%"/>
    we get a ColdFusion error, as follows:
    An exception occurred when performing document processing.
    The cause of this exception was that:
    coldfusion.document.spi.DocumentExportException:
    java.lang.NumberFormatException: For input string: "100%".
    Taking out the map reference makes this work as expected.
    So, okay, the parser must be getting confused because it
    doesn't know how to lay out the image map with the x% scaling.
    We'll just use the exact size of the image to scale it to the size
    we want... This is when we run into another issue: We can't seem to
    accurately size images in CFDocument. When we set the image to
    1024x768 (or something like that), the image renders at the exact
    same size! (The underlying PNG is actually 2400 x 1800).
    So, the questions are:
    1) Is there any way to dynamically scale the image and use
    image maps in CFDocument, or
    2) How in the world does the image scaling work (in the black
    box)?
    We just want to have a full screen mapped image that we can
    use as a TOC for our CFDocument.
    Thanks!

    John,
    the Robohelp built-in editor messes the code up, so I never
    use it. However, not even Dreamweaver supports interactive effects
    in image maps. I wanted the hot spots to hover like hyperlinks.
    Seems to me much more convenient for the user.
    quote:
    I'm not sure what you are trying to do when you say "the area
    tag cannot be formatted using CSS." What kind of formatting do you
    want on a piece of an image?
    Unfortunately, you cannot use the hover attribute in css for
    the <area href> tag. That is, why you need a more complicated
    solution for interactive hot spots in image maps.
    My first solution had some flaws. Eventually, I found this
    smart piece of Javascript:
    http://www.netzgesta.de/mapper/
    This really did the trick and works great. The script is free
    of charge for non-commercial use only.
    Mike

  • Image map & Drill Down Reports in Apex

    Hi,
    I am looking to create a Image map with drill down reports. I don't know Java but know PL/SQL functions/procedures very well. I would appreciate if someone help me with this.
    I am looking following functionality:
    1. Upload an image in Apex
    2. Create click-able areas in it.
    3. User click on these hyperlinks and move to next page with drill down report as per the vaiable in hyperlinks
    Wajid

    Try viewing this blog entry to see how to do image maps in APEX..
    http://www.danielmcghan.us/2009/05/html-image-maps-old-trick-with-new.html
    Thank you,
    Tony Miller
    Webster, TX

  • Image map problem in Firefox 2.0.0.9

    I have created a page in Dreamweaver with an image that has
    an image map with six links. It works correctly in IE, Safari, and
    Opera, but Firefox 2.0.0.9 has an issue. When I click on the top
    link, I get the second url. When I click on the second, I get the
    third url, and so on. The last hotspot does not seem to link at
    all. The links seem to be offset by one position somehow. I think
    this worked before 2.0.0.9, but I am not sure.. I thought that this
    page was thoroughly tested previously.
    Has anyone observed this before, and is there a solution?

    Two items in the Advanced JavaScript window were removed as of the Firefox 4.0 version, but they are still available thru about:config .
    Type '''about:config''' in the URL bar and hit Enter. <br />
    ''If you see the warning, you can confirm that you want to access that page.''
    Filter = '''dom.disable_window_status_change''' = double-click to toggle to '''false''' to allow websites to mess with status text.

  • Integrating image map in iWeb?

    I've created an image map with MapSpinner and have it saved as an HTML file. Is there anyway this can be integrated into an iWeb page like, say, a QuickTime movie or a Photo? Or am I going to need a hyperlink that points to an external page/site?

    Put the html file (map-name.html) and the image file that you created the map from in a folder
    Give the folder a name like iMageMap and upload it to the root folder on your server so that the URL to the html file is...
    http://www.website.com/iMageMap/map-name.html
    Use an iframe code in an html snippet to get the map onto your page.
    <iframe src="URL to the map-name.html" width="600" height="400" frameborder="0"> </iframe>
    Adjust the width and height to the size of your map image file.

  • 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 Maps and Hotspots in a liquid layout?

    I'm wondering if anyone is aware of a way to make an image map with hotspots conform to a liquid layout. Since each hotspots has its own coordinates, when the image moves (grows smaller or larger) those hospots no longer coincide with those specified coordinates on the map. I currently have a map with rollovers and clickable links (an image map with hotspots) at a fixed 987 pixels and I'd like to redo it so it's 1920 pixels and liquid. I've got the rest of my site working with a liquid layout, but can't figure out the image map thing and an exhaustive search online has proved unfruitful as have all my attempts. Here's a link to my current liquid site and the page where the image map is. Thanks.
    http://christopherdeldridge.com/PhotoWorldMap.php

    All things are possible but this one is right on the edge!  You *could* do this by adjusting EACH coordinate dynamically but it would be a major beast given the number of hotspots you are using, and the number of coordinate pairs in each.
    I wouldn't want to tackle this project.
    Perhaps Flash is the answer here?

  • 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.

  • Can Acrobat XI convert an HTML file that contains an image map?

    An HTML page I have has a complex image map with many links. It works fine in HTML but in converting it to PDF in Acrobat 11, only the top row of links in the map work. Clicking vertically below one of these links activate the link at the top but not the intended one.
    I found this about creating an image map http://tinyurl.com/c6sonnj but do not understand the reference to Scene 7.
    If it helps here is the HTML:
    alt="Mute Button" title="Mute Button"/><area href="/man/Audio_Tracks#solo" shape="rect" coords="61,245,108,262" alt="Solo Button" title="Solo Button"/><area href="/man/Audio_Tracks#gain" shape="rect" coords="20,268,101,290" alt="Track Gain Slider" title="Track Gain Slider"/><area href="/man/Audio_Tracks#pan" shape="rect" coords="20,291,101,320" alt="Track Pan Slider" title="Track Pan Slider"/><area href="/man/Audio_Tracks#collapse" shape="rect" coords="31,371,93,389" alt="Track Collapse button" title="Track Collapse button"/><area href="/man/Audio_Tracks#scale" shape="rect" coords="109,191,140,389" alt="Vertical Scale" title="Vertical Scale"/><area href="/man/Audio_Tracks" shape="rect" coords="141,196,749,292" alt="Left Channel of Stereo Audio Track" title="Left Channel of Stereo Audio Track"/><area href="/man/Audio_Tracks" shape="rect" coords="141,293,749,390" alt="Right Channel of Stereo Audio Track" title="Right Channel of Stereo Audio Track"/><area href="/man/Audio_Tracks#panel" shape="rect" coords="12,194,108,390" alt="Track Control Panel" title="Track Control Panel"/><area href="/man/Selection_Toolbar#rate" shape="rect" coords="20,447,100,470" alt="Project Rate Drop-Down Menu" title="Project Rate Drop-Down Menu"/><area href="/man/Selection_Toolbar#snap" shape="rect" coords="131,450,196,468" alt="Snap To Checkbox" title="Snap To Checkbox"/><area href="/man/Selection_Toolbar" shape="rect" coords="9,423,771,479" alt="Selection Toolbar" title="Selection Toolbar"/></map>

    Only via the Print Dialog's Save As Adobe PDF Workflow.  However, Pages has it's own export to PDF that works wonderfully and saves hyperlinks.

Maybe you are looking for