Full Screen on Click Code for for full screen Security Cameras in a web browser

I was working with my previous code from my MJPEG over HTTP Streaming in a web browser and wanted to add features like single click to bring a camera in full screen and double click to bring everything back to normal. I was originally going to use javascript to accomplish this but was thinking that there was a simpler way to do this without needing to use java script.
I went to W3 Schools and started browsing around for any HTML that dealt with mouse clicks and found that "onclick" and "ondblclick" was exactly what I was looking for.

I tried to use onmouseover and onmouseout but that ended up being really twitchy and would not leave the camera in full screen.

I initially did not hide the other cameras but due to my div tag aligning to the center this made it very difficult to select the correct camera because the alignment of the images.

The following line of code is how I was able to get the video to display full screen (1280x720) on mouse click and to get back to the normal image on double-click. I did this for all three of my cameras and it works perfect for me.

You will notice that the onclick includes the names of the other cameras with no input for the height and width just using single quotes. This is what causes the camera to "disappear" and with the on double click the camera names have their original frame sizes that they were to begin with. You have to include the data in both the onclick and the ondblclick or the images will disappear and not come back on dblclick. Try it out and let me know how it works for you.

I will be working on using some JQuery to have the images sequence on button press that should work fairly well. I tested it with an old JQuery image rotator that I had programmed for one of my web design classed and it worked as intended.


Thanks for looking!!!


<img src="http://192.168.1.102:8008/" width="480" height= "360" name="Drivewaycam" onclick="Drivewaycam.width='1280';Drivewaycam.height='720';Shopdoor.width='';Shopdoor.height=''; Rearhouse.width='';Rearhouse.height='';" ondblclick="Drivewaycam.width='480';Drivewaycam.height='360'; Shopdoor.width='480';Shopdoor.height='360'; Rearhouse.width='480';Rearhouse.height='360'" />