HTML+CSS+JavaScript

Привет, столкнулся с проблемой данного кода:

<a href="#"><img src='images/button_news.jpg' border=0 onmouseover="this.src='images/button_news_2.jpg'" onmouseout="this.src='images/button_news.jpg'" ></a>

Есть два типа картинки button_news.jpg и button_news_2.jpg
при наведение на картинку данный код ее заменяет на второую и обратно.
1 картинка без отступа, вторая картинка с отступов вверх, тоесть добавлен пробел снизу с белым фоном, вставляем данный код допустим в таблицу и появляется проблема, при наведение таблица начинае прыгать при замене картинки, как можно сделать чтобы картинка делала отступ вверх но при этом не влияла на таблицу?
спасибо...

<style type="text/css"> a.hoverLink {     padding-bottom: 5px; /* высота отступа во второй картинке */ } a.hoverLink {     padding-bottom: 0; } </style> <a href="#" class="hoverLink"><img src='images/button_news.jpg' border=0 onmouseover="this.src='images/button_news_2.jpg'" onmouseout="this.src='images/button_news.jpg'" ></a>

спасибо но таблица всеравно скачет(
смещение кнопок, но вместе с ним и смещается таблица, и все остально что находится после кнопок

упс я извиняюсь, немного не дописал :)

<style type="text/css"> a.hoverLink {     padding-bottom: 5px; /* высота отступа во второй картинке */ } a.hoverLink:hover {     padding-bottom: 0; } </style> <a href="#" class="hoverLink"><img src='images/button_news.jpg' border=0 onmouseover="this.src='images/button_news_2.jpg'" onmouseout="this.src='images/button_news.jpg'" ></a>

если и так нет то попробуйте

a.hoverLink {     display: inline-block;     margin-bottom: 5px; /* высота отступа во второй картинке */ } a.hoverLink:hover {     margin-bottom: 0; }

и тот и второй вариант всеравно прыгает :( вот примерный код попробуйте,

<style type="text/css">  a.hoverLink {      padding-bottom: 5px; /* высота отступа во второй картинке */  }  a.hoverLink:hover {      padding-bottom: 0;  }  </style>  <table border="1" width="100%">     <tr>         <td> <a href="#" class="hoverLink"><img src='images/button_news.jpg' border=0 onmouseover="this.src='images/button_news_2.jpg'" onmouseout="this.src='images/button_news.jpg'" ></a>         </td>     </tr>     <tr>         <td bgcolor="#000000"><font color="#FFFFFF">text text text text text text text         </font> </td>     </tr> </table> <br> test text

к примеру размер первой кратинки 111х44 второй 111х50 PX

не вышло

грубо говоря нужно сделать что то типа как тут
http://ziffy.ru/category/web-design/
где кнопки твитер и рсс

у Вас просто изначально криво сделано, потому что на яваскрипте.
Это можно легко и удобней сделать на Ксс.

обыскал весь яндекс ненашел как ето сделать, подскажите пожалуйста

<style type="text/css"> a.news {     display: inline-block;     width: 100px; /* ширина изображения */     height: 100px; /*  высота изображения */     background: url(images/button_news.jpg) no-repeat top left;     padding-bottom: 5px; /* отступ второго изображения */ } a.news:hover {     background-image: url(images/button_news_2.jpg);     padding-bottom: 0; } </style> <a href="#" class="news"></a>

можно сделать ещё проще, без второй картинки. Скажите, отступ у вас обычный? Просто полоска залитая белым цветом?

да просто белым цветом, спасибо за внимание! а как еще проще?
и таких картинок не 1, их 6 это как меню в ряд

И при вашем методе ТАБЛИЦА или текст который под этими картинками тоже скачет... ((((((

да я туплю :)
я просто визуально не вижу, так теоретически пишу :)
всё без второй картинки должно быть нормально.

вот к примеру + несколько ссылок меню:

<style type="text/css"> a.menulink {     display: inline-block;     padding-top: 5px; /* отступ сверху */     background-repeat: no-repeat;     background-position: top left; } a.menulink:hover {     border-top: 5px solid #fff; /* отступ сверху */     padding: 0; } a.menulink.news {     width: 100px; /* ширина изображения */      height: 100px; /*  высота изображения */      background-image: url(images/button_news.jpg); } a.menulink.contacts {     width: 100px; /* ширина изображения */      height: 100px; /*  высота изображения */      background-image: url(images/button_contacts.jpg); } a.menulink.about {     width: 100px; /* ширина изображения */      height: 100px; /*  высота изображения */      background-image: url(images/button_about.jpg); } </style>  <a href="#" class="menulink news"></a> <a href="#" class="menulink contacts"></a> <a href="#" class="menulink about"></a>

если размер картинок одинаковый то тогда так:

<style type="text/css"> a.menulink {     display: inline-block;     width: 100px; /* ширина изображения */      height: 100px; /*  высота изображения */     padding-top: 5px; /* отступ сверху */     background-repeat: no-repeat;     background-position: top left; } a.menulink:hover {     border-top: 5px solid #fff; /* отступ сверху */     padding: 0; } a.menulink.news {     background-image: url(images/button_news.jpg); } a.menulink.contacts {     background-image: url(images/button_contacts.jpg); } a.menulink.about {      background-image: url(images/button_about.jpg); } </style>  <a href="#" class="menulink news"></a> <a href="#" class="menulink contacts"></a> <a href="#" class="menulink about"></a>

ЗАМЕЧАТЕЛЬНО! респект!
а как сделать чтобы они вверх подымались а не вниз?

менял -top на -bot, не работает так

a.menulink:hover {      border-bottom: 5px solid #fff; /* отступ сверху */      padding: 0;  }

Разобрался спасибо большое!
background-position: bottom left;

только в IE некорректно работает :(
при смещение картинки вверх у нее как бы отрезается верхушка

задайте ячейке, где находятся кнопки, display: inline-block

например
<td style="display: inline-block">...</td>

всеравно тоже самое

позволю себе продолжить тему,

использую выше указаный скрипт
нужно чтобы к примеру при заходе на определенную страницу меню в которую мы зашли она оставалась выдвинутой... как это можно сделать?

<style type="text/css">  a.menulink, a.menulink.active {     display: inline-block;      width: 100px; /* ширина изображения */       height: 100px; /*  высота изображения */      padding-top: 5px; /* отступ сверху */      background-repeat: no-repeat;      background-position: top left;  }  a.menulink:hover {      border-top: 5px solid #fff; /* отступ сверху */      padding: 0;  }  a.menulink.news {      background-image: url(images/button_news.jpg);  }  a.menulink.contacts {      background-image: url(images/button_contacts.jpg);  }  a.menulink.about {       background-image: url(images/button_about.jpg);  }  </style>   <a href="#" class="menulink news"></a>  <a href="#" class="menulink contacts active"></a>  <a href="#" class="menulink about"></a>

Спасбио за отзыв, я как понял при варианте если размеры у картинок разные то нужно прописатьпросто вот так:

a.menulink,     a.menulink.active {         display: inline-block;          padding-top: 5px; /* отступ сверху */          background-repeat: no-repeat;          background-position: bottom left;

но почему то реакции никакой :(

или так попробуйте: <a href="#" class="menulink active contacts"></a>

странно но нет :(

в чем еще может быть загвоздка? вот только в IE такая проблема :(