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



 

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

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

Открыть тему
Тема закрыта
> Увеличение изображения
aspide
aspide
Topic Starter сообщение 18.2.2010, 22:21; Ответить: aspide
Сообщение #1


Какой функцией в JavaScript можно изменить размер изображения? (задумка: чтобы изображение увеличивалось при наведении курсора мыши)
0
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
ZiTosS
ZiTosS
сообщение 18.2.2010, 23:25; Ответить: ZiTosS
Сообщение #2


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

А затем на события onMouseOver и onMouseOut поставить собственные обработчики увеличения размеров картинки.
Писать программу нету времени.
Почитайте как ставить обработчики на элементы.
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
eyexal
eyexal
сообщение 20.2.2010, 16:10; Ответить: eyexal
Сообщение #3


Менять размер изображения можно и с 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>


Поблагодарили: (1)
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
ZiTosS
ZiTosS
сообщение 22.2.2010, 20:40; Ответить: ZiTosS
Сообщение #4


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
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
eyexal
eyexal
сообщение 24.2.2010, 23:08; Ответить: eyexal
Сообщение #5


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

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

Замечание модератора:
Эта тема была закрыта автоматически ввиду отсутствия активности в ней на протяжении 100+ дней.
Если Вы считаете ее актуальной и хотите оставить сообщение, то воспользуйтесь кнопкой
или обратитесь к любому из модераторов.


Поблагодарили: (1)
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Открыть тему
Тема закрыта
1 чел. читают эту тему (гостей: 1, скрытых пользователей: 0)
Пользователей: 0


Свернуть

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

  Тема Ответов Автор Просмотров Последний ответ
Горячая тема (нет новых ответов) Тема имеет прикрепленные файлыВерстка/Натяжка/Оптимизация/Увеличение функционала шаблонов на WP
Разработка на профессиональном уровне
144 Gerga 91649 11.3.2024, 19:59
автор: anchous
Открытая тема (нет новых ответов) Тема имеет прикрепленные файлыОтдам 2 лендинга: летающие рыбы, увеличение груди
5 kolua 2348 11.2.2020, 19:03
автор: webcreators
Открытая тема (нет новых ответов) Грамотная внутренняя SEO оптимизация, увеличение конверсии продаж
23 Black_Mag 13233 15.9.2019, 16:14
автор: chelsea1994
Открытая тема (нет новых ответов) Увеличение скорости ответа сервера - ускорение сайта
Нужен специалист, который сможет решить эту задачу
6 koroluk1990 4188 1.8.2018, 23:54
автор: VPSadm
Открытая тема (нет новых ответов) Изображения с shutterstock от 15 рублей/штука
5 Mr_Big 3662 10.9.2017, 21:30
автор: Palundra


 



RSS Текстовая версия Сейчас: 28.3.2024, 19:23
Дизайн