start 0 opacity and onClick set opacity to 100

Question

How do I start welcome.png set to opacity 0 and when button (id= "c1") is clicked to slowly fade in to opacity 100?

<img id = "welcome" src="img/welcome.png"></img>

<a class="Btn" id= "c1" onclick="javascript:document.getElementById('var').value='a_';mkr(this)">Button1</a>

I tried adding the below. But did not work.

<a class="Btn" id= "c1" onclick="javascript:document.getElementById('var').value='a_';mkr(this); javascript:document.getElementById('welcome').className = 'opac';">Button1</a1

.opac {
    opacity:1;
    filter:alpha(opacity=100);
}

Answer 1

No JQuery needed(some people might say not enough JQuery :D ). This should be enough for whta you need.

<img id = "welcome" src="img/welcome.png" />

<a class="Btn" id= "c1" onclick="document.getElementById('welcome').className = 'opac';">Button1</a>

CSS:

#welcome { opacity:0; transition: opacity 1s; }
.opac{opacity: 1 !important;}

Demo: (works in chrome, not tested in other browsers)
http://jsfiddle.net/zKkun/