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?

Similar Messages

Image mapping and Master Detail Regions in CS3

Excellent advice to leave a url. I think I am having a similar problem with conceptualizing datasets for utilization with image mapping. I obviously cannot use the Get Schema via the Attach New Data set icon because I have rendered my own Master region. I am working with CS3. I will launch the site and ask for help from the url.
Here is:
http://www.atmfoods.net16.net/
I need help with this. With the phasing out of tabulated layouts for div based layouts I run into quite a few snags attempting to work around deprecation of tags issues. What am I trying to do here:
1. Get my spry menu to drop down in the child table and not the parent table aligned top left.
2. Use image mapping of the thumbnail images in integration with datasets and spry Master/Detail regions, even if hand coded to achieve, for a larger image and data on each thumbnail on an accordion spry widget. I am thinking grid systems for the future of my works and hope to achieve some relative command of grid systems. Without gridlock.

Hi,
The dataset name in the NestedDataSet constructor does not go
in quotes.
Try var dsCreds = new Spry.Data.NestedXMLDataSet(dsAgents,
"credentials/cred");
and see if that helps.
Don

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 .

Image Maps and netui

          How would I convert an image map to invoke an action for each area?
          i.e. in the map below how would I invoke the showSummaryValue action in the first
          area for example I would like to replace href="ScheduleSummaryValue.htm" with
          somethin like <netui:area action="showSummaryValue" ...
          <map name="m_tabBar">
          <area shape="rect" coords="1,2,119,25" href="ScheduleSummaryValue.htm" alt="Value"
          >
          <area shape="poly" coords="254,8,257,4,261,3,357,3,361,4,364,8,367,18,367,22,363,24,255,24,251,22,251,18,254,8,254,8"
          href="#" alt="Improvements" >
          <area shape="poly" coords="130,8,133,4,137,3,233,3,237,4,240,8,243,18,243,22,239,24,131,24,127,22,127,18,130,8,130,8"
          href="ScheduleSummaryLand.htm" alt="Land" >
          </map>


Well, you chose the wrong strategy, I'm afraid. Since it's all one big image, the browser has no way of tracking the last active object and the popup enforces a redraw of the content with default alignment. convert the previews to individual thumbnails and the behavior will be much better.
Mylenium

Image Maps and e-Tester

Is there a way to have e-Tester see image maps?
Basically I have a jpg image thats a chart/graph and each bar has a mouseover tooltip giving a description. I want to verify that this tooltip shows up properly on mouseovers.
I've tried custom object test and thats not working...
Ideas?

I assume that you have and are trying to test the title attribute for each area tag. I ran a custom test an image map on one of our apps for you and found that I am able to check each title that I create custom tests for. You could also do a "for each" loop with VBA on the area tags and get the values out. When you say the custom test does not work, what is the problem you are running into? Does it always fail? Does it grab the value in the wizard?

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.

Black border around hotspots in Image map?

I have an image map in my HTML file that contains three
circular hotspots. When they're viewed in a browser, each one has a
black border around it after it's clicked on. I've seen other help
threads on the border problem talk about putting 'border:none" in
the IMG tag, but there's no IMG tag..it's an image map and border
is already set to "0". The code is below:
<map name="satelliteLinks">
<area shape="circle" coords="94,64,41" href="
http://gi.leica-geosystems.com/LGISub5x307x0.aspx"
target="_self" />
<area shape="circle" coords="297,51,48" href="
http://www.erdas.com/erdasCompanyNews.aspx"
target="_self" />
<area shape="circle" coords="517,59,43" href="
http://www.erdas.com"
target="_self" />
</map>
Any suggestions would be very helpful as my deadline to have
this complete is today!!

jgleica wrote:
> I have an image map in my HTML file that contains three
circular hotspots. When
> they're viewed in a browser, each one has a black border
around it after it's
> clicked on. I've seen other help threads on the border
problem talk about
> putting 'border:none" in the IMG tag, but there's no IMG
tag..it's an image map
> and border is already set to "0". The code is below:
> <map name="satelliteLinks">
> <area shape="circle" coords="94,64,41"
> href="
http://gi.leica-geosystems.com/LGISub5x307x0.aspx"
target="_self" />
> <area shape="circle" coords="297,51,48"
> href="
http://www.erdas.com/erdasCompanyNews.aspx"
target="_self" />
> <area shape="circle" coords="517,59,43" href="
http://www.erdas.com"
> target="_self" />
> </map>
>
> Any suggestions would be very helpful as my deadline to
have this complete is
> today!!
>
Thats the way the web works, its an accessibility feature, as
its how
you can tab around the page and see where the links are. Look
at any
website, click the link, and see what happens.
Steve

Global change for hotspots on image map

