Witam, mam problem dotyczący efektu przycisku na stronie(która robię za pośrednictwem programu dreamweaver cs3)
ogólnie przycisk jest w formacie .png i jest wszystko dobrze do momentu kiedy chcial bym mu dodać efekt pogrubienia czy cos...
W programie jest to opcja "swap image(zmien obraz)" a zeby wszystk obylo jasniejsze nad czym polega moj problem dam screeny:

krok _1 http://img376.imageshack.us/my.php?image=23311137gt4.png
krok _2 http://img222.imageshack.us/my.php?image=17276147qn5.png
krok _3 http://img149.imageshack.us/my.php?image=71584845yz2.png
krok _4 http://img145.imageshack.us/my.php?image=50248558cm3.png
krok _5 http://img145.imageshack.us/my.php?image=54518348un3.png

~Pozdrawiam!

zamiast tego <img> daj diva o id="button_1"

[HTML] pobierz, plaintext 
<div id="button_1">
[HTML] pobierz, plaintext 

i w miejscu gdzie masz css'a dodaj:

[HTML] pobierz, plaintext 
#button_1
    {
     background:url(button_1_czysty.jpg);
width: 10px;   //szerokośc buttona
height: 10px;  //wyskokość buttona
}
#button_1:hover
{
 background:url(button_1_najechany.jpg);
}
[HTML] pobierz, plaintext 

oczywiście id mozesz sobie zmienić na jkie chcesz to jest tylko przykładowe
tak samo nazwy obrazków

button_1_najechany.jpg
i
button_1_czysty.jpg

Przepraszam ale coś mi nie wychodzi...

Możesz mi to edytować?


Kod całej tabeli:

[HTML] pobierz, plaintext 
<div id="Layer3" style="position:absolute; left:442px; top:393px; width:272px; height:442px; z-index:3; visibility: visible;"><br>
  <table width="273" height="200" border="0" background="img/MENUto2.PNG">
    <tr>
      <td height="30" background="img/MENU.jpg"><span class="style27 styl2 style28"> NAWIGACJA</span></td>
    </tr>
    <tr>
      <td valign="top"><p><a href="index.php"><img src="przyciski/stronaglowna.png" width="170" height="20" border="0" align="bottom" class="style27"></a></p>
        <p><a href="index.php"><img src="przyciski/stronaglowna.png" width="170" height="20" border="0" align="bottom" class="style27"></a></p>
        <p><a href="index.php"><img src="przyciski/stronaglowna.png" width="170" height="20" border="0" align="bottom" class="style27"></a></p>
        <p><a href="index.php"><img src="przyciski/stronaglowna.png" width="170" height="20" border="0" align="bottom" class="style27"></a></p>      </td>
    </tr>
  </table>
  <br>
  <br>
</div>
[HTML] pobierz, plaintext 

Kod tabelki z nieudanym przyciskiem:

[HTML] pobierz, plaintext 
<img src="przyciski/stronaglowna.png" width="170" height="20" border="0" align="bottom" class="style27" onMouseOver="MM_swapImage('bez nazwy &lt;img&gt;','','przyciski/stronaglowna1.PNG',1)" onMouseOut="MM_swapImgRestore()">
[HTML] pobierz, plaintext 

Kod obrazka:

[HTML] pobierz, plaintext 
<img src="przyciski/stronaglowna.png" width="170" height="20" border="0" align="bottom" class="style27">
[HTML] pobierz, plaintext 

style.css

[HTML] pobierz, plaintext 
@charset "utf-8";
/* CSS Document */
 
#button_1
{
background:url(przyciski/stronaglowna.png);
width: 170px; //szerokośc buttona
height: 20px; //wyskokość buttona
}
#button_1:hover
{
background:url(przyciski/stronaglowna1.png);
}
[HTML] pobierz, plaintext 

http://osiolki.net/tabelki!

Kawałek robisz na tabelkach, kawałek na warstwach, zdecyduj się... Twój kod wygląda na generowany przez jakiegoś WYSIWYG-a.
Poza tym, wysiliłbyś się trochę:

http://letmegooglethatforyou.com/?q=CSS%20Rollover

Pierwszy wynik w google...

[HTML] pobierz, plaintext 
<div id="Layer3" style="position:absolute; left:442px; top:393px; width:272px; height:442px; z-index:3; visibility: visible;"><br>
  <table width="273" height="200" border="0" background="img/MENUto2.PNG">
    <tr>
      <td height="30" background="img/MENU.jpg"><span class="style27 styl2 style28"> NAWIGACJA</span></td>
    </tr>
    <tr>
      <td valign="top"><p><a href="index.php"><div id="button_1"></div></a></p>
        <p><a href="index.php"><div id="button_1"></div></a></p>
        <p><a href="index.php"><div id="button_1"></div></a></p>
        <p><a href="index.php"><div id="button_1"></div></p>      </td>
    </tr>
  </table>
  <br>
  <br>
</div>
[HTML] pobierz, plaintext 

css:

[HTML] pobierz, plaintext 
@charset "utf-8";
/* CSS Document */
 
#button_1
{
background:url(przyciski/stronaglowna.png);
width: 170px; //szerokośc buttona
height: 20px; //wyskokość buttona
margin: 0;
padding: 0;
}
#button_1:hover
{
background:url(przyciski/stronaglowna1.png);
}
[HTML] pobierz, plaintext