RH8 image map problem

I created an image map back in RoboHelp 6 and it worked perfectly. When I converted my project recently to RoboHelp 8, the image map pop-ups are not working correctly. I've checked the properties of the image map and they are correct. But the pop-up boxes do not display correctly. I'm going to attached an example of how the same one displays in RH6 and RH8 and a screen shot of my settings.
Can anyone help me with this?

After much trial and error testing around this image map issue, I cannot seem to find a fix for image maps within RoboHelp 8. No matter what I've tried (and it was a lot), nothing seems to fix the image map problem. Even creating a new image map on a new page with totally different info, pop up pages, image, etc. and turning OFF all breadcrumbs - the image map does not display correctly once generated (nor in preview).
I have found a VERY TEDIOUS workaround for this (that I'm not happy about). If I take my original pop-up topic htm pages (9 of them) from my RoboHelp 6 project and the original eHlpDhtm.js file from RH6 and place them in my output Help file from RH8 (overwriting the RH8 with the RH6 files), then the image map works correctly.
The eHlpDhtm.js file has many more scripts in it than just the image map triggers, so I'm not sure what all else I'm affecting when I'm fixing one problem (i.e. not sure how many more problems I'm creating at the same time when fixing one problem.)
It's almost like the "breadcrumbs" feature in RH8 has broken the image maps feature in RH8.
I'm still up for more suggestions as how to fix this if anyone has any ideas.

Similar Messages

URGENT: Image map problems

Hi,
I created an image map last night for my online portfolio, and I have a phone interview for an important job I'd love to get tomorrow. The website is www.lukekelly.com.
The problem is that the image map is working in IE and Opera, but not in Firefox or Chrome. I've gone over the code with a fine tooth comb, and can't figure it out. Can you help?
Here's the code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>LukeKelly.com - Online Portfolio of Luke Kelly</title>
<link rel="stylesheet" type="text/css" href="structure.css" />
</head>
<body>

<div id="container">
<map id="corkboard">
     <area shape="rect" coords="69,286,334,649" href="http://www.firstpersonpublishing.com" alt="First Person Publishing" title="First Person Publishing" />
    <area shape="rect" coords="469,292,711,623" href="flash/CPA_project.html" alt="Flash website" title="Flash website" />
    <area shape="rect" coords="79,717,321,1092" href="xml/index.htm" alt="XML website" title="XML website" />
    <area shape="rect" coords="468,716,722,1030" href="css/wedding/index.htm" alt="Wedding website" title="Wedding website" />
</map>
<img src="image.jpg" alt="Luke Kelly Online Portfolio" title="Luke Kelly Online Portfolio" usemap="#corkboard" style="border:none" />
</div>

</body>
</html>
Thanks in advance for any help you can provide.

Hi Luke,
Just add name attribute to your map tag as following:
<map id="corkboard" name="corkboard">
and it should work.
Regards,
Vinay

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.

Problem with image map

I am trying to create an image map for the map found on my homepage - http://www.smartcharteribiza.com/
I have followed a couple of tutorials and everything seems to be working in photoshop, but when I upload the image to wordpress, the map does not display properly, as you can see. There are white squares where I have tried to put the links as though that part of the image has been cut out.
I dont understand what is causing the problem. Any ideas?
Thank you very much

well i for one don't actually see any map just 3 yachts

Problem creating several image maps (linking to different pdf files) RoboHelp 8

Hi,
I have a problem creating several image map hotspots (that link to different .pdf files), from the same image using RoboHelp 8 HTML (WebHelp project).
After compiling, the first image map hotspot created, opens the .pdf file correctly. Unfortunately, when clicking on the other image hotspots, I get an error " Cannot find file...<file path>... Make sure path or Internet address is correct".
All the pdf documents are located in the same folder within the project.
Can anyone help?

Have you added the target files as baggage?
See www.grainge.org for RoboHelp and Authoring tips
@petergrainge

Problem while creating text pop-ups in image maps

