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>

5 comments:

  1. nice one, when put mouse over part of image, how to do?

    ReplyDelete
  2. goo
    but i neet in angular 9

    ReplyDelete
  3. Your blogs are great.Are you also searching for nursing pico writing help? we are the best solution for you. We are best known for delivering nursing writing services to students without having to break the bank.

    ReplyDelete

Blogroll

Follow this blog by Email

Popular Posts