Картинки съезжают

[pavelslap]

Почему у меня при наведении на одну картинку другие съезжают? Зайдите по ссылке и вы поймёте о чём речь.
http://81.198.86.35:39298/nv/chiefEng/

[JTG]

Потому что размеры шрифта в классах .under_img_text и .under_img_text_hover различаются и высота блока не задана.

Вообще onmouseover/onmouseout здесь нафиг не нужно, всё это вполне решается средствами CSS — псевдокласс :hover

[pavelslap]

Ну как же? Высота блоков under_img_text и under_img_text_hover равна 18px. Высота блока chiefEng_block (рядом стоящего) тоже указана. Она равна 340px. Так почему картинки съезжают?

(Мне надо использовать onmouseover и onmouseout, потому что к картинкам добавляется суффикс _colored в цикле. А css код :hover{background: _colored} генерировать в цикле не хочу, потому что у меня за css отвечает css-файл, который статический, а не динамический.)

[eval]

что к картинкам добавляется суффикс _colored в цикле

в каком таком цикле?

[pavelslap]

Сообщение от eval

в каком таком цикле?

        <c:forEach items="${index.selectedImgs}" var="i" varStatus="state">
            <div class="${i.imgEvent}_block ${i.imgLink} display_inline ${i.imgEvent}_block_${state.index}" onmouseover="select('img${state.index}', '${initParam.cdnUrl}${i.imgPath}', '${i.imgExt}', 'img${state.index}_text');" onmouseout="unSelect('img${state.index}', '${initParam.cdnUrl}${i.imgPath}', '${i.imgExt}', 'img${state.index}_text');" >
                <div style="display:none;"><img src="${initParam.cdnUrl}${i.imgPath}_colored.png" alt="" /></div>
                <c:choose>
                    <c:when test="${i.otherLink ne null}"><a href="${i.otherLink}"></c:when>
                        <c:otherwise><a href="${initParam.mainPath}/${i.pageL1}/${i.pageL2}-${i.pageL3}/"></c:otherwise>
                        </c:choose>
   
                        <img src="${initParam.cdnUrl}${i.imgPath}${i.imgExt}" alt="" id="img${state.index}"/>
                    </a>
                    <c:if test="${i.pageL1 eq 'index'}"><c:set var="imageKey" value="${i.pageL1}_${state.index}" /></c:if>
                    <c:if test="${i.pageL1 ne 'index'}"><c:set var="imageKey" value="${i.imgKey}" /></c:if>
                    
                    <div id="img${state.index}_text" class="under_img_text"><fmt:message key="${imageKey}" /></div>
                    <c:if test="${index.event eq 'college'}">
                        <%@include file="/WEB-INF/views/riga/tuition/collegeFlags.jsp" %>
                    </c:if>
            </div>
                  
            <div class="${i.imgEvent}_after display_inline" style="${i.afterImgBlockStyle}"></div>
        </c:forEach>

[Naive]

Мне надо использовать onmouseover и onmouseout, потому что к картинкам добавляется суффикс _colored в цикле. А css код :hover{background: _colored} генерировать в цикле не хочу, потому что у меня за css отвечает css-файл, который статический, а не динамический.

Создается дополнительный блок с адресом картинки при наведении, и собственно :hover его и показывает, все динамически. Пример:
http://www.locavto.ru/ (в середине "до-после" генерятся сервером, наведение реагирует на css)