Change an image with onclick

Question

I want to change an image to some other image when i click on the object  the code is stacked in the following order   lt li gt  lt img gt  lt some text gt  lt  img gt  lt  li gt   lt li gt  lt img gt  lt some text gt  lt  img gt  lt  li gt   lt li gt  lt img gt  lt some text gt  lt  img gt  lt  li gt   lt li gt  lt img gt  lt some text gt  lt  img gt  lt  li gt   lt li gt  lt img gt  lt some text gt  lt  img gt  lt  li gt   What I wish to do is  when I click on the  lt li gt  i want to change the image to a coloured version of the image  i e  some other image  Now  I know I can use JQuery JS to accomplish it  But I don t want a huge amount of JS code to accomplish something so simple  Can it be done using something simpler  Like pseudo selectors   active class  I cannot seem to think of it

User · Answer

You can try something like this   CSS  div       width 200px      height 200px      background  url img1 png  center center no-repeat      visited       background  url img2 png  center center no-repeat      HTML   lt div href     onclick  this className  visited   gt       lt p gt Content lt  p gt   lt  div gt    Fiddle

User · Answer

function chkicon num allsize        var  flagicon   document getElementById  flagicon  num  value       if flagicon   plus               alert  P     flagicon             for  var i   0  i  lt  allsize  i                  if document getElementById  flagicon  i  value                       document getElementById  flagicon  i  value    plus                  document images  pic  i  src        images plus gif                                        document images  pic  num  src       images minus gif            document getElementById  flagicon  num  value    minus         else if flagicon   minus               alert  M     flagicon              document images  pic  num  src        images plus gif                 document getElementById  flagicon  num  value    plus         else            for  var i   0  i  lt  allsize  i                  if document getElementById  flagicon  i  value                       document getElementById  flagicon  i  value    plus                  document images  pic  i  src        images plus gif

User · Answer

If you don t want use js  I think  you can use  lt a href  javascript void 0    gt  lt  a gt  instead of img and then use css like  a     background  url  oldImage png      a visited     background  url  newImage png        EDIT  Nope  Sorry it works only for  hover

User · Answer

The most you could do is to trigger a background image change when hovering the LI  If you want something to happen upon clicking an LI and then staying that way  then you ll need to use some JS   I would name the images starting with bw  and clr  and just use JS to swap between them   example       images   find  img   bind  click   function       var src     this  attr  src           state    src indexOf  bw        0     bw     clr       state      bw     src   src replace  bw    clr      src   src replace  clr    bw            this  attr  src   src          link to fiddle  http   jsfiddle net felcom J2ucD

User · Answer

This script helps to change the image on click the text    lt script gt        document  ready function           li   click function        var imgpath     this  attr  dir            image   html   lt img src   imgpath   gt                     btn   click function            thumbs   fadeIn 500           image   animate  marginTop  10px   200         this  hide            hide   fadeIn  slow                    hide   click function            thumbs   fadeOut 500 function             image   animate  marginTop  50px   200                 this  hide            show   fadeIn  slow                         lt  script gt     lt div class  sandiv  gt   lt h1 style  text-align center   gt The  Human  Body  Parts   lt  h1 gt   lt div id  thumbs  gt   lt div class  sanl  gt   lt ul gt   lt li dir  5 png  gt Human-body-organ-diag-1 lt  li gt   lt li dir  4 png  gt Human-body-organ-diag-2 lt  li gt   lt li dir  3 png  gt Human-body-organ-diag-3 lt  li gt   lt li dir  2 png  gt Human-body-organ-diag-4 lt  li gt   lt li dir  1 png  gt Human-body-organ-diag-5 lt  li gt   lt  ul gt   lt  div gt   lt  div gt   lt div class  man  gt   lt div id  image  gt   lt img src  2 png  width  348  height  375  gt  lt  div gt   lt  div gt   lt div id  thumbs  gt   lt div class  sanr   gt   lt ul gt   lt li dir  5 png  gt Human-body-organ-diag-6 lt  li gt   lt li dir  4 png  gt Human-body-organ-diag-7 lt  li gt   lt li dir  3 png  gt Human-body-organ-diag-8 lt  li gt   lt li dir  2 png  gt Human-body-organ-diag-9 lt  li gt   lt li dir  1 png  gt Human-body-organ-diag-10 lt  li gt   lt  ul gt   lt  div gt   lt  div gt   lt h2 gt  lt a style  color  333   href  http   www sanwebcorner com   gt sanwebcorner com lt  a gt  lt  h2 gt   lt  div gt    see the demo here

User · Answer

Here  when clicking next or previous  the src attribute of an img tag is changed to the next or previous value in an array    lt div id  imageGallery  gt           lt img id  image  src  http   adamyost com images wasatch thumb gif    gt       lt div id  previous  gt Previous lt  div gt           lt div id  next  gt Next lt  div gt           lt  div gt    lt script src  http   code jquery com jquery-1 11 0 min js  gt  lt  script gt    lt script gt         document   ready function              var images                  http   placehold it 350x150                http   placehold it 150x150                http   placehold it 50x150                          var imageIndex   0               previous   on  click   function                          imageIndex    imageIndex   images length -1     images length                       image   attr  src   images imageIndex                             next   on  click   function                imageIndex    imageIndex 1     images length                       image   attr  src   images imageIndex                             image   attr images 0              lt  script gt    I was able to implement this by modifying this answer  jQuery array with next and previous buttons to scroll through entries

User · Answer

How about this  It doesn t require so much coding   x000D   x000D      plus   click function       this  toggleClass  minus          x000D   plus      background-image  url  https   cdn0 iconfinder com data icons ie Bright 128 plus add blue png        width 130px      height 130px      background-repeat no-repeat      plus minus      background-image  url  https   cdn0 iconfinder com data icons ie Bright 128 plus add minus png        width 130px      height 130px      background-repeat no-repeat    x000D   lt script src  https   ajax googleapis com ajax libs jquery 2 1 1 jquery min js  gt  lt  script gt   lt a href     gt  lt div class  plus  gt CHANGE lt  div gt  lt  a gt  x000D   x000D   x000D

User · Answer

Or maybe  and that is prob it   x000D   x000D   lt img src  path  onclick  this src  path   gt  x000D   x000D   x000D

User · Answer

To change image onclik with javascript you need to have image with id    lt p gt           lt img alt    src  http   www userinterfaceicons com 80x80 minimize png               style  height  85px  width  198px  id  imgClickAndChange  onclick  changeImage       gt   lt  p gt    Then you could call javascript function when image is clicked    lt script language  javascript  gt      function changeImage              if  document getElementById  imgClickAndChange   src     http   www userinterfaceicons com 80x80 minimize png                          document getElementById  imgClickAndChange   src    http   www userinterfaceicons com 80x80 maximize png                     else                        document getElementById  imgClickAndChange   src    http   www userinterfaceicons com 80x80 minimize png                    lt  script gt    This code will set image to maximize png if current img src is set to minimize png and vice versa  For more details visit  Change image onclick with javascript link

User · Answer

If your images are named you can reference them through the DOM and change the source   document  imgName   src     newImgSrc jpg     or  document getElementById  imgName   src     newImgSrc jpg

[javascript] Change an image with onclick()

Examples related to javascript

Examples related to html

Examples related to css