Scripting Noob - Mouse over and show image on Graphic View

Hi guys,

I'm a bit of a scripting noob, but I think what I am trying to do is achievable, but tried a couple of things and couldn't get it to work.

What I want to do is when I mouseover or even mouseclick on the icon that it brings up an image from my CCTV.  The link I want to add is a jpeg but it will need to be resized as it is a large.  It would be good if the image could be refreshed every second or so too.  The camera does support motion jpeg, but I'm trying to find the direct access link to it.

Here's my code, which I have bastardised from existing code in the program.

Code:

if (value=="") pic='camera-down.bmp'; else pic='camera-up.bmp';
lib='graphics/user/';
msg="Front Camera:\n"+value+"";
var s ="";
s+="<img title='"+msg+"' style='cursor:default' src='"+lib+pic+"'/>";
return s;

Hoping someone can at least give me some pointers to get me going in the right direction.

Thanks in advance,
Phelz

OK, managed to get it working with some assistance from Neil.

First create an HTML Component that uses a div to declare the id.  Note that the display:none means the component will not be visable after creation.  If you need to alter it you need to tick the Iconify Components box at the top of the page to show it on the display.

Code:

<div id='frontcam' style='display:none'>
<img src="http_link_here" height="180" width="240"/>
</div>

Then created a server-side script where we use the id and also an onclick() function

Code:

if (value=="") pic='camera-down.bmp'; else pic='camera-up.bmp';
lib='graphics/user';
id="frontcam";
msg="Front Camera:\n"+value+"";
s="";
s+="<img title='"+msg+"' style='cursor:pointer' src='"+lib+"/"+pic+"' ";
s+="onclick='tog_vis(""+id+"")'/>";
return s;

The onclick calls the following HTML component which uses id

Code:

<script type="text/javascript">
<!--
function tog_vis(id) {
  var e = document.getElementById(id);
  if(e.style.display == 'block')
    e.style.display = 'none';
   else
    e.style.display = 'block';
}
//-->
</script>

You can then use the tog_vis(id) command anytime you want to hide/unhide something.

Decided to use click rather than mouseover so that the image stays on screen and can be turned off when not needed anymore.

Hope this makes sense and thanks for your help in getting this working Neil