使用javascript / php从另一个html文件更改属性的元素

I have a phtml file containing following code.

NavigationTree.phtml :

<div>
    <ul>
        <li id="element1">
            <a data="CercleRouge.svg" onclick="loadSynoptic()">Element Menu 1</a>
        </li>
        <li id="element2">
            <a data="CercleVert.svg" onclick="loadSynoptic()">Element Menu 2</a>
        </li>
    </ul>
</div>

I have second phtml file containing :

SynopticView.phtml :

<div>
    <img id="synoptic" src="" />
</div>

I want to parse the SynopticView.phtml file by clicking on the menu elements from NavigationTree.phtml and replace the src attribute value (in SynopticView.phtml) by the value of the data attribute (in NavigationTree.phtml) using the js function loadSynoptic(). My question is : how can i do that? What must i do in my js function loadSynoptic() ? Thx.