How to Add, Display, and Enlarge an Image in Oracle Apex
Step 1: Create a blank page and then under page create two region in between region create page item.
![](https://techaid71.xyz/wp-content/uploads/2024/06/image.png)
Step 2: In page upload, Show and Zoom In/ Out Image declare function code:
function getURL(input) {
if (input.files && input.files[0])
{
var reader=new FileReader();
reader.onload = function(e){
$('#upimag')
.attr('src',e.target.result);
};
reader.readAsDataURL(input.files[0]);
}
}
function zoom(){
var divlClass=$('#imgdiv').attr('class');
if (divlClass==="ex"){
$('#imgdiv').css('cursor','zoom-in');}else
if ( divlClass=== "exZoom" ) {
$('#imgdiv').css('cursor','zoom-out');}
}
function my_class(){
var divlClass= $('#imgdiv').attr('class');
if(divlClass=== "ex"){
$("#imgdiv").removeClass("ex");
$("#upimag").removeClass("ex");
$("#imgdiv").addClass("exZoom");
$("#upimag").addClass("exZoom");} else
if(divlClass==="exZoom"){
$("#imgdiv").removeClass("exZoom");
$("#upimag").removeClass("exZoom");
$("#imgdiv").addClass("ex");
$("#upimag").addClass("ex");}
}
![](https://techaid71.xyz/wp-content/uploads/2024/06/image-1.png)
Then declare Inline code:
.ex
{
height:60px ;
width:70px;
padding:2px ;
}
.exZoom
{
height:300px;
width:400px;
padding:0px;
}
![](https://techaid71.xyz/wp-content/uploads/2024/06/image-5.png)
In Show Image : HTML Code
<div align="center">
<div id="imgdiv" class="ex">
<img alt="" class="ex" id="upimag" onclick="my_class(); zoom();" onmouseover="zoom();" src="#" />
</div>
</div>
![](https://techaid71.xyz/wp-content/uploads/2024/06/image-2.png)
In page P9999_UPLOAD_IMAGE CSS
![](https://techaid71.xyz/wp-content/uploads/2024/06/image-3.png)
![](https://techaid71.xyz/wp-content/uploads/2024/06/image-4.png)