VPF::вывод надписи на картинку - Форум программистов

Fubu_By

Дата 19.8.2010, 16:00 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 290
Регистрация: 14.2.2007

Репутация: нет
Всего: 0

есть вот такая для примера страница

Код


<html>
<head>
</head>
<body>
текст текст текст текст текст текст текст 
<img src="/kartinka.jpg" />
<span id='1' style="display: none;">Описание картинки</span>
текст текст текст текст текст текст текст 
</body>
</html>

как сделать чтобы при наведении на картинку, появлялся span id=1 снизу на картике, растянувшись на всю длину картинки

Это сообщение отредактировал(а) Fubu_By - 19.8.2010, 16:04

--------------------

MobiAppSystems

Amphiluke

Дата 19.8.2010, 16:23 (ссылка)

(нет голосов)

Загрузка ...

☽

Профиль
Группа: Завсегдатай
Сообщений: 1253
Регистрация: 26.8.2009

Репутация: 35
Всего: 112

ИМХО, немного мимо запостили тему. Это раздел для профи…

Цитата(Vingrad)

JavaScript: Для профи

По теме: лучше не span, а div (блочный элемент).

Код


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
    #descript {
        background: #000000;
        color: #FFFFFF;
        display: none;
        padding: 5px 0px;
        position: relative;
    }
</style>
<script type="text/javascript">
    function descript(visible) {
        var d = document.getElementById("descript");
        d.style.display = (visible) ? "block" : "none";
        if (!visible) return true;
        d.style.width = document.getElementById("img").offsetWidth.toString() + "px";
        d.style.top = -d.offsetHeight.toString() + "px";
    }
</script>
</head>

<body>
    <div>
        <img src="http://ipicture.ru/uploads/100819/7q4mmHUPmZ.jpg" alt="" id="img" onmouseover="descript(true);" onmouseout="descript(false);" />
        <div id="descript" onmouseover="descript(true);" onmouseout="descript(false);">Автоновости</span>
    </div>
</body>
</html>

В JQuery метод hover(). Выйдет красивее (код, а не результат).

Fubu_By

Дата 19.8.2010, 16:52 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 290
Регистрация: 14.2.2007

Репутация: нет
Всего: 0

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

Код


<img src="http://ipicture.ru/uploads/100819/7q4mmHUPmZ.jpg" alt="" id="img" onmouseover="descript(true);" onmouseout="descript(false);" />
        <br/>asdfasd asdf asjkf hla
        <div id="descript" onmouseover="descript(true);" onmouseout="descript(false);">asdf</span>

то надпись тогда загружается и над текстом, а надо только на картинкой

Добавлено через 7 минут и 53 секунды
о кстати нашёл как решить вторую проблему!
узнавать кординаты картинки на странице и исходя из них вырисовывать блок прямо на картинке, зная ширину и высоту изображения!

как такой вариант?

--------------------

MobiAppSystems

EmilRegis

Дата 20.8.2010, 11:32 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 306
Регистрация: 21.9.2007

Репутация: 1
Всего: 4

дак ты не помещай текст под картинкой а помещай его под внешним дивом

Код


<div>
       <img src="http://ipicture.ru/uploads/100819/7q4mmHUPmZ.jpg" alt="" id="img" onmouseover="descript(true);" onmouseout="descript(false);" />
        <div id="descript" onmouseover="descript(true);" onmouseout="descript(false);">Автоновости</span>
</div>
asdfasd asdf asjkf hla

0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| JavaScript: Общие вопросы \| Следующая тема »