Hi,
I need to create a text pop-up on an image, on mouse hover. I tried creating bookmarks to link with the image map and it worked. The problem is when I click on the text pop-up in the image, it goes to the bookmark (which is created in a separate topic), but I don't want it to go to the bookmark which is in a different topic. Is it possible to stay on the image itself without going to the bookmark?
Regards,
Latha

Hello again
The option I mentioned would indeed work inside a CHM.
There is possibly a way to accomplish what you are wanting, but to do it would require lots of JavaScripting. The simple fact you are asking if it can be done suggests that you aren't comfortable working with JavaScript.
Cheers... Rick
Helpful and Handy Links
RoboHelp Wish Form/Bug Reporting Form
Begin learning RoboHelp HTML 7, 8 or 9 within the day!
Adobe Certified RoboHelp HTML Training
SorcerStone Blog
RoboHelp eBooks

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.

Image map mac problems

I have created a html file used as a signiture in outlook.
When i send this out it works fine on pc outlook but when it is
opened on a mac the links that i defined using image maps don't
come across and it won't link to the site i choose
code is
<map name="ipc" id="ipc">
<area shape="rect" coords="5,581,601,774" href="
http://www.google.co.uk"
target="_blank" />
cheers

hi
please go through this thread it will help you.please don,t forget to give points
Workset Map Iview
with regards
subrato kundu

Image Map in a div tag causing problems in webpage

