The problem is that you always work with the first div (index=0).
You can change your functions to accept index as parameter, like this:
<div id="video1" class="hovertext">
<span class="video-txt">01:54</span>
<span class="watch-later">
<input type="image" onclick="showTick(0)" src="images/watchlater.jpg" />
</span>
<span class="tick" style="display:none;">
<input type="image" onclick="conceal(0)" onMouseOut="hideTick(0)" src="images/tick.jpg" />
</span>
</div>
<div id="video2" class="hovertext">
<span class="video-txt">01:54</span>
<span class="watch-later">
<input type="image" onclick="showTick(1)" src="images/watchlater.jpg" />
</span>
<span class="tick" style="display:none;">
<input type="image" onclick="conceal(1)" onMouseOut="hideTick(1)" src="images/tick.jpg" />
</span>
</div>
And the javascript like this:
<script type="text/javascript">
function conceal(index) {
if(document.getElementsByClassName('tick')[index].style.display =='block') {
document.getElementsByClassName('tick')[index].style.display ='none';
}
}
function showTick(index){
if(document.getElementsByClassName('tick')[index].style.display =='none') {
document.getElementsByClassName('tick')[index].style.display ='block';
}
}
function hideTick(index){
if(document.getElementsByClassName('tick')[index].style.display =='block') {
document.getElementsByClassName('tick')[index].style.display ='none';
}
}
</script>
Better solution:
Also try to always cache DOM calls
. In your case the following solution will be much better.
<script type="text/javascript">
var ticks = document.getElementsByClassName('tick');
function conceal(index) {
if(ticks [index].style.display =='block') {
ticks [index].style.display ='none';
}
}
function showTick(index){
if(ticks [index].style.display =='none') {
ticks [index].style.display ='block';
}
}
function hideTick(index){
if(ticks [index].style.display =='block') {
ticks [index].style.display ='none';
}
}
</script>
UPDATE:
Here is another (better) solution. All listeners are attached dynamically in code (not in HTML markup). Also I think you can show your images using IMG
tags rather than INPUT
.
So here is the updated HTML markup:
<div id="video1" class="hovertext">
<span class="video-txt">01:54</span>
<span class="watch-later">
<img src="images/watchlater.jpg" />
</span>
<span class="tick" style="display:none;">
<img src="images/tick.jpg" />
</span>
</div>
<div id="video2" class="hovertext">
<span class="video-txt">01:54</span>
<span class="watch-later">
<img src="images/watchlater.jpg" />
</span>
<span class="tick" style="display:none;">
<img src="images/tick.jpg" />
</span>
</div>
And the new Javascript code:
function init() {
var watchLaters = document.getElemenetsByClassName('watch-later');
for(var i=0, l = watchLaters.length; i < l; i++) {
var tick = watchLaters[i].parentNode.getElementsByClassName('tick')[0];
watchLaters[i].onclick = tick.onmouseout = function() {
if(tick.style.display == 'none') {
tick.style.display = 'block';
}
};
tick.onclick = function() {
if(tick.style.display == 'block') {
tick.style.display = 'none';
}
};
}
}
init();
You can ask me, if anything is unclear.