Image overlay problem

[Spectre]

Hey guys, I need a hand.

 

I have a 3x3 table, and in each cell, is echoed out a specific image (based on id's of the cell and vars associated with those IDs)

 

http://i32.tinypic.com/5layxw.jpg  <<<< that's what it looks like (center square has mouseover it at the time of pic to show transparency stuff)

 

Anyway, it all works fine, shows the right images for each coord as you move around, but... what I'd like to do, is add a second image over some squares (done with a small check) to overlay a .png over the jpg that's there already to denote a cetain thing there.

 

The default grass tile for example:

 

    $img = '<img src=images/cs/grassthumb.jpg style="opacity:1;filter:alpha(opacity=100); position: relative; z-index:1;"
    onmouseover="this.style.opacity=0.6;this.filters.alpha.opacity=60"
    onmouseout="this.style.opacity=1;this.filters.alpha.opacity=100" />';

 

how it's echoed:

 

  echo "<td id=\"$move\" $link >";
  echo "$img </td>";

 

And all that works fine, but as I said I'd like to do:

 

  if($XX == $castlechk[x] && $YY == $castlechk[y]){
  $img .= '<img src=images/cs/castle.png style="opacity:1;filter:alpha(opacity=100); position: relative; left: -80px; right: -80px; z-index:2;"
    onmouseover="this.style.opacity=0.6;this.filters.alpha.opacity=60"
    onmouseout="this.style.opacity=1;this.filters.alpha.opacity=100" />';
  }

 

and although it "works" there's a problem of it having 80 extra px of black space, which as you can guess, REALLY messes with the table (makes it look like it's 4 columns instead of 3)

 

This is in FF 2, not even checked other browsers yet. And I don't want to give absolute values for pos, because the little nav table moves, because there's other info above it always that can stretch the page down.

 

So yeah, help? please?

[TheFilmGod]

absolute positioning.