Jump to content

Mark2015

Members
 View Profile  See their activity

  • Posts

    1

  • Joined

  • Last visited

Mark2015's Achievements

Newbie

Newbie (1/7)

0

Reputation

  1. Mark2015
    Hi I am gratefully using code at http://css3playground.com/3d-flip-cards/ to try and hold a page of twenty 300px by 300px png 'merit certificates'. I want it so when the user clicks on the bottom left corner of any certificate png (which has the words "Turn over..."), the certificate flips and the user can read the back of the certificate. I think I am almost there, it's just that not having a lot of experience with JavaScript I am not sure what changes I need to make to the code in order that it doesn't flip on mouse over but rather only when the user clicks the bottom left corner of a particular certificate on the page. From the code below, can anyone say what the Javascript would be for clicking the hotspot only? Note there could be 20+ different certificates on a page so it would need ot know which one to flip. Thanks for any help. Mark <!DOCTYPE html><html lang="en-us" dir="ltr" class="no-js"><head><link href="styles/style001.css" rel="stylesheet" type="text/css" /> <script src="javascript/jquery.min.js" type="text/javascript"></script> <script src="javascript/modernizr.min.js" type="text/javascript"></script> <title>Untitled Page</title></head><body> <form name="form1" method="post" action="default.aspx" id="form1"> <script type="text/javascript"> // For IE11. Modernizr.addTest('preserve3d', function(){return Modernizr.testAllProps('transformStyle', 'preserve-3d');}); </script> <script> $(document).ready(function(){ // set up hover panels // although this can be done without JavaScript, we've attached these events // because it causes the hover to be triggered when the element is tapped on a touch device $('.hover').hover(function(){ $(this).addClass('flip'); },function(){ $(this).removeClass('flip'); }); }); </script> <div class="hover panel"> <div class="front"> <div class="pad"> <img alt="" id="Img2" src="http://localhost:55852/LocalV/pages/files/image-store/3/2/5/3/2/5/1/1523523-ca4ead5c-ca0e-4e3b-86b8-2a42823a00e7.png" usemap="#ImageMapImageMap2" style="height: 300px; width: 300px; border-width: 0px;" /><map name="ImageMapImageMap2" id="Map1"> <area shape="rect" coords="200,260,300,300" href="" title="" alt="" /> </map> </div> </div> <div class="back"> <div class="pad"> <img alt="" id="Img1" src="http://localhost:55852/LocalV/pages/files/image-store/9/3/5/3/2/5/1/1523539-b3f8d11d-0ed8-47c4-af5e-39ad864e18a1.png" usemap="#ImageMapImageMap2" style="height: 300px; width: 300px; border-width: 0px;" /><map name="ImageMapImageMap2" id="ImageMapImageMap2"> <area shape="rect" coords="200,260,300,300" href="" title="" alt="" /> </map> </div> </div> </div> </form></body></html>
×
×
  • Create New...