html - Photoshop Slices - Add Objects over Images -

so, made design website in photoshop , exported website html & images. messed around bit , made menu items click-able , when hover, text change, , little things that.

what wondering how have slice image random colour example, , able place stuff on top of buttons or text.

code:

<td colspan="3">     <img src="images/index_17.png" width="395" height="90" alt=""></td> 

this example of specific slice want place text on top of , able change text whenever want.

has ever done before or have clue how without messing of images?

if target specific cell place , style content best bet call out in code giving unique id. once element has id can use css affect elements place inside.

because you're using slice tool in photoshop, default adds sliced image table cell. before can place text in there, have move inserted image background image instead. thing note once that, td element not know size should have explicitly set size of image you're moving.

for example using code posted this:

table {    border: 1px dotted #333;    border-collapse: collapse;    }  td {    border: 1px solid #999;    padding: 10px;    background-color: #ededed;    }    /* in cell styled, prepend id gave cell */    td#styled-cell {    height: 90px;    width:395px;    /*background-image: url("images/index_17.png"); */ /*uncomment line , update url match have images in relation css file */    background-color: #999;    }    td#styled-cell h2 {    font-size: 20px;    text-align: center;    color: lightblue;    text-transform: uppercase;    }    td#styled-cell p {    font-size: 12px;    text-align: center;    color: white;    }    td#styled-cell a,  td#styled-cell a:link {    font-size: 14px;    color: pink;    }    td#styled-cell a:visited,  td#styled-cell a:hover,  td#styled-cell a:active {    color: red;    text-decoration: underline;    }

<table>    <tr>      <td>          <!-- show how looks in table, these replaced other rows , cells photoshop created -->          other example cell      </td>      <td colspan="3" id="styled-cell">        <h2> example styled text</h2>        <p> <a href="#"> example link</a></p>        <p>example paragraph no link.</p>      </td>    </tr>  </table>