在新窗口中打开凸轮流

I tried extensive search without luck and I am stuck, So I am hoping someone can assist me in in a code that if a user clicks on a camera feed on a webpage cell it will open that feed in a new window in a larger view.

My friend is a manager of a small data center and the DVR’s are set to view cameras over IP webpage. Problem is over IP webpage you can only see multiple cams at 100px x100px very small and there is no option to view a single cam. He can log in as admin and use the DVR’s control panel to see the single cam but again the view is 100px x 100px. Unless he is at the actual DVR then he can see full screen but not remotely. He has 50 camera’s set up in the server cabinets viewing the lights and temps. Without having the camera feed in larger view it is hard to see the temp indicator on the servers.

As a test I created a webpage with a table 25 rows and 2 columns to make 50 cells. I copied the network feed code form the source code of the webpage and pasted it in a cell. I then added a script to the feed code and gave the “IMG” 600px x 600px. It worked and streamed. Looked good. Now since one cam worked I copied the code for the other 49 cams, only a few cams will show up under 600px x 600px, but all the cams will show up under 100px x 100px. Scratching my head on this!

The only option that is coming to mind is to have an onclick script in each of the 50 cam feed cells , so that if he clicks on that cam feed it copies the code that in that cell and opens a new window in a larger view.

Any Suggestions?

Here is the script that I put in each cell. The only thing that changes on each cell code is the camera number. I put xxx for the camera ip address for security purposes. It is not my company so I cannot give that information out.

<center>
<img id="jpeg_3" width="600" height="600" class="auto-style5">
<span class="auto-style5">

<script type="text/javascript">
    var camera_2 = {
        addEvent: function(elem, event, func ){
            if (typeof (window.event) != 'undefined')
                {elem.attachEvent('on' + event, func);}
            else
                {elem.addEventListener(event, func, false);}
        },
        initCamera: function(jpeg, serverUrl, token, id, interval){
          this.addEvent(jpeg, 'load', function(){setTimeout(function() {camera_2.showJpegFrame(jpeg, serverUrl, token, id);}, interval);});
          this.showJpegFrame(jpeg, serverUrl, token, id);
        },
        showJpegFrame: function(jpeg, serverUrl, token, id){
            jpeg.src = serverUrl+"/Jpeg/"+id+"?authToken="+token+"&"+new Date().getTime();
        }
    }

camera_2.initCamera(jpeg_2, "http://xxx.xxx.xxx.xxx:8100", "27e4d1dd-058e-47a8-b768-ac8cd6cbe29a", 2, 40);
</script> 

Well, as far as I know, what you can do is set an onclick attribute for each of the cells to a window.open() function passing in the cams as parameters for each of the 50 cells. But, that is a "time waster", so you can use the DOM to select all 50 cells by using document.getElementsByTagName() passing in td as a parameter. Then, you can use a for loop to set that like here:

// Locate cells using the DOM:
var cells = document.getElementsByTagName("td");

for(var i = 0; i < cells.length; i++) {
    cells[i].onclick = window.open(/* add link to cams */);
}

Hopefully this helps!