I See Cards Game Part 2 - Dynamic Styling

by Ron Eaglin

HTML

<body onload="loadCards()">
<table>
    <tr>
        <td>
            <span class="cards1" id="C1"></span>
        </td>
        <td>
            <span class="cards1" id="C2"></span>    
        </td>
    </tr>
    <tr>
        <td>
            <span class="cards1" id="C3"></span>
        </td>
        <td>
            <span class="cards1" id="C4"></span>    
        </td>
    </tr>
</table>
</body>

CSS

.cards1 { 
    display: block; 
    width: 190px; 
    height: 261px;  
    background-repeat: no-repeat;
    border:3px solid #a1a1a1;
    border-radius: 18px;
}

JavaScript

var airplane = {
    backgroundPosition: '-2px -4px',
};

var chicken = {
    backgroundPosition: '-205px -277px',
};

var cow = {
    backgroundPosition: '-811px -277px',
};

var flag = {
    backgroundPosition: '-205px -552px',
};

function loadCards()
{
    SetCard("C1", airplane);
    SetCard("C2", chicken);
    SetCard("C3", cow);
    SetCard("C4", flag);
}

function SetCard(elementId, cardStyle)
{

   var element = document.getElementById(elementId);    
   element.style.backgroundImage = 'url(https://cop4813eaglin.pbworks.com/f/ISeeCards1.png)';

   element.style.backgroundPosition = cardStyle.backgroundPosition; 
}