JSF id generation and javascript

Question

Hi!
I am trying to do smethin in my CRUD application and jsf's way of generating ids is making me problem. One part of my jsf page is something like this and it is in dataTable component. When user is "mouseovering" outputText or image next to it I want image to change.
<h:column>
          <f:facet name="header">
          </f:facet>
          <h:outputText value="#{row.idSubject.name}" onmouseover="changeImage('main:table:3:outer1', '/university/images/rootgen/outer_dark.png');" onmouseout="changeImage('main:table:3:outer1', '/university/images/rootgen/outer.png');"/>
          <h:commandLink action="#{subjectBean.detail}" actionListener="#{subjectBean.idListener}">
            <h:graphicImage url="/images/rootgen/outer.png" id="outer1" onmouseover="changeImage('main:table:3:outer1', '/university/images/rootgen/outer_dark.png');" onmouseout="changeImage('main:table:3:outer1', '/university/images/rootgen/outer.png');"/>
            <f:attribute name="idSubject" value="#{row.idSubject.idSubject}"/>
          </h:commandLink>
        </h:column>I wanted to do it with javascript that looks like this:
function changeImage(img_id, img_src) {
  document.getElementById(img_id).src = img_src;
}the thing is that id for each image is something like main:table:{0, 1, 2, ...}:outer1 and I don't know how to generate calling of javascript function different in each row.
Any ideas?
Thanks ahead.

Answer 1

Use the JavaScript this keyword to pass a reference to the DOM element.