Рекламный блок.

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

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

<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

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

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

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

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

чудо браузер устройства на которое кишется страница поддерживает неполный 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[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>

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

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

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

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

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

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

Отредактировал killer8080 - 16 Июня, 2011, 10:05

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