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/

Similar Messages

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

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 with image map in IE

I am trying to create a clickable county map using Spry. The
following code works in Firefox (2) but fails in Internet Explorer
(6.0)
quote:
<map name="m_original_map" id="m_original_map">
<area shape="{@ashape}" coords="{@acoords}"
title="{@atitle}" alt="{@aalt}" href="#" spry:repeat="spryDataSet"
spry:setrow="spryDataSet" />
</map>
This is a problem with the <area> tag - the following
works fine in IE and Firefox (on the same page as the above)
quote:
<tr spry:repeat="spryDataSet"
spry:setrow="spryDataSet">
<td> shape="{@ashape}" coords="{@acoords}"
title="{@atitle}" alt="{@aalt}"
</td>
</tr>
If I take a line from the output of this table and paste it
into the code, it works fine - ie there's nothing wrong with the
xml or the format of the code, it's just that IE doesn't seem to
like Spry code in the area tag.
I've looked elsewhere on the web for an answer but can't find
one - anybody here tried this?
Regards
John

Hello John,
What really happens and I failed to test because I didn't had
a suitable XML and I thought the results were OK, the <AREA>
from within the region is executed by the IE on load before the
region to come and replace the correct values. In this situation
the value inside the coords attribute only are considered incorrect
and replaced with 0,0,0,0. Because of this when the region finally
arrive to put the correct values do not finds any markup to replace
for the coords attribute so even if all the other regions are put
correctly you can't see them as all the areas are 0,0,0,0.
A work around for this situation is to create a new attribute
for the <AREA> where the spry will come and will insert the
coords correct values. In this sample below I call it spry_coords:
<area shape="{@ashape}" coords="{@acoords}"
spry_coords="{@acoords}" title="{@atitle}" alt="{@aalt}" href="#"
spry:repeat="spryDataSet" spry:setrow="spryDataSet" />
After this we will have using an post update observer to get
the values from the spry_coords filled by Spry and inject them back
into the coords. In this case you should add the following code
just after the spryDataSet definition in your page:
var spryDataSet = new Spry.Data.XMLDataSet("maps.xml",
"gallery/maps/map");
var map = {onPostUpdate: function(){
var els = document.getElementsByTagName('area');
for (var i=0; i < els.length; i++){
if (els
.getAttribute('spry_coords')){
els.coords = els
.getAttribute('spry_coords');
Spry.Data.Region.addObserver('MapLayer',map);
I don't think we will be able to fix this behavior but I will
speak with my colleagues to see if we can insert a note into our
samples.
Regards,
Cristian MARIN

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 duplication error

I have a curious problem with image maps. Whenever they are
placed in the top of the page, in a table, they are duplicated and
offset in the bottom of the page and vice versa. If I draw an IM
for example in the bottom of the page there is a hot spot created
with the same link in the top of the page in the first table row.
If I delete the unwanted hot spot (duplicate) it removes the
wanted IM.
If I delete the image in the bottom table it seems that when
I added a Flash button the top IM then had no problem. In Photoshop
there are no maps in the image.
Is this due to a #div container, padding, floats, or
something ?
Here is the map code;
<map name="Map" id="Map"><area shape="rect"
coords="48,137,293,167" href="../color/index.html" target="_top"
alt="blah"
onclick="MM_nbGroup('down','group1','navBarRLink02','',1)"
onmouseover="MM_nbGroup('over','navBarRLink02','images/cmO_02.jpg','',1)"
onmouseout="MM_nbGroup('out')" /><area shape="rect"
coords="134,110,329,134" href="../HP9180_review.htm" target="_top"
alt="printer reviews"
onclick="MM_nbGroup('down','group1','navBarRLink02','',1)"
onmouseover="MM_nbGroup('over','navBarRLink02','images/printerO_02.jpg','',1)"
onmouseout="MM_nbGroup('out')" /><area shape="rect"
coords="207,67,332,93" href="portraits.html" target="_top"
alt="portraits"
onclick="MM_nbGroup('down','group1','navBarRLink02','',1)"
onmouseover="MM_nbGroup('over','navBarRLink02','images/portraitsO_02.jpg','',1)"
onmouseout="MM_nbGroup('out')" />
<area shape="rect" coords="231,42,328,67"
href="stills.html" target="_top" alt="stills"
onclick="MM_nbGroup('down','group1','navBarRLink02','',1)"
onmouseover="MM_nbGroup('over','navBarRLink02','images/stillsO_02.jpg','',1)"
onmouseout="MM_nbGroup('out')" />
<area shape="rect" coords="246,16,344,40"
href="beauty.html" target="_top" alt="beauty"
onclick="MM_nbGroup('down','group1','navBarRLink02','',1)"
onmouseover="MM_nbGroup('over','navBarRLink02','images/navBarR_02.jpg','',1)"
onmouseout="MM_nbGroup('out')" />
</map></body>
</html>

Your narrative is too vague to follow. Sorry.
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
==================
"Neil Snape" <[email protected]> wrote in
message
news:g0shio$sg4$[email protected]..
> Unfortunately I didn't save the original html page that
was doing this.
> Thanks for your replies though.
>
> What I did was delete the Td, and TR, more than once ,
then rather than
> importing the same image just added a background image.
I was then able to
> place two Flash buttons into the TR, and no duplication
of the hot zones.
> After
> deleting the Flash buttons I was able to add two text
zones and place hot
> zones
> over the text whereas before they were duplicating and
deplacing the
> zones.
> Strange, I have no idea why, but it works as expected
now.
>

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

Swapping images that have image maps

Using RoboHelp 8, I'm embedding images and adding half a dozen image map shapes with links to distant topics in my help project. Every time I modify an image, it seems I have to swap it out with the image I put in previously (unlike, say, in InDesign, where you can create an automatically updating link to an image). And every time I delete the image, the maps disappear and need to be re-created.
1. Is there a way to link images in RoboHelp to avoid the manual delete and replacement?
2. Is there a way to store image maps so they needn't be re-created every time their underlying image is replaced?
Thanks much.

Rick,
Sorry, some weirdness happened and my last post got posted before I finished.
Here's a more detailed scenario.
I open Microsoft Visio and create SampleImage. I save it as a gif to my RoboDrawings folder. Now, in the RoboDrawings folder, there is an image called SampleImage.gif.
I quit Microsoft Visio.
I open RoboHelp and create a project in which a topic is called SampleTopic.
I insert an image, go to the RoboDrawings folder and select SampleImage.gif.
I create a few image maps linking to various other topics.
I save everything, generate html help and close down RoboHelp.
Now I open Microsoft Visio again, open SampleImage and change it drastically without resizing anything.
I save my Visio drawing under the same name, perform a Save As and go to the RoboDrawings folder to save the image as SampleImage.gif. I get a message warning me a file of the same name exists, and I choose to overwrite it, eliminating the old file.
I shut down Visio.
I open RoboHelp, view SampleTopic and the old image is there with image maps in place. I generate html help again, and the old image is still there with its maps in place.
Without deleting the old image in the SampleTopic and manually inserting the new one (same name, though), how do I get RoboHelp to acknowledge that the image has been updated?

How to set "Image Map" attribute to "Polygon" via javascript in Illustrator CS5

Ok, so I have this little script I've written that I want to use to go through a bunch of paths in a document and give each path a url for use in an image map. I want each link to be a Polygon because, well, let's face it, "Rectangle" is useless 99% of the time. Obviously, the way you would do this manually would be to open the Attributes panel and set the Image Map attribute to Polygon and type a URL in the URL field. Fine. Easy enough. However, when scripting the process, it seems one can only set the URL (or the uRL [sic] as documented in the javascript reference) of the PathItem. In other words:
pathItem.uRL = "http://someurlfor.me";
Unfortunately, this defaults the "Image Map" attribute to "Rectangle" (which we already know is useless 99% of the time.) SO, anyone out there know how to change that attribute to "Polygon?"
Btw, I'm on Illustrator CS5 and have been using this reference:
http://wwwimages.adobe.com/www.adobe.com/content/dam/Adobe/en/devnet/pdf/illustrator/scrip ting/illustrator_scripting_reference_javascript_cs5.pdf
Thanks,
-Matt

We found that with the following setting, the problem is almost solved :
theme.setQueryWindowMultiplier(1);
theme.enableAutoWholeImage(true);
We still have a problem : a portion of the base map appears black most of the time, on Blackberry only (Opera Mini) ... like 1/5 of the map ... the right side ... any idea ?
Thanks,
JP

How to play the timeline "onmouseover" in an image map?...(asap pleeease :-)

Hello all,
I'm in a bit of trouble and looking for a fast advice (i have a deadline tommorow...)
So, the short story - thanks to this post   http://forums.adobe.com/message/4803761
compositionReady:
$('<img width="225" height="330" src="images/UKmap.gif" usemap="#ukAreas">'+
         '<map name="ukAreas">'+
         '<area shape="poly" alt="" title="scotland" coords="34,13,16,64,54,125,78,153,104,143,124,125,129,96,149,37,101,2 8,129,1,90,0" href="" target="" />'+
         '<area shape="poly" alt="" title="northern-ireland" coords="50,174,65,156,39,117,13,132,-4,170,26,172" href="images/edge.jpg" target="" />'+
// and so on...
         '</map>').appendTo("#Stage");
i created a similar image map.
Now i need to play the timeline when i go with the mouse over one of the hotspot areas in the image map.
How can i modify the above code to do that?...(something like onmouseover="sym.play('first_animation')") where "first_animation" is a label on the timeline.
(Don't laugh..i'm pretty bad with javascript...)
ANY help will be greatly appreciated.
Thanks in advance.

I found a temporary solution...the site will be up tomorrow on a test server and i will post then the link here...maybe you could help me more than
Thanks again....
PS: here is a link to the part that i have problems with - www.greenlemon.ro/oneweek/we.html
When i go with the mouse over a "pie slice" i need to play an animation (i made some transparent rectangles for now and placed each one over a pie slice)
It would have been nice to do that with an image map for more accuracy because even though the images are "pie slices" they are seen as rectangles on mouseover...

Image-map coordination with JSP

I have a jpeg based image-map that shows the location of different customers in the city, with clickable regions. When a user selects a region it needs to execute a JSP that displays information about that customer that is pulled from an Oracle database. Each customer is defined by a unique idno that I was planning on associating with the clicable region.
Does anyone have any idea how to pass the idno for the clicable region to the JSP using ADF Struts?
Thank you for you help.

couldn't you just invoke the URL of a struts action and pass the id as a parameter to the URL?
Then use this parameter in the Struts action to set the right data model query.
for an example of setting the where clause when using ADF Business Components check out:
http://www.oracle.com/technology/products/jdev/tips/shmeltzer/setwhereclause/index.html

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

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

PDF's with images open with dark (mask) overlay..not true in Explorer...how to change setting?

When browsing in Firefox, some links to PDF's that I open, those with images, open with a dark mask overlay. I have have searched around in the VIEW menu with no luck. This does not happen when I open the same PDF links in Windows Explorer so it must be Firefox setting that I need to change. By the way, I have Adobe Creative Suite 4 installed on my computer.

When browsing in Firefox, some links to PDF's that I open, those with images, open with a dark mask overlay. I have have searched around in the VIEW menu with no luck. This does not happen when I open the same PDF links in Windows Explorer so it must be Firefox setting that I need to change. By the way, I have Adobe Creative Suite 4 installed on my computer.

Image map rendered correctly in Firefox, but with problems in chrome & IE

Hi All,
I have created a simple application with JSF 2.0.
The page is made by an image with a map. Clicking on the hotspot another page is shown.
I use a graphicImage tag with reference to a map with some link "hotspots".
Everything works fine in Firefox.
But, in Chrom the Image is shown, but the hotspot is not there....
In IE, the page does not open up, and I'm prompted for the download of the file (!?).
Any help? what I'm doing wrong?
Thanks in advance,
Giorgio

The code is something like the following:
<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core">
    
    <f:view>
        <html>
            <h:head>
                <title>My Title</title>
            </h:head>
            <h:body>
                <h:graphicImage
                    id="in" alt="Image not found"
                    value="/resources/images/in.png"
                    ismap="True" usemap="#enter" >
                </h:graphicImage>
                <map name="enter" id="enter">
                    <h:link shape="rect" coords="250, 320, 300, 340"
                            outcome="st" />
                 </map>
            </h:body>
        </html>
    </f:view>
</html>

Setting var with image map onMouseOver

Similar Messages

Maybe you are looking for