Live Demo: Example of HTML menu Tag

<!DOCTYPE html>
<html lang="en">
<head>
<title>Example of HTML menu Tag</title>
<script type="text/javascript">
	function zoomin(){
		var myImg = document.getElementById("sky");
		var curr_width = myImg.clientWidth;
		if(curr_width == 500){
			alert("Maximum zoom-in level reached.");
		} else{
			myImg.style.width = (curr_width + 50) +"px";
		} 
	}
	function zoomout(){
		var myImg = document.getElementById("sky");
		var curr_width = myImg.clientWidth;
		if(curr_width == 50){
			alert("Maximum zoom-out level reached.");
		} else{
			myImg.style.width = (curr_width - 50) +"px";
		}
	}
</script>
</head>
<body>
    <img src="/examples/images/sky.jpg" id="sky" width="250" alt="Cloudy Sky" contextmenu="skymenu">
    <menu type="context" id="skymenu">
        <menuitem label="Zoom In" icon="/examples/images/zoom-in.png" onclick="zoomin()"></menuitem>
        <menuitem label="Zoom Out" icon="/examples/images/zoom-out.png" onclick="zoomout()"></menuitem>
        <menuitem label="Reload Image" icon="/examples/images/reload.png" onclick="window.location.reload();"></menuitem>
    </menu>
	<p><strong>Note:</strong> Right click on the image and select zoom-in, zoom-out or reload option form the contextmenu to understand how it works. This example works only in Firefox.</p>
</body>
</html>

xxxxxxxxxx
 
<!DOCTYPE html>
<html lang="en">
<head>
<title>Example of HTML menu Tag</title>
<script type="text/javascript">
    function zoomin(){
        var myImg = document.getElementById("sky");
        var curr_width = myImg.clientWidth;
        if(curr_width == 500){
            alert("Maximum zoom-in level reached.");
        } else{
            myImg.style.width = (curr_width + 50) +"px";
        } 
    }
    function zoomout(){
        var myImg = document.getElementById("sky");
        var curr_width = myImg.clientWidth;
        if(curr_width == 50){
            alert("Maximum zoom-out level reached.");
        } else{
            myImg.style.width = (curr_width - 50) +"px";
        }
    }
</script>
</head>
<body>
    <img src="/examples/images/sky.jpg" id="sky" width="250" alt="Cloudy Sky" contextmenu="skymenu">
    <menu type="context" id="skymenu">
        <menuitem label="Zoom In" icon="/examples/images/zoom-in.png" onclick="zoomin()"></menuitem>
        <menuitem label="Zoom Out" icon="/examples/images/zoom-out.png" onclick="zoomout()"></menuitem>
        <menuitem label="Reload Image" icon="/examples/images/reload.png" onclick="window.location.reload();"></menuitem>
    </menu>
    <p><strong>Note:</strong> Right click on the image and select zoom-in, zoom-out or reload option form the contextmenu to understand how it works. This example works only in Firefox.</p>
</body>
</html>