Replace Image To Jmol Representation After Click

Question

[NPalopoli]

Dear all, I am using jmolApplet to display some PDBs in a web page. I would like to know how to load an image instead by default (possibly a static representation of the PDB), then when the user clicks on the image or an accompanying link the image is replaced by a jmol representation of the same PDB. Thanks in advance!

Answer 1

[Keith Callenberg]

This question is not the most appropriate for Biostar because while the topic is Jmol, it is just about programming methods, not bioinformatics.

Nonetheless, one way to do this would be to insert the following into a jmol script to have Jmol generate a static image for you:

var filename = "image.jpg"
write IMAGE 800 600 JPG @filename

Then use some code like the following to hide the java applet with javascript until the user clicks your image:

<script type="text/javascript">
    var appletTag;

    hideApplet(); // replace applet with clickable image

    function hideApplet(){
        var appletbox=document.getElementById('appletbox');
            appletTag = appletbox.innerHTML;

        appletbox.innerHTML='<img src="image.jpg" style="cursor:pointer;" onclick="showApplet()">';
    }

    function showApplet(){
        var appletbox=document.getElementById('appletbox');
        appletbox.innerHTML = appletTag;
    }
</script>

Then insert a DIV tag where you want the image/applet to be located on the page:

<div id="appletbox" style="width:480px;height:240px;">
    <applet code="jmolApplet.class" codebase="." width="480" height="240">
    </applet>
</div>