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.

Similar Messages

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!

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

CS4 will not create poly areas in image maps

How do I create an image map which will contain polygonal areas? I've selected my shape and chosen "polygonal" in the Attributes palette and then given it a URL. When I create an image map from the file, all my map areas (in the HTML) are "rect" (rectangles), which is not what I want. Can someone talk me through how to create a polygonal image map area which successfully gets exported into the HTML?
Thanks.

I am not an expert at this but I just created a polygon shape over a rectangle selected the polygon shape and added the url in the image map url field.
then I used the slice to to make the rectangle a slice and then selected the polygon shape and made that a slice and exported as jpeg from the Save for Web and Device as both html and image in the jpeg format.
all seemed to work the rectangle and the polygon are the same color so you can not see the shape but only the polygon shape seems selectable.
I just changed the color and it does only make the polygon shape selectable
here is a little video perhaps this will help.
http://mysite.verizon.net/wzphoto/Imap.mov
so let me see if I can summerazie what I did.
I made a rectangle then I made a polygon shape over it. I selected the polygon and gave it the image map attribute with the url
and save the file, I then sliced the art first selecting the rectangle and clicking on the rectangle with the slice tool then select the polygon and clicked on that with the slice tool as well and save for the web as jpeg with image and html as the option.
S that is what i did and it seems to work fine.

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

Should I be using image map?

Hey there,
Thanks in advance for reading this and hopefully someone will be able to advise me. I'm trying to create a graphic for a friend that has portions of the main graphic linking to Web sites. I did this once before, but I can't for the life of me recall how I did it. We want to create a single graphic that does this, then generate HTML code that people can post on their blogs. This is for an author's contest about an upcoming book - so the promotion is to have other people post this code on their blogs, which other people will see, post themselves, etc. The links within the graphic will 1) go to a Web site with the code so people can post it themselves; 2) go to a page to enter the contest (tell the author where they have promoted her book/contest); and 3) buy the book on Amazon.
Here's a link to the one I created last time: http://www.elisabethnaughton.com/share_image.html
Basically, I have a similar graphic that I need to divy to three links. I tried using image mapping in photoshop - but it's creating multiple image files. When I did it before, it just created the one - or at least just gave me one that I could put on her Web site and alter that HTML code you see on the link I provided. I've attached a file showing the new graphic and the three areas I need to turn into links.
I hope I'm making sense...is there a way other than image map to do this? I can't just have people save the image because it loses the HTML linking. And I can't have multiple images because it has to be simple code for people to post on their blogs.
Thank you so much for your help! I'm working with CS3 on a PC. But I also have a trial of CS4 on a Mac (which ironically ends tonight).
This time I'm going to write the steps I took to remember for her next books!
Thanks,
Lisa

Hi Lisa,
Are you using Dreamweaver as well?
I have never done image mapping in a grphic program such as Photoshop or Fireworks, but it is extremely easy to map your images once they are in Dreamweaver.
Brad Lawryk
Adobe Community Expert, Dreamweaver
Adobe Usergroup Manager, Northern British Columbia Adobe User Group

Image Maps link not working in Acrobat 8 3D PDFs generated from RoboHelp 7

All of my hyperlinks work when I just generated my RoboHelp
project to PDF using RoboHelp 7 with the new Adobe Technical
Communications Suite (with Acrobat 8 3D). However, the links to
topics within the document didn't maintain from the image maps. I
had originally created flowcharts in Microsoft Visio, exported then
as .gifs, and imported them into topics in RoboHelp X5. Then I
created image maps from the boxes to topics in the RoboHelp
project. When I converted my project to RoboHelp 7 and generated
the PDF, all the links work great, except I don't get the
finger-pointing cursor when I hover over the boxes in the
flowcharts like I do with regular hyperlinks. Can someone please
tell me why? Thanks!

Sigh... and this is why no one like to work with newbies...
Thank you for your help. I am embarrased to admit that this was the issue.

Image map (Open a link in the same place not a new Window)

Image map (Open a link in the same place not a new Window)
I'm using image map From KM a made a Image and I put the link like this "documents/images/image.jpg" okay, its works, but when I click on the link open other page, How to open on the same page ???????

Hi Marcus,
Try out this link. It may be helpful to you.
Opening of IView in New Window
Regards
gEorgE

Image Map not working in Dreamweaver CC

I'm trying to create an image map over a jpeg but when I try to draw a rectangle over the image, a grey stroke gets placed over the image then moves with the cursor.
Here is the only code on the page. Any ideas as to why this isn't working?
<img src="/SampleImage.jpg" alt="" width="900" height="2779" style="margin: 5px; width: 649px; height: 2000px;"/>

Let me see if I have this right...
1. From Design View, you are clicking your image to select it
2. You are then selecting the Rectangle tool from the bottom left of the Properties window
3. You are then clicking and dragging on the image in Design View to create your map area
4. DW puts a grey line around the image and moves it instead of adding the image map and area tags?
Run your page for code errors at http://validator.w3.org. I can't duplicate what you describe and DW will do strange things when code errors are present, it could be an error DW doesn't know how to fix that's causing the normal image map functionality to fail.
If you have clean code and are doing what I list above and it's still not working, it may be time to clear the program cache:Deleting a corrupted cache file

Image Maps not working in Firefox or IE

For some reason my Golive 9 submenu image maps (News, Locations, etc.) work in Safari, but not in Firefox or IE. Plus some elements seem scrambled in the two latter browser apps. Here's the web page: http://www.frankparsons.com/express/index.html
Why is this happening?

>Now I'm wondering if I should bag Layout Grids altogether to make the eventual transition to DW a little easier?
It couldn't hurt. Using your own CSS (or even old-school tables) will generally make any transition less painful than using program-specific features like the layout grid.
>BTW, what is equivalent to components in DW?
I think the equivalents in DW are called Library items. Haven't used them though, as I usually stick with PHP includes to avoid anything proprietary.

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

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

How to use the same image map over and over

Sorry, I posted this a couple of years ago and got a good answer by Murray. I'm so rusty with it, I can understand how it works anymore.
Question:
I have a large jpeg image map for a hundred pages. The jpegs are all the same except I changed the city name for each one.
So for each corresponding htm page, the 4-5 links out are the same.
Waht is the trick to not have to create by hand hotspots? thanks.
I have previous notes, but I don't understand anymore, (too rusty) what they mean:
The good news is that you really don't need a template at all.
Just open one of your existing pages in DW, select that central image, browse to select the correct replacement image, and save the page with a new name. It will have all of the image maps already there, from the original image. One and done as they say."
My old interpretation of this:
select the large jpeg and then in link field drag over to the new city jpeg

Ok, Nancy, code copy/ paste did work fine.
what does this mean:
"Change the image in the properties panel to display your new image."
(the image is displaying ok)
NEverthesless, I think I got Murrays old notes.
Here is my new version of Murrays writing, easiest way I think:
You open up a pre-existing html, say Chicago. Then drag over with pointer to the new jpeg you want (Buffalo). It replaces Chicago with the buffalo jpeg, all links work perfectly. Then do a save as called Buffalo.

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

Image Mapping in PS CS4??

Similar Messages

Maybe you are looking for