Question

I have 3 divs with 2 possible image tags for each (active or inactive). If one div is clicked to be active the other divs must be set to inactive. How do I accomplish this with img tags and what happens if user has javascript disable?

Answer 1

Do you mean something like this?

<div class='block' id='block1'>     <img src='inactive_block1.jpg'> </div>  <div class='block' id='block2'>     <img src='inactive_block2.jpg'> </div>  <div class='block' id='block3'>     <img src='inactive_block3.jpg'> </div> 

Using a library like jQuery, the javascript would look like:

$(function() {     $('.block').click(function() {        $('#block1').find('img').attr('src', 'inactive_block1.jpg');        $('#block2').find('img').attr('src', 'inactive_block2.jpg');        $('#block3').find('img').attr('src', 'inactive_block3.jpg');        $(this).find('img').attr('src', 'active_' + $(this).attr('id') + '.jpg');     }); }); 

With the above, if you have inactive_block1.jpg, inactive_block2.jpg, inactive_block3.jpg and active_block1.jpg, active_block2.jpg and active_block3.jpg you should get what you want.

It’s up to you whether its worth it or not to have javascript disabled fallbacks, mostly depending on whether you expect a large amount of your audience to have javascript disabled.