+ Start a Discussion
Nagaraj SVNagaraj SV 

How to ZOOM Image on mouseover in visualforcepage? This type of functionality Available in shopping cart Eg:flipkart please help me

User-added image
Amit Chaudhary 8Amit Chaudhary 8
Option 1:-
apex:image url="{!$Resource.MyNormal}" width="100" height="100" id="MyImage" onmouseover="ImageOver(this)" onmouseout="ImageNormal(this)" /> . . . <script type="text/javascript"> function ImageOver(MyImage) { MyImage.src='{!$Resource.MyOver}'; } function ImageNormal(MyImage) { MyImage.src='{!$Resource.MyNormal}'; } </script>
Option 2:-
<apex:page >
<style>
img:hover {
height: 200px;
} </style>
<apex:image id="theImage" value="https://s3.amazonaws.com/{!bucketToList}/{!obj.key}? AWSAccessKeyId=AKIAJGN4J4RSRNW26IEA&amp" width="220" height="55"/>
</apex:page>
Option 3:- http://salesforce.stackexchange.com/questions/56185/how-to-enlarge-image
<apex:page >
<style>
img:hover {
            height: 200px;
        }
</style>
 <apex:image id="theImage" value="https://s3.amazonaws.com/{!bucketToList}/{!obj.key}? AWSAccessKeyId=AKIAJGN4J4RSRNW26IEA&amp" width="220" height="55"/>
</apex:page>

Option 4;- http://www.ajax-zoom.com/examples/example20.php
http://salesforce.stackfaq.net/questions/56185/how-to-enlarge-image

Please let us know if this will help you

Thanks
Amit Chaudhary
Nagaraj SVNagaraj SV
Thanks Amit, I have tried all of these before posted here ....no one matching my requirement
Nagaraj SVNagaraj SV
<pre class="brush:xml">
<apex:page controller="Onehubcntr">
  <apex:form >
   
    <apex:pageblock title="Get&Post the File in ONE HUB">
      <apex:inputText value="{!GetFile1}" title="GetFile1"/>
        
       <br/>
       <br/><apex:inputFile style="width:100%" id="fileToUpload" value="{!fileBody}" filename="{!fileName}" />
        <apex:commandbutton action="{!getSFDCSessionID}" value="PUTFILE"/>
        
    </apex:pageblock>   
    
    <iframe src="data:image/gif;base64,{!Pdffile}"></iframe> 
 </apex:form>
</apex:page>

</pre>
rahul yadav 250rahul yadav 250
Wow, unique content In this artical you can provide all professional pieces of information about this topic to Flipkart (https://www.informativelife.com/delete-flipkart-account/)