Como mapear uma imagem em JSP?

Front-end
#1

Bom dia! Pessoal, eh o seguinte! Preciso mapear uma imagem em varios links, html normal. Eu estava fazendo minha aplicação usando JSF 1.1. Quando “migrei” para JSF 1.2, simplesmente minha imagem não “aceitou” mais ser mapeada!

Aqui está o codigo com a imagem mapeada usando JSF1.1

<%@page contentType="text/html"%>
<%@page pageEncoding="UTF-8"%>

<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%> 

<%@taglib prefix="f" uri="http://java.sun.com/jsf/core"%>
<%@taglib prefix="h" uri="http://java.sun.com/jsf/html"%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">
    <c:import url="cabecalho.jsp"/>
        <br/>
        <br/>
        <font id="texto02"> <a href="index.jsf">Logout</a></font>
        <f:view>
            <center>
                <h:graphicImage usemap="#mapa" id="botoes" url="img/botoes.jpg"/>
            </center>
         </f:view>
         <map name="mapa">
             <area shape="rect" coords="25,10,142,90" href="cadastra_cliente.jsf"> <%-- 117px x 80px --%>
             <area shape="rect" coords="185,108,302,190" href="listagem.jsf">
             <area shape="rect" coords="185,10,302,90" href="clientes.jsf">
             <area shape="rect" coords="345,10,462,90" href="exclui_cliente.jsf">
             <area shape="rect" coords="345,108,462,190" href="exclui_veiculo.jsf">
             <area shape="rect" coords="25,108,142,190" href="cadastra_veiculo.jsf">
         </map>
    <c:import url="rodape.jsp"/>

E aqui está o código usando JSF 1.2

<?xml version="1.0" encoding="ISO-8859-1"?>
<!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"
      xmlns:c="http://java.sun.com/jstl/core">
    
    <ui:composition xmlns="http://www.w3.org/1999/xhtml"
                    xmlns:ui="http://java.sun.com/jsf/facelets"
                    xmlns:h="http://java.sun.com/jsf/html" template="./Templates/default.jsp">
        <ui:define name="conteudo">
            <br/>
            <br/>
            <font id="texto02"> <a href="index.jsf">Logout</a></font>
            <f:view>
                <center>
                    <h:graphicImage usemap="#botao" id="botoes" url="img/botoes.jpg"/>
                    <map name="botao">
                        <area shape="rect" coords="25,10,142,90" href="cadastra_cliente.jsf"/>
                        <area shape="rect" coords="185,108,302,190" href="listagem.jsf"/>
                        <area shape="rect" coords="185,10,302,90" href="clientes.jsf"/>
                        <area shape="rect" coords="345,10,462,90" href="exclui_cliente.jsf"/>
                        <area shape="rect" coords="345,108,462,190" href="exclui_veiculo.jsf"/>
                        <area shape="rect" coords="25,108,142,190" href="cadastra_veiculo.jsf"/>
                    </map>
                </center>
            </f:view>
        </ui:define>
    </ui:composition>
</html>

Se alguem souber me explicar a causa disso eu ficaria muito grato!

Abraços!

#2

Usei seu exemplo e funcionou aq, Vlw Demais!!!

<?xml version="1.0" encoding="UTF-8"?>
<!--
To change this template, choose Tools | Templates
and open the template in the editor.
-->
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:c="http://java.sun.com/jstl/core"
      lang="pt-br">

    <head>
        <title>GENTEemAção</title>
    </head>
    <body>
        <ui:composition template="template/template.xhtml">

            <ui:define name="conteudo">
                <div style="overflow: auto; height:404px;" >
                    <h:outputText style="font: normal 170% 'century gothic', arial; font-weight: bold; color: #3986ba;" value="Organograma"/>
                    <div class="info_bar" >
                        <h:outputText value="Você está em: Home / Sobre Nós /"/>
                    </div>

                    <p>
                        <a style=" margin: 0 70 0 200px; position:absolute;" href="Campo Grande">
                            Campo Grande
                        </a>
                        <h:graphicImage usemap="#botao" id="organograma" url="img/organograma.png"/>
                        <map name="botao">
                            <area shape="rect"  coords="25,10,142,90"       href="Organograma_2.jsf"/>
                            <area shape="rect"  coords="185,108,302,190"    href="Organograma_2.jsf"/>  
                            <area shape="rect"  coords="185,10,302,90"      href="Organograma_2.jsf"/>  
                            <area shape="rect"  coords="345,10,462,90"      href="Organograma_2.jsf"/>  
                            <area shape="rect"  coords="345,108,462,190"    href="Organograma_2.jsf"/>  
                            <area shape="rect"  coords="25,108,142,190"     href="Organograma_2.jsf"/>
                        </map>
                    </p>

                </div>
            </ui:define>
        </ui:composition>
    </body>
</html>
#3