Java Script Onmouseover и Onmouseout

[Jerode]

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

Суть задачи следующая, при старте станички на ней в таблице в качестве ссылок на другие страницы отображаются несколько картинок в размере 70% от оригинального, нужно чтобы при наведении на картинку ее размер становился 100% от оригинального, убрал курсор картинка уменьшилась до 70%.
Плавное изменение размера картинки не нужно, просто два положения 70% - onMouseOver 100% - onMouseOut 70%

 

[freesoul]

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

 

[Jerode]

freesoul
а каким при этом будет текст обработчика событий самого javascript?

 

[killer8080]

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)" />

 

[Jerode]

killer8080
спасибо буду пробовать

 

[Jerode]

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

 

[killer8080]

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

что же это за зверь такой диковинный

Видимо я не правильно понял задачу, ну можно так попробоватьКод
<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.className != 'active_pic')
continue;
img.onmouseover = function(){
picResize(this, 0);
}
img.onmouseout = function(){
picResize(this, 1);
}
picResize(img, 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>

 

[Jerode]

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

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

Пытаюсь наковырять скрипт для простотра IPTV, собственно говоря скрипт уже практически готов, осталось дело довести до ума GUI скрипта

 

[killer8080]

Jerode
а там разве есть мышь? И что эти события работают?

 

[Jerode]

там есть пульт который отвечает за навигацию по html страницам интерфейса, весь интерфейс данного агрегата написан на табличной верстке html+php ну и javascript в придачу. В качестве ОС используется урезанный линукс, браузер вроде Фаир Фокс 3

 

[killer8080]

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

 

[Jerode]

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