X   Сообщение сайта
(Сообщение закроется через 3 секунды)



 

Здравствуйте, гость (

| Вход | Регистрация )

2 страниц V   1 2 >
Открыть тему
Тема закрыта
> onMouseOver onMouseOut неправильное отображение картинок
neon1rap
neon1rap
Topic Starter сообщение 15.12.2008, 15:28; Ответить: neon1rap
Сообщение #1


Народ собсна вот такая фигня, есть код
<html>
<head>
<title>
Super-World Видео,Фото, Музыка игры и многое другое!
</title>
<link rel="SHORTCUT ICON" href="/images/ikon.ico">
</heaD>
<body vlink="black" alink="black" LINK="black" bgcolor=black>
<a href="page1.html" onMouseOver="document.video.src='/images/videoon.jpg';" onMouseOut="document.video.src='/images/videooff.jpg';"><img src="/images/videooff.jpg" name="video" ></a>
<a href="page2.html" onMouseOver="document.games.src='/images/gameson.jpg';" onMouseOut="document.games.src='/images/gamesoff.jpg';"><img src="/images/gamesoff.jpg" name="games" ></a>
<a href="page2.html" onMouseOver="document.music.src='/images/musicon.jpg';" onMouseOut="document.music.src='/images/musicoff.jpg';"><img src="/images/gamesoff.jpg" name="music" ></a>
<a href="page2.html" onMouseOver="document.foto.src='/images/fotoon.jpg';" onMouseOut="document.foto.src='/images/fotooff.jpg';"><img src="/images/fotooff.jpg" name="foto" ></a>
<a href="page2.html" onMouseOver="document.other.src='/images/otheron.jpg';" onMouseOut="document.other.src='/images/otheroff.jpg';"><img src="/images/otheroff.jpg" name="other" ></a>

</body>
</html>

Он отображает все картинки, но когда навожу курсор на одну , (появляется новая) , но в тоже время все сползают вниз, если я не оч понятно объяснил то зайдите http://www.super-world.ru , сами увидите
0
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Exterior
Exterior
сообщение 15.12.2008, 15:45; Ответить: Exterior
Сообщение #2


Neon1rap, чтобы картинки не сползали, они должны быть одного размера, т.е., например, та, которая меняется - 200х100рх и та, на которую меняется - тоже 200х100рх.
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
neon1rap
neon1rap
Topic Starter сообщение 15.12.2008, 17:02; Ответить: neon1rap
Сообщение #3


А мне надо чтобы когда я наводил на картинку , она становилась больше, а другие оставались прежними (по размеру и не сползали) , может есть какой нить выход?
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Webmaster_hb
Webmaster_hb
сообщение 15.12.2008, 17:06; Ответить: Webmaster_hb
Сообщение #4


Neon1rap, можно нарисовать картинку в теже размеры, но объект в центре сделать больше,
т.е. в изначальном варианте маленькой картинки, она будет таких же размеров что и большая, просто будут больше белых полей по краям
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
pomp
pomp
сообщение 15.12.2008, 17:14; Ответить: pomp
Сообщение #5


Вариант первый:Сделайте valign="top" и оставьте место под большую картинку. Допустим маленькая в вас 100 px по высоте, а большая 200px. Значит общая ячейка должна быть 200px по высоте. Получаеться что вы "резервируйте" место под большую картинку. И маленькие не съезжают

<table height="200px">
<tr valign="top">
<td>тут картинки, основная 100, вторая 200</td>
<td>тут картинки, основная 100, вторая 200</td>
<td>тут картинки, основная 100, вторая 200</td>
<td>тут картинки, основная 100, вторая 200</td>
<td>тут картинки, основная 100, вторая 200</td>
</tr>
</table>


Вариант первый: неудачный вариант в плане юзабилити, но все же. Сделайте картинки одного размера (как большая). И кусок маленькой картинки, залйте фоном. Визуально получиться как будто маленькая картинка меньше большой. :hihi: (извените за тафтологию).
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Langepas_hb
Langepas_hb
сообщение 15.12.2008, 18:43; Ответить: Langepas_hb
Сообщение #6


Вопрос в тему.
Есть код

<div class="photo">
<img src="0001.jpg" id="big_photo">
</div>

<div class="icons">
<img src="0001_.jpg" id="0001"
onmouseover="document.getElementById('0001').style.height='160px';
document.getElementById('0001').style.width='100px'"
onmouseout="document.getElementById('0001').style.height='80px';
document.getElementById('0001').style.width='50px'"
onclick="document.getElementById('big_photo')????">


Вместо ???? нужно написать какой-то код, заменяющий картинку в блоке big_photo на другую, но я не знаю какой.

Кто знает, помогите пжл.
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Exterior
Exterior
сообщение 15.12.2008, 18:58; Ответить: Exterior
Сообщение #7


onclick="document.getElementById('big_photo').src='path/to/image';">


кстати, везде, за исключением onclick, вместо document.getElementById('0001') можно ставить this
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Langepas_hb
Langepas_hb
сообщение 15.12.2008, 19:03; Ответить: Langepas_hb
Сообщение #8


Exterior
Спасибо, разобрался.
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Langepas_hb
Langepas_hb
сообщение 15.12.2008, 19:24; Ответить: Langepas_hb
Сообщение #9


Exterior
последний вопрос.

Ситуация такая. Есть несколько строчек с превьюшками, каждая шириной по 640 пикселей. При наведении на любую из фоток ширина строчки соответственно увеличивается. Как сделать так, чтобы при наведении на любую из картинок лишние картинки, при превышении ширины блока в 640 пикселей сдвигались на следующуу строчку и т.д.
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
kvex
kvex
сообщение 18.12.2008, 12:37; Ответить: kvex
Сообщение #10


Используйте float:left.
И вобще изменение бекграунда ссылок или картинок в ссылках при наведении можно сделать средствами html/css.
html:

<a class="rollover" href="#">
<img src="img/some_image.jpg" alt="image" />
<img class="hover" src="img/some_image.jpg" alt="image" />
</a>

css:

a.rollover{
display:block;
width:100px;
height:100px;
}
a.rollover img.hover{
display:none;
}
a.rollover:hover img{
display:none;
}
a.rollover:hover img.hover{
display:block;
}
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
2 страниц V   1 2 >
Открыть тему
Тема закрыта
1 чел. читают эту тему (гостей: 1, скрытых пользователей: 0)
Пользователей: 0


Свернуть

> Похожие темы

  Тема Ответов Автор Просмотров Последний ответ
Открытая тема (нет новых ответов) Отображение нужного блока при клике.
0 bhtml 1668 10.7.2020, 15:18
автор: -bhtml-
Открытая тема (нет новых ответов) [ИЩУ] Человека для сбора картинок
4 rokot 3243 4.9.2018, 10:05
автор: Том77
Открытая тема (нет новых ответов) Ссылки с эро картинок хочется
2 RMak 4069 4.2.2018, 23:19
автор: Kriya
Открытая тема (нет новых ответов) Поиск картинок и описания
Фотошоп или powerpoint
1 scorper 1901 8.9.2017, 10:46
автор: scorper
Открытая тема (нет новых ответов) Работа по поиску картинок и ссылок
Работа для тех, кто онлайн, "между делом", мониторинг
0 nikolenko2008 1702 28.8.2016, 14:26
автор: nikolenko2008


 



RSS Текстовая версия Сейчас: 20.4.2024, 17:15
Дизайн