I have an image map in a div tag (I'm using Dreamweaver so
I've place hot spots on a gif within a div tag). When I preview in
a browser the hot spots are creating an empty space between the
image and the div tag below it, which there shouldn't be. Prior to
this I had done the same thing but using layers instead of div tags
and it was fine... there was no unwanted space. What am I doing
wrong?

Hi lauren,
I tried to replicate the above mentioned issue, but did not get the <div> around the image in Webhelp output. Would it be possible for you to provide more information on this:
At what point does the <div> start appearing around the image, as soon as the CBT expression is applied?
If yes, what is the expression?
What happens when expression is set to None again and individual CBT is under application
Is there a spacing or the CBT text just follows the inline image?
Please send us a sample file for the same, if possible. Thanks!
Amit

Bug Report: DW CS5.5 Crashes Every Time On An Image Map

I am posting this in lieu of contacting Adobe support. I went to my account to send Adobe a bug report and was told I needed to contact support via phone. That's pretty crappy. As a licensed user who's owned it less than three months, there's no direct path to tell you guys that your software is broken?
Here's the deal: I am working on an HTML landing page with one image map attached to one image. Literally, every time I make a modification to the code near the image (tied to the image map) then click into the live preview window, Dreamweaver CS5.5 crashes like a 70-year old on a bar of soap on the floor of the shower. It crashes hard. My only relief is to save the file before clicking into the live preview window. That's my only workaround to the problem.
But I'm left amazed that I can crash it every single time over an image map, flicking from the code to the preview pane. You would think that at version 11.5, a minor thing like that wouldn't hemorrage the supposed creme de la creme of web design software.
Here's the code I'm editing that causes it to crash:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
          <?php
          require_once("/var/www/html/c/index.php");
          $recip_name = $subscriber['first_name'].' '.$subscriber['last_name'];
          ?>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="/c/print.css" type="text/css" rel="stylesheet" media="print">
<title>Membership Special - No Commitment</title>
</head>
          <?php // Google Link Tracking Code ?>
          <script type='text/javascript' src='/c/google-analytics-code.js'></script>
          <?php // End Google Link Tracking Code ?>
    
          <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.9.0/build/reset/reset-min.css">
    <style type="text/css">
                    body {font:normal 14px/1.25em Georgia, "Times New Roman", Times, serif;}
                    h1,h2,h3,h4,h5,h6 {font-weight:bold;color:#333333;}
                    h1 {font:normal 28px/1.5em "Trebuchet MS", Arial, Helvetica, sans-serif;}
                    h2 {font:normal 24px/1.5em "Trebuchet MS", Arial, Helvetica, sans-serif;}
                    h3 {font:normal 20px/1.5em "Trebuchet MS", Arial, Helvetica, sans-serif;}
                    h4 {font:normal 16px/1.5em "Trebuchet MS", Arial, Helvetica, sans-serif;}
                    h5 {font:normal 12px/1.5em "Trebuchet MS", Arial, Helvetica, sans-serif;}
                    h6 {font:normal 8px/1.5em "Trebuchet MS", Arial, Helvetica, sans-serif;}
                    a, a:link, a:visited, a:active {color:#0055FF;}
                    a:hover {color: #002AFF;}
                    #wrapper {margin:0 auto;width:432px;}
                    #header, #footer {margin:20px auto;text-align:center;position:relative;}
                    #footer {margin:40px auto;}
                    #coupon {position:relative;}
                    #coupon, #coupon img {margin:0 auto;text-align:center;}
                    .personalization {position:absolute;width:100%;text-align:center;text-transform:uppercase;}
                    .printcoupon {text-transform:uppercase;}
          </style>
<body>
<div id="wrapper">
<div id="header">
          <h3 class="printcoupon"><a href="javascript:window.print();">Click here to print your coupon</a></h3>
</div>
<div id="coupon">
          <img src="images/19415coupon-01.jpg" width="432" height="432" />          
<img src="images/19357coupon-02.jpg" width="550" height="602" usemap="#imagemap" class="dontprint"/>
</div>
<div id="footer">
          <h3 class="printcoupon"><a href="javascript:window.print();">Click here to print your coupon</a></h3>
</div>
</div>
<map name="imagemap">
          <area coords="29,69,521,197" shape="rect" href="javascript:window.print();">
          <area coords="29,212,521,339" shape="rect" href="http://www.google.com" target="_blank" onClick="recordOutboundLink(this, 'Landing Page', 'http://www.google.com');return false;">
                    </map>
</body>
</html>

Bug Report and Feature Request https://www.adobe.com/cfusion/mmform/index.cfm?name=wishform

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

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

Images and image maps do not respond to events on Safari

Hello everyone,
We have been experiencing issues with events not responding to images associated with image maps, on Safari browser. After the DOM is loaded with new image and corresponding image maps, events such as mouseover and click observing this divs do not respond or get triggered. DOM seems to be updated correctly but behaves differently (and it works correctly in all other browsers except Safari).
This behaviour is only noticed in Safari browser running both on Windows and Mac. (Tested on Safari Version 3.1.1 on running on Windows and Mac)
For you all to have a closer look at this issue, I have created a sample that has this problem, similar to one we experienced during one of our recent projects. Please click on the link below to get to the sample (I recommend you to try this either in Firefox or IE before you do on Safari)
http://www.hivegroup.com/safari/test.html
(In the above sample,
- the javascript code initializes the DOM with image and image map
- assigns two event listeners to the div containing this image and image map
- when mouse pointer brought over the image, it shows the area id in the 'mobox' div
- when clicked, DOM is updated with a new image and new corresponding image map, assigns new event listeners and should continue with the same kinda behaviour it did for the first image (but doesn't in Safari browser))
All inputs on this issue are welcome and greatly appreciated.
Thanking you in advance.
Regards,
Shashi.

Let me explain what the pink area is. Like the first image that contains two white boxes, the pink area (as you call it) is a new image (containing four pink areas or boxes having an area id denoted to each) that imgDiv occupies after the 'click' event occurs.
Yep, i gathered that from seeing it work on firefox...
The point that I'm trying to make here is, there shouldn't be any difference in behaviour when imgDiv holds first image (two white boxes) or the second image (four pink boxes) that you get after we click on image or the third image (containing 6 boxes, multiple colors) which you won't be able to reach in safari browser.
well... I can reach them, but only via the blue space.
. We'll notice change in the red box displaying target id only when we mouse over a new area that is not currently being displayed in the red box.
except in webkit for safari 2, where thered bpx content sticks at whatever it was when the first image was clicked, unless mouse is moved to the 'all area', and then it sticks on imgdiv.
I completely understand what you see in safari 2. But are you saying there's some error in my script ? If so could you please point out and justify.
I dunno Shashi, just pointing out the errors that Safari 2 reports when I view your test page, in the hope it might help. I know little of javascript

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

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!

RH8 image map problem

Similar Messages

Maybe you are looking for