The image underneath my hotspots needed to be changed in
Photoshop. It's on all of the pages, and when the image was
replaced in Dreamweaver, I noticed that all of the hotspots that I
created manually in Dreamweaver were lost. How can I create
hotspots on just one of the pages and have it apply to all of the
pages? (I'm not using templates, by the way.)
I created slices on the image in Image ready, then exported
images and html, but I'm not sure how to incorporate and organize
everything in Dreamweaver.

jgleica wrote:
> I have an image map in my HTML file that contains three
circular hotspots. When
> they're viewed in a browser, each one has a black border
around it after it's
> clicked on. I've seen other help threads on the border
problem talk about
> putting 'border:none" in the IMG tag, but there's no IMG
tag..it's an image map
> and border is already set to "0". The code is below:
> <map name="satelliteLinks">
> <area shape="circle" coords="94,64,41"
> href="
http://gi.leica-geosystems.com/LGISub5x307x0.aspx"
target="_self" />
> <area shape="circle" coords="297,51,48"
> href="
http://www.erdas.com/erdasCompanyNews.aspx"
target="_self" />
> <area shape="circle" coords="517,59,43" href="
http://www.erdas.com"
> target="_self" />
> </map>
>
> Any suggestions would be very helpful as my deadline to
have this complete is
> today!!
>
Thats the way the web works, its an accessibility feature, as
its how
you can tab around the page and see where the links are. Look
at any
website, click the link, and see what happens.
Steve

Why does my image look wrong in liquid layout?

I'm making a site for an artist and tried using a liquid layout in CS5. I also made one in fixed like I usually do. The width on both is 1260 and the header image on both is 1260 px wide.
On the dh5 (fixed) one, the header is centered. On the dh7 (liquid) one, the image, which is a title, is moved slightly to the left. Is this fixable or should I just stick to fixed layouts?
dh5: http://bethniebuhr.com/dh5.html
dh7: http://bethniebuhr.com/dh7.html
Thank you.

Hi
The problem with the header in the semi-liquid layout, (not liquid as it has a max and min width) is that being an image it has a fixed height and width and this is causing your problems.
Using images in liquid and semi-liquid layouts requires a completely different work-flow to what is required in a fixed layout as one must allow all the images to expand within their designated areas and ensure they still retain their aspect ratio, all of which is possible but will require much more work in learning that that normally required.
PZ

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

Can you create an image map that will link to a different element on the same page?

I have used image maps before and know how to create an image map to link to a new page. In this case, however, I want to be able to click on my image using an image map and load a new image with text on the same page as the image map. Is this even possible? Is there some sort of behavior that allows you to create same-page links, perhaps using AP divs? I want the end result to be a type of gallery that loads different images depending on where you click on the main image.
Again, I don't even know if this is possible. Any suggestions on how to make this work would be greatly appreciated.
Thank you!

Go to this site and mouse over the image map of South America.
http://alt-web.com/testing.html
Is that what you are looking for?
Insofar as linking to a position on the same page, do a Help search (F1) in DW for "named anchors."
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
www.alt-web.com/
www.twitter.com/altweb
www.alt-web.blogspot.com

Image map + link in background image

Is it possible to put an image map and link to a background
image of a table?

no but you can put a 1px by 1 x blank transparent image over
the background image and add an image map to that

Setting var with image map onMouseOver

i have an image map, and i need for as the user mouses over
or clicks each mapped coordinates, a specific variable (mapclick)
is set to a string to be output below the image map. i'm going in
circles and really not making progress with my ideas, so am looking
for some fresh ideas as to how to do this.
thanks for any help!

well... cf runs on the server, js runs on the client. without
sending
the js data to the server in some way (form submit, ajax
request, etc)
you will not be able to set your cf vars to js values...
Azadi Saryev
Sabai-dee.com
http://www.sabai-dee.com/

Image map rollover show/hide layer

My client needs a map of the US which has image maps on specific states. I need to trigger rollovers to change the state's color and view info (layer?). I'm having difficulty triggering the rollover with show/hide action on a layer, or even to change the state color, as I can't create odd shaped slices. Am I making this harder than it needs to be? Some smaller states will use offset names as triggers.

In article <[email protected]>,
[email protected] wrote:
> My client needs a map of the US which has image maps on specific states. I
> need to trigger rollovers to change the state's color and view info (layer?).
> I'm having difficulty triggering the rollover with show/hide action on a
> layer, or even to change the state color, as I can't create odd shaped
> slices.
You can do that with an image map and a whole bunch of images; no layers
required.
The only image that will be swapped out is a map covering the entire
area, however you'd need to create different versions of the map, each
with just one state hi-lighted.
Then create image map shapes with the polygon tool approximating the
shape of the states. Assign a Set Image URL to each polygon to swap out
the image for the one with that particular state hi-lighted.
A sample can be seen here:
Cheers Martin

Image Maps & Photo Links

I'm new to Dreamweaver... first site design with css. I love it. Doing okay but have run into two obstacles I'm just not adept enough to over come.
Site Name: twangtowntv.com
#1) I think I have screwed up my main page template. Not sure how to fix that so that I can have repeating elements throughout the site update simultaneously once again. Is there any way to rebuild that page and then reapply the page attributes to my existing site pages?
#2) I've used image maps and have linked photos to websites many times. But, for the the life of me, I can't make it happen with the images in my right sidebar. Nothing seems to work. I image map them, link them... but nothing... no hyperlinking action! Right now I have added to each page as part of a Library item. Thought that might open the flood gate. Still... nothing. ANY IDEAS of what I might try will be greatly appreciated.
Thanks... Tim

Have you fixed this, because when I hover over any of the picture links on the right, they point to a new page or go to a different link.
if you are using a template, not sure why you would need to use a library item in the left sidebar, if the links are all going to be the same on every child page??
You can repair the master template page, and have the changes reflect on the child pages, but you'd need to make sure that all the editable regions were the same, otherwise, the child pages won't know where to create any of the new regions and could end up with a mess.

Image Maps and Hotspots in a liquid layout?

Similar Messages

Maybe you are looking for