3 {{ upvoteCount | shortNum }}
3 {{ upvoteCount | shortNum }}

How to change two different images on one click

by TinPete
2 replies
Hi Everyone,

I'm trying to create a landing page that has two images, and if you select one, it will turn on a highlight around it.

Then if you select the other, it will turn off the highlight from the first one, and turn on the highlight for the one most recently selected. (and then toggle the highlighting if you click back to the first image)

I don't know if this matters, but my page is using php, but I'm very new to it, and to css.

Can anyone get me pointed in the right direction?

Thanks in advance!

- Pete
#change #click #images
  • Profile picture of the author Brandon Tanner
    Pretty simple job with jQuery. Just add the following code to the <head> section (assuming you are using HTML5)...

    HTML Code:
    <script src="http://code.jquery.com/jquery-1.9.1.js"></script>

<script>    
   $(document).ready(function() {
       $('img').click(function(){ // when an image is clicked...
           $('img').css('border', ''); // first remove the border from all images        
           $(this).css('border', '2px solid yellow'); // then add a border to selected image
       });
   }); 
</script>
    ^ That will give the selected image a 2px solid yellow border. You can of course change the border color, width, etc. to whatever you want.
    Signature

    {{ DiscussionBoard.errors[8697472].message }}
    • Profile picture of the author TinPete
      Thanks! That's just what I was looking for!
      Signature

      Interested in Psychic Development? You've never seen anything like Miracle Mastery. Take a look!

      {{ DiscussionBoard.errors[8705618].message }}

Trending Topics