Перейти к содержимому


Конкурс "Лучший отзовик"
× Быстрый вопрос
Пользователь месяца
ShowPrint ShowPrint 1-й за Март
Очков активности: 1 152 1 тема, 61 сообщение, 12 баллов репутации
Сайт: ShowPrint.ru
ТОП самых активных за этот месяц
  • Фотография Андрей WPMasterKZ
    #1

    Андрей WPMasterKZ (wpmaster.kz)
    Очков активности: 525 Вне конкурса за определение пользователя месяца

  • Фотография OlgaGetman
    #2

    OlgaGetman
    Очков активности: 351 Вне конкурса за определение пользователя месяца

  • Фотография Vmir
    #3

    Vmir
    Очков активности: 346.5 3 темы, 24 сообщения, 7 баллов репутации

  • Фотография ShowPrint
    #4

    ShowPrint (ShowPrint.ru)
    Очков активности: 204 Вне конкурса за определение пользователя месяца

  • Фотография Mandarin
    #5

    Mandarin
    Очков активности: 76.5 2 темы, 11 сообщений, 3 балла репутации

  • Фотография maxnik
    #6

    maxnik (konovalovpavel.ru)
    Очков активности: 63 1 тема, 18 сообщений, 2 балла репутации

  • Фотография re-search
    #7

    re-search
    Очков активности: 49.5 7 тем, 12 сообщений, 1 балл репутации

  • Фотография Strazh
    #8

    Strazh
    Очков активности: 37.5 1 тема, 22 сообщения, 1 балл репутации

  • Фотография pozitron123
    #9

    pozitron123
    Очков активности: 36 2 темы, 6 сообщений, 2 балла репутации

  • Фотография Constantine
    #10

    Constantine
    Очков активности: 33 3 темы, 13 сообщений, 1 балл репутации

  • Показать весь ТОП 10
Поддержите форум! =)
Апдейты
  • Яндекс ИКС: 27.03.2019
  • Яндекс выдача: 18.04.2019
Топ 5 участников по репутации


Увеличение изображения

#1 aspide

aspide
  • Неактивные
  • 185 сообщений
  • Репутация: 1
0

Отправлено 18 Февраль 2010 - 21:21

Какой функцией в JavaScript можно изменить размер изображения? (задумка: чтобы изображение увеличивалось при наведении курсора мыши)

 

 

  • 0

#2 ZiTosS

ZiTosS
  • Неактивные
  • 5 148 сообщений
  • Репутация: 8

Отправлено 18 Февраль 2010 - 22:25

AndruxA123,
1) Можете просто задать картинке размер в процентах или же в пикселях, но не 100% исходной картинки:
<img src="image.jpg" width="500" />

А затем на события onMouseOver и onMouseOut поставить собственные обработчики увеличения размеров картинки.
Писать программу нету времени.
Почитайте как ставить обработчики на элементы.
  • 0

#3 eyexal

eyexal
  • Неактивные
  • 29 сообщений
  • Репутация: 0

Отправлено 20 Февраль 2010 - 15:10

Менять размер изображения можно и с CSS !
вопрос в том что надо менять картинку на большую или растягивать маленькую ??
если растягивать маленькую то это плохая идея.
вот пример на CSS:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xml:lang="en" lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
.img {width:55px; height:55px; float:left;margin:0 10px 0 0;}
.img img {width:55px; height:55px; border:2px solid silver;}
.img img:hover{position:absolute; width:110px; height:110px; 4px solid silver}
</style>
</head>
<body>
<div style="width:300px; border:2px solid silver; padding:10px;">
<div class="img"><img src="http://cs-strikez.narod.ru/avatar/Cs7.gif" alt=""/></div>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
</body>
</html>


JS
тут используем DOM!
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xml:lang="en" lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
.img {width:55px; height:55px; float:left; margin:0 10px 0 0;}
.img img {position:absolute;width:55px; height:55px; border:2px solid silver;}
</style>
<script type="text/javascript">
function large(id){
document.getElementById(id).style.width='110px';
document.getElementById(id).style.height='110px';
}
function small(id){
document.getElementById(id).style.width='55px';
document.getElementById(id).style.height='55px';
}
</script>
</head>
<body>
<div style="width:300px; border:2px solid silver; padding:10px;">
<div class="img"><img id="image" src="http://cs-strikez.narod.ru/avatar/Cs7.gif" alt="" onMouseOver="large(this.id);" onMouseOut="small(this.id);" /></div>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
</body>
</html>

  • 0

#4 ZiTosS

ZiTosS
  • Неактивные
  • 5 148 сообщений
  • Репутация: 8

Отправлено 22 Февраль 2010 - 19:40

eyexal, пример на CSS не будет работать в IE, он не применяет hover и другие кроме как к ссылкам ( a )

Второй вариант хоть и катит, но он без визуализации, чисто при наведении картинка разом увеличивает размер. Хотя ТС может это и нужно было.
И я бы переписал так:
function large(elem){
		elem.style.width='110px';
		elem.style.height='110px';
	}
	function small(elem){
		elem.style.width='55px';
		elem.style.height='55px';
	}
А передавал бы не this.id, а this
  • 0

#5 eyexal

eyexal
  • Неактивные
  • 29 сообщений
  • Репутация: 0

Отправлено 24 Февраль 2010 - 22:08

про IE это правда ) но если указать доктайп то в IE7,8 работать будет, жаль в IE6 не понимает (\
НО существую "костыли" !
<script src="http://ie7-js.googlecode.com/svn/version/2.1(beta2)/IE9.js"></script>

добавляем эту строчку в хидер и известные баги ослика фиксятсо, так же в IE6 Начинает работать ховер !
этот фикс поможет вебмастервам бороться с глючным осликом !
  • 0



Похожие темы

  Название темы Автор Статистика Последнее сообщение

Оформление форума – IPBSkins.ru