Question

Скажите, можно ли на сайте http://school4-26.ucoz.ru/index/nashi_uchitelja/0-10 сделать так чтобы при наведении на фамилию педагога появлялась картинка с их фотографией? Пожалуйста опишите подробно, что и куда надо вставлять. У меня получается, что картинка находится рядом с фамилией, а не всплывает при наведении на фамилию.

Answer 1

Пример как подобное реализуется можно прочесть на сайте - здесь.

Comments

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

<a class="imagetip" href="ВАША_ССЫЛКА" target="_blank">"АНКОР ССЫЛКИ"<span><img class="alignnone" src="ССЫЛКА_НА_НЕОБХОДИМОЕ ИЗОБРАЖЕНИЕ" /></span></a>

---

Михайловск МБОУ СОШ МОУ СОШ 4,

1. Ваша ссылка - Это ссылка куда перейти при нажатии на фото
2. Анкор ссылки - Это название ссылки
3. Ссылка на необходимое изображение - Это надеюсь понятно, что здесь нужно ссылку на фото вставить.

Все остальное описано в инструкции по ссылке. Те стили которые там предлагаются:

.imagetip span{
    border-radius: 5px 5px 5px 5px;
    visibility: hidden;
    position: absolute;
    left: 270px;
    background: #fff;
    box-shadow: -2px 2px 10px -1px #333; 
    border-radius: 5px;
    width: 20%;
    z-index: 9999;
}
.imagetip:hover span{
visibility: visible;
}

их обязательно установить в таблицу стилей CSS в самый низ после всех стилей. Без этих стилей ничего работать не будет при наведении как нужно.

---

Сделала как было написано, в конец добавила стили 

/*--ubutton-fix--*/
.myBtnLeft img, .myBtnRight img, .myBtnLeftA img, .myBtnRightA img, .myBtnRight + td input, .myBtnRightA + td input { display: block }
.myBtnCenter, .myBtnCenterA { line-height:19px !important }
.myBtnCont { height:19px; padding-bottom:0 !important }

<?$WIDGET$('2','15')?>
.imagetip span{
    border-radius: 5px 5px 5px 5px;
    visibility: hidden;
    position: absolute;
    left: 270px;
    background: #fff;
    box-shadow: -2px 2px 10px -1px #333; 
    border-radius: 5px;
    width: 20%;
    z-index: 9999;
}
.imagetip:hover span{
visibility: visible;
}

и на той странице где нужна всплывающая картинка вставила код

<a class="imagetip" href="http://school4-26.ucoz.ru/index/popova_nina_leonidovna/0-289" target="_blank">"Попова Нина Леонидовна"<span><img class="alignnone" src="http://school4-26.ucoz.ru/pedsostav/prezentacija1.jpg" /></span></a>

но уменя получается что картинка не появляется когда наводишь на текст, а находится рядом. Почему? Что я не так делаю? 

получается так http://school4-26.ucoz.ru/index/nashi_uchitelja/0-10