We can make use of Angular directives to make use of this functionality. AngularJS provides ng-init, ng-mouseover, ng-mouseout. 

Program Flow

  1. ng-init : Initiate image source in a variable 
  2. ng-mouseover : Assign new image source to the variable
  3. ng-mouseout : Assign original image source to the variable
  4. ng-src : Give that variable name in ng-src of img

Program

<div id="divID" ng-init="imgsrc='/images/twitter_blue.png'" ng-mouseover="imgsrc='/images/twitter_brown.png'" ng-mouseout="imgsrc='/images/twitter_blue.png'">
  <img ng-src="{{imgsrc}}"/>
  <div>Image description</div>
</div>

2 comments:

Blogroll

Follow this blog by Email

Popular Posts