Linking layered graphics

[mjohn551]

Is there any way I can place a small .jpg on a larger one and render the smaller image clickable (that is, linked to a third page?)  I was hoping I could link layers, but that is apparently not possible.

Thanks.

Mike

]

[Jon Fritz]

Probably the easiest way, if you're not worried about responsive scaling for mobile devices, would be to just turn the two images into one in Photoshop, add it to the page, then use an Image Map hotspot from the Properties window to link the smaller inset image to wherever you like.

[mjohn551]

thanks Jon,

Sounds simple.  How do I use or create an Image hotspot?  Am using DWCS4.  Responsive format not an issue.

[Jon Fritz · Accepted solution]

1. Click the Image in Design View to select it

2. In your Properties window (Window > Properties or Ctrl + F3 if it's not open), click the area hotspot tool you want to use (rectangle, circle or polygon)

3. Click and drag the hotspot over the image where you want the link to appear.

4. With the hotspot selected, add the location to the Link field in the Properties inspector.

Yours won't be the same color, but the icons themselves haven't changed location or basic look since introduced...

If you don't see the hotspot options, make sure you are in Design View, the image is selected, and that the Properties window isn't collapsed. I don't recall if CS4 had it, but later versions have a tiny triangle on the far right side of the Properties window that collapses/expands the Image Map tools.

[mjohn551]

Very cool! I clicked the hotspot but was unable to drag and drop it over the image.  Must I do something else?

[Jon Fritz]

Sorry, looking back, I guess that wasn't quite as clear as it should have been.

Clicking the tool selects the tool shape (rectangle, circle or polygon).

Once selected, you then go back to the image in Design View to click and drag/draw the chosen shape.

The Properties window should automatically change to the new shape so you can fill in the Link field.

[mjohn551]

Jon,

Below is screen shot of image I'm working with. It's part of a map with

little gnomes placed strategically, each of which will be linked to an

.html page.

Question is - after I mark a particular gnome with a shape - how do I

save/remove the shape that remains over the gnome?

Mike

[Nancy OShea]

These web forums do not support email attachments.  You need to post images directly in a web forum reply - see screenshot.

The code is saved when you save your HTML page.

The Hotspot shapes remain visible in Design View so you can see them.

The shapes are not visible in Live View or when Previewed in browsers EXCEPT in  Internet Explorer which puts a distracting blue border around image map hotspots.  Try using a different browser.

[mjohn551]

Nancy,

Think I answered my own question (graphic attached to keep me honest), but, the reason I originally asked was based on a new "anomaly".  Namely, While working on this page, the functionality of viewing the page live, via F12 or Preview in Browser > Firefox, suddenly stopped.  That is, I cannot preview files.  I saw this occurred with other users, but none of the answers seemed appropriate. 

Thanks, Mike

[Nancy OShea]

Right-click on open tab and select Open in Browser.

[mjohn551]

When I right click the file, Compare with Remote is the last option shown.  There is no Open in Browser.

[mjohn551]

And, when I click File > Preview in Browser >, nothing happens regardless which selection I choose.

[Nancy OShea]

1) Did you create a local site folder for your project by going to Site > New Site?

2) Have you saved your document (index.html)?  And do you see your site folder in the Files Panel (F8)?

[mjohn551]

Nancy,

Yes to all.  And the F12 non-functionality applies to 5 different sites that I've been working with for years.  Like I said, an anomaly.  This has never happened before.  Am at a loss(:

[Nancy OShea]

F12 invokes Real-Time Preview which is different than ordinary Preview in Browsers as it connects to an Adobe server.  In my experience, RTP it is prone to failure which is why I use right-click > Open in Browser without the the F12 key.

If you're not able to launch any browser to view your files, then something is wrong with your installation.

Start with Restore Preferences.

Unusual behavior in Dreamweaver? Try restoring preferences.

If that doesn't work,  use the CC Cleaner Tool below followed by a software re-install.

Use the Creative Cloud Cleaner Tool to solve installation problems

[mjohn551]

I ran CC Cleaner with no change.  I didn't reset preferences because it seemed too big a deal to redo.  I did, however, copy the html files, etc., onto a laptop also running DW4 and everything worked perfectly, including viewing in browser.

Only thing I can think of is that the problem began after updating iTunes on the subject desktop yesterday.  I subsequently uninstalled everything Apple from my desktop and now, when booting, receive a missing icudt55.dll file System Error (re: APSDaemon.exe).

Might this mean anything to you?

[Nancy OShea]

See this Apple support article for details on uninstalling iTunes and its related software.

Remove and reinstall iTunes and related software components for Windows 7 and later - Apple Support

[mjohn551]

Thought about reinstalling iTunes, but then thought not.  Guess it can't hurt.  Will give it a try.  Thanks for the push.

[mjohn551]

iTunes reinstalled but Preview - any way you do it - still doesn't work.  I did notice though, that the Windows key is disabled.  Curiouser and curiouser.

[mjohn551]

Quick question if you're still around, is there a Preferences file i can replace on the non-working computer with one on another computer that I know works? Same folder names and directories.

[Nancy OShea]

If you're using Creative Cloud, you can Sync settings to the Cloud and then import them from the Cloud.  See screenshot.

[mjohn551]

Hi Nancy,

Am working on the .html page on a laptop and all is well with viewing in browsers, although the same problem persists with primary desktop.

Since you w3re so helpful the other day, thought I might mention something that may be of interest to you.  If I activate CS4 and Open the "problem" .html page, I still cannot preview in browsers.  Then, subsequently and while in the same session, if I open another fiIe, I am unable to preview THAT or any other .html file in any of 4 other sites.  On the other hand, if I activate and then Open CS4 and click on a different .html page from a different site, I CAN preview in browsers.  Until and unless I then click on the problem .html.

Have renamed and copied the .html file to myriad other names.  That's not the issue.  Have no idea what is, but thought I'd share this with you.

[Nancy OShea]

I'm no expert with legacy CS4 as I never used it.   My guess is your problem file is corrupted or it contains so many critical code errors it's causing your software to choke.

You might want to open it in a plain text editor like NotePad or Brackets and see if you can isolate the problems.

If that can't be done.  Delete it and start over with a similar site page that doesn't have problems in it.

Nancy

[Nancy OShea]

Image maps don't work on Layers (aka absolutely positioned divs). 

1. Start with a new document. 
2. Insert an image.
3. Invoke the Map shape (see screenshot) by clicking and dragging a shape over your image.
4. Add URL to the Link field.

[osgood_]

themeister  wrote

Is there any way I can place a small .jpg on a larger one and render the smaller image clickable (that is, linked to a third page?)  I was hoping I could link layers, but that is apparently not possible.

Just for your reference you can put a <div> (youre calling it a layer) inside another <div> and have one <div> sit above the other using absolute/relative css positioning.

<div class="large_image">

<div class="small_image">

<a href="#"><img src="small_image.jpg" alt=""></a>

</div>

<!-- end small_image -->

<img src="large_image.jpg" alt="">

</div>

<!-- end large_image -->

Css

.large_image {

display: relative;

}

.small_image {

width: 100px;

height: 100px;

display: absolute;

top: 30px; /* distance from top of large_image

left: 60px; /* distance from left of large_image

}