function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
Jim BoudreauxJim Boudreaux 

Image Maps

OK, I give up.
How do I create an image map using the commandLink and image components?
The commandLink component has a coordinate attribute just as an HTML <area> tag has, and the image tag has ismap and usemap attributes, both for use with image maps. All this leads me to believe that creating image maps should be possible, but for the life of me I can't figure out how to do it.
And before you tell me to search before I post, believe me, I have. All I can find is references to the attributes I just mentioned, but no information on how to implement them.
 
Please, please, please help me!!
ESES
It took me a while to get this too, but this seems to work,

Code:
<apex:page showheader="true" controller="imagemap">
<apex:form >
<OBJECT DATA="{!$Resource.pagesde1__imageformap}" USEMAP="#mymap" TYPE="image/gif">
<MAP name="mymap" id="mymap">
<UL>
<LI><apex:outputLink value="http://www.google.com" Shape="circle" Coords="70,84,51">outputlink</apex:outputlink></LI>
<LI><apex:commandLink action="{!submit}" Shape="poly" Coords="153,106,186,225,340,193,315,81,304,167">command</apex:commandlink></LI>
</UL>
</MAP>
</OBJECT>
</apex:form>
</apex:page>


public class imagemap {
    public PageReference Submit() {
        return new PageReference('http://www.salesforce.com');
    }
}

I was using the following image for this sample.

Simplified it a little more. This also work,
Code:
<apex:page showheader="true" controller="imagemap">
<apex:form >
<apex:image value="{!$Resource.pagesde1__imageformap}" usemap="#mymap" />
<MAP name="mymap" id="mymap">
<UL>
<LI><apex:outputLink value="http://www.google.com" Shape="circle" Coords="70,84,51"></apex:outputlink></LI>
<LI><apex:commandLink action="{!submit}" Shape="poly" Coords="153,106,186,225,340,193,315,81,304,167"></apex:commandlink></LI>
</UL>
</MAP>
</apex:form>
</apex:page>

 




Message Edited by ES on 06-12-2008 12:00 AM
communitycommunity

Absolutely brillian Salman!

 

Can you please let me know how are these co-ordinates calculated? I am trying to build a country map with different links for each state/province.  So, there are different shapes/sizes.  What shapes can I use in the 'Shape' attribute of <LI> tag.  Please help.

 

Thanks much!