Ng-Mouseover-8

 
Another example of Ng-Mouseover, Images will be changed on mouse over. See the code below
 
 
 
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"></script> <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"> </head> <body ng-app=""> <div class="container"> <div class="row text-center"> <p>Mouse Over To View Back Side</p> <div class="col-md-3"></div> <div class="col-md-6" ng-mouseover="changeImage=true" ng-mouseleave="changeImage=false" ng-init="changeImage=false"> <img class="text-center" style="height:300px;width:300px" ng-hide="changeImage" src="http://learnit.visrosoftware.com/datafiles/1.jpeg" /> <img class="text-center" style="height:300px;width:300px" ng-show="changeImage" src="http://learnit.visrosoftware.com/datafiles/2.jpeg" /> </div> <div class="col-md-3"></div> </div> </div> </body> </html>
Output