I want a drop shadow to appear upon click of a image. I don't use Jquery at the moment so if possible provide a java-script solution. Heres my fiddle: /

I would also like for the box shadow to only be active on whatever item is Currently Selected. (the last item clicked should be the only one with the shadow)

    window.onload = function(){
var box1 = document.getElementById('thumbs');
var box1Div1 = box1.getElementsByTagName('input');
var img1 = box1Div1[0]
    console.log(img1);

    img1.onclick = function(){
    img1.setAttribute("class", "BoxShadow");
   };
   };

I want a drop shadow to appear upon click of a image. I don't use Jquery at the moment so if possible provide a java-script solution. Heres my fiddle: http://jsfiddle/zUNhD/7/

I would also like for the box shadow to only be active on whatever item is Currently Selected. (the last item clicked should be the only one with the shadow)

    window.onload = function(){
var box1 = document.getElementById('thumbs');
var box1Div1 = box1.getElementsByTagName('input');
var img1 = box1Div1[0]
    console.log(img1);

    img1.onclick = function(){
    img1.setAttribute("class", "BoxShadow");
   };
   };

• javascript
• css

• 1 Like this: jsfiddle/zUNhD/20 ? – Passerby Commented Nov 5, 2012 at 9:12
• @Passerby Yes Thank you very much! If you want repost this as a "answer" and i will accept. much appreciated. – ModS Commented Nov 5, 2012 at 9:27

3 Answers 3

Extending from ment:

You can use :active selector to response to "click" event, and :focus selector to response to, well, "focus" event:

input:active, input:focus{
    box-shadow:2px 2px 2px blue;
}

fiddle

The function hasn't been called in your code.

window.onload = function(){
var box1 = document.getElementById('thumbs');
var box1Div1 = box1.getElementsByTagName('input');
var img1 = box1Div1[0];      
img1.onclick = function(){
img1.setAttribute("class", "DropShad");
};
}();

Here is the working fiddle ... http://jsfiddle/zUNhD/18/

See this jsfiddle for some simplifications of your code. The css class wasn't assigned right, it should be preceded by a dot. Put your script tag near the ending </body> tag and use:

var box1 = document.getElementById('thumbs');
var box1Div1 = box1.getElementsByTagName('input');
var img1 = box1Div1[0]

img1.onclick = function(){
  img1.className = "DropShad";
};