Крымский форум (Crimea-Board) Поиск Участники Помощь Текстовая версия Crimea-Board.Net
Здравствуйте Гость .:: Вход :: Регистрация ::. .:: Выслать повторно письмо для активации  
 
> Рекламный блок.
 
 
 
 
 
> Ваша реклама, здесь
 
 
 

  Start new topic Start Poll 

> Java Script Onmouseover и Onmouseout, нужна помощь
Jerode | Профиль
Дата 9 Июня, 2011, 22:35
Quote Post




Group Icon

Группа: Gold Member
Сообщений: 1140
Регистрация: 16.04.10
Авторитет: 22
Вне форума

Предупреждения:
(0%) -----


Люди добрые помогите чайнику написать простелький Ява-скрипт с использованием событий onMouseOver и onMouseOut.

Суть задачи следующая, при старте станички на ней в таблице в качестве ссылок на другие страницы отображаются несколько картинок в размере 70% от оригинального, нужно чтобы при наведении на картинку ее размер становился 100% от оригинального, убрал курсор картинка уменьшилась до 70%.
Плавное изменение размера картинки не нужно, просто два положения 70% - onMouseOver 100% - onMouseOut 70%
PMEmail Poster
19/1811   
Бобер | Бездомный
Реклама двигатель прогресса       
Quote Post



А кому сча лехко?
Group Icon


















_________________
Желающим разместить рекламу смотреть сюдой
/   
freesoul | Профиль
Дата 9 Июня, 2011, 23:17
Quote Post




Group Icon

Группа: Абориген
Сообщений: 138
Регистрация: 01.05.09
Авторитет: 1
Вне форума

Предупреждения:
(0%) -----


<img src="img.jpg" width="300" height="150" onmouseover="this.width='150';this.height='100';"
onmouseout="this.width='300';this.height='150';" />
Только вот с процентами не складывается

Отредактировал freesoul - 9 Июня, 2011, 23:20
PMEmail Poster
18/333   
Jerode | Профиль
Дата 10 Июня, 2011, 8:12
Quote Post




Group Icon

Группа: Gold Member
Сообщений: 1140
Регистрация: 16.04.10
Авторитет: 22
Вне форума

Предупреждения:
(0%) -----


freesoul
а каким при этом будет текст обработчика событий самого javascript?
PMEmail Poster
10/1811   
killer8080 | Профиль
Дата 10 Июня, 2011, 12:33
Quote Post




Group Icon

Группа: Абориген
Сообщений: 406
Регистрация: 03.03.10
Авторитет: 14
Вне форума

Предупреждения:
(0%) -----


Jerode
вот более универсальный вариант
Код
<script type="text/javascript">
<!--
function picResize(o, increase){
var percent = 70; // десь задаём процент
if(increase){
 var w = Math.floor(o.offsetWidth * 100 / percent);
 o.style.height = Math.floor(w * (o.offsetHeight / o.offsetWidth)) + 'px';
 o.style.width = w + 'px';

}
else{
 o.style.width  = o.style.height = 'auto';
}
}

//-->
</script>
<img src="picture.jpg" alt="" onmouseover="picResize(this, 1)" onmouseout="picResize(this, 0)" />

PMEmail Poster
18/1234   
Jerode | Профиль
Дата 10 Июня, 2011, 13:27
Quote Post




Group Icon

Группа: Gold Member
Сообщений: 1140
Регистрация: 16.04.10
Авторитет: 22
Вне форума

Предупреждения:
(0%) -----


killer8080
спасибо буду пробовать
PMEmail Poster
Jerode | Профиль
Дата 11 Июня, 2011, 20:13
Quote Post




Group Icon

Группа: Gold Member
Сообщений: 1140
Регистрация: 16.04.10
Авторитет: 22
Вне форума

Предупреждения:
(0%) -----


killer8080
Ваш скрипт работает не корректно,
картинка с самого начала отображается в размере 100%, а при наведении мыщи еще увеличивается тем самым искажая растянутое изображение.

Вот надыбал другой ваниант
Код

<script type="text/javascript">
<!--
   function large(elem){
       elem.style.width='220px';
       elem.style.height='220px';
   }
   function small(elem){
       elem.style.width='100px';
       elem.style.height='100px';
   }
//-->
</script>

<td><img src="icon_1.png" alt="" onMouseOver="large(this);" onMouseOut="small(this);" /></td>
<td><img src="icon_2.png" alt="" onMouseOver="large(this);" onMouseOut="small(this);" /></td>
<td><img src="icon_3.png" alt="" onMouseOver="large(this);" onMouseOut="small(this);" /></td>
<td><img src="icon_4.png" alt="" onMouseOver="large(this);" onMouseOut="small(this);" /></td>

но в нем нереализована возможность изменения изображения в процентах, только жесткие размеры в пикселях, а также все картинки при загрузке страницы отображаются в размере 100% (220px) на не в уменьшенном варианте.

Какие будут еще мысли, на CSS это реализуется с пол пинка, но чудо браузер устройства на которое кишется страница поддерживает неполный CSS, в частности отсутствует поддержка свойства :hover
PMEmail Poster
18/1811   
killer8080 | Профиль
Дата 12 Июня, 2011, 16:33
Quote Post




Group Icon

Группа: Абориген
Сообщений: 406
Регистрация: 03.03.10
Авторитет: 14
Вне форума

Предупреждения:
(0%) -----


Цитата(Jerode @ 11 Июня, 2011, 19:13)
чудо браузер устройства на которое кишется страница поддерживает неполный CSS, в частности отсутствует поддержка свойства :hover

что же это за зверь такой диковинный blink.gif
Видимо я не правильно понял задачу, ну можно так попробовать
Код
<script type="text/javascript">
<!--
function picResize(o, reduce){
var percent = 70;
if(reduce){
 var w = Math.floor(o.offsetWidth * percent / 100);
 o.style.height = Math.floor(w * (o.offsetHeight / o.offsetWidth)) + 'px';
 o.style.width = w + 'px';
}
else{
 o.style.width  = o.style.height = 'auto';
}
}

window.onload = function(){
var img = document.getElementsByTagName('img');
for(var i = 0; i < img.length; i++){
 if(img[i].className != 'active_pic')
  continue;
 img[i].onmouseover = function(){
  picResize(this, 0);
 }
 img[i].onmouseout = function(){
  picResize(this, 1);
 }
 picResize(img[i], 1);  
}
}
//-->
</script>

<td><img src="icon_1.png" alt="" class="active_pic" /></td>
<td><img src="icon_2.png" alt="" class="active_pic" /></td>
<td><img src="icon_3.png" alt="" class="active_pic" /></td>
<td><img src="icon_4.png" alt="" class="active_pic" /></td>

PMEmail Poster
18/1234   
Jerode | Профиль
Дата 12 Июня, 2011, 19:48
Quote Post




Group Icon

Группа: Gold Member
Сообщений: 1140
Регистрация: 16.04.10
Авторитет: 22
Вне форума

Предупреждения:
(0%) -----


Цитата(killer8080 @ 12 Июня, 2011, 14:33)
что же это за зверь такой диковинный

Медиаплеер BBK NP-101S v2.

Пытаюсь наковырять скрипт для простотра IPTV, собственно говоря скрипт уже практически готов, осталось дело довести до ума GUI скрипта
PMEmail Poster
1/1811   
killer8080 | Профиль
Дата 13 Июня, 2011, 20:15
Quote Post




Group Icon

Группа: Абориген
Сообщений: 406
Регистрация: 03.03.10
Авторитет: 14
Вне форума

Предупреждения:
(0%) -----


Jerode
а там разве есть мышь? И что эти события работают? blink.gif
PMEmail Poster
1/1234   
Jerode | Профиль
Дата 15 Июня, 2011, 21:46
Quote Post




Group Icon

Группа: Gold Member
Сообщений: 1140
Регистрация: 16.04.10
Авторитет: 22
Вне форума

Предупреждения:
(0%) -----


там есть пульт который отвечает за навигацию по html страницам интерфейса, весь интерфейс данного агрегата написан на табличной верстке html+php ну и javascript в придачу. В качестве ОС используется урезанный линукс, браузер вроде Фаир Фокс 3
PMEmail Poster
9/1811   
killer8080 | Профиль
Дата 16 Июня, 2011, 0:09
Quote Post




Group Icon

Группа: Абориген
Сообщений: 406
Регистрация: 03.03.10
Авторитет: 14
Вне форума

Предупреждения:
(0%) -----


Пульт наверно эмулирует Tab, а не мышь. Странно что срабатывают мышиные события. А сами картинки завёрнуты в ссылки? Если да, то поэтому и не работает :hover для картинок, можно попробовать так
a:focus img, но с процентами всё равно лажа. А со скриптом получилось?

Отредактировал killer8080 - 16 Июня, 2011, 10:05
PMEmail Poster
4/1234   
Jerode | Профиль
Дата 17 Июня, 2011, 13:54
Quote Post




Group Icon

Группа: Gold Member
Сообщений: 1140
Регистрация: 16.04.10
Авторитет: 22
Вне форума

Предупреждения:
(0%) -----


да сами картинци были завернуты в тег ссылки, новую резакцию скрипта пока не пробовал не было времени.
PMEmail Poster
3/1811   

Topic Options Start new topic Start Poll 

 



[ Script Execution time: 0.0845 ]   [ 12 queries used ]   [ GZIP включён ]


Создание и продвижение сайтов в Крыму



Top