Смена картинки при наведении

@Avgust · Регистрация: 03.11.2014

Author24 — интернет-сервис помощи студентам

Всем доброго времени суток) В общем у меня вопрос касательно смены картинки при наведении. Получается изменить картинку, не получается изменить ее размер. Кидаю код:

HTML5

1
2
3

<img src="images//es1.png" class="for_all"
    onmouseover="this.src='images//es2.jpg'; this.width=200;this.height=110";
    onmouseout="this.src='images//es1.png';";/>

CSS

img.for_all {
    margin: 10px 3px 0 3px;
    float: left;
    width: 85px;
    height: 53px;
}

Подозреваю, что это возможно из-за класса. Но у меня просто больше 100 картинок, и для каждой писать ширину и высоту как-то не очень. Нельзя например сделать отдельно также класс на картинки onmousevor. Пробовал так:onmouseover="this.src='images//es2.jpg'; this.class='for_all2'"; - не работает. Подскажите пожалуйста)

@Shakalaka · 17.10.2015, 10:16

Зачем лепить JS там, где можно обойтись CSS?

CSS

.for_all {
    margin: 10px 3px 0 3px;
    float: left;
    width: 85px;
    height: 53px;
    background-image:url("https://www.petfinder.com/wp-content/uploads/2012/11/140272627-grooming-needs-senior-cat-632x475.jpg");
    background-size:100% 100%;
}
.for_all:hover{
    background-image:url("http://www.wired.com/wp-content/uploads/2014/10/cat-ft.jpg");
    width: 200px;
    height: 200px;
}

HTML5

1	<div class="for_all" ></div>

jsfiddle
А если через JS, то
this.style.width="200px"; this.style.height="110px"; this.className = "for_all2";

@Avgust · 17.10.2015, 13:24 **[ТС]**

Проблема в том, что у меня больше 100 картинок. И получается нужно создать 100 блоков, 100 разных классов и для них 100hover) Каждое изображение меняется на другое. es1 -> es2; rs1 ->rs2 и т.д. Я могу конечно написать 100 классов и hover для них, а могу использовать и this.style.width="200px" ( кстати вот с этим получилось, спасибо)). Подскажите пожалуйста, как будет для сайта лучше и чтобы он быстрее загружался. Сделать все через классы или onmouseover?

@xDanbo · 17.10.2015, 13:32

Можно не писать 100 разных классов, а написать всего один цикл в SASS http://sass-lang.com/documenta... RENCE.html

@Shakalaka · 17.10.2015, 14:41

Сообщение от Avgust

Проблема в том, что у меня больше 100 картинок. И получается нужно создать 100 блоков, 100 разных классов и для них 100hover) Каждое изображение меняется на другое. es1 -> es2; rs1 ->rs2 и т.д.

Если у вас имя картинок меняется с что-то там1 на что-то там2 и у всех картинок класс .for_all, а при наведении они увеличиваются до 200 на 110, то имеет смысл использовать JS

HTML5

1	<img src='img1.jpg' class="for_all" >

Javascript

var imgs = document.querySelectorAll(".for_all");
for(var i = 0, l = imgs.length; i < l; i++){
    imgs[i].onmouseover = incrImg;
    imgs[i].onmouseleave = decrImg;
}
function incrImg(){
    var names = this.getAttribute("src").split(".");
    name = names[0];
    name = name.replace("1", "2");
    this.setAttribute("src", name + "." + names[1]);
    this.style.width = "200px";
    this.style.height = "100px";
}
function decrImg(){
    var names = this.getAttribute("src").split(".");
    name = names[0];
    name = name.replace("2", "1");
    this.setAttribute("src", name + "." + names[1]);
    this.style.width = "";
    this.style.height = "";
}

P.S.
Если все-таки нужны разные размеры для разных картинок, тогда не парьтесь и пишите для каждой свой класс и в нем задавайте размеры, БГ и что вам там еще надо

@Avgust 3 / 3 / 3 Регистрация: 03.11.2014 Сообщений: 80
	17.10.2015, 13:24 [ТС]	3
	Проблема в том, что у меня больше 100 картинок. И получается нужно создать 100 блоков, 100 разных классов и для них 100hover) Каждое изображение меняется на другое. es1 -> es2; rs1 ->rs2 и т.д. Я могу конечно написать 100 классов и hover для них, а могу использовать и this.style.width="200px" ( кстати вот с этим получилось, спасибо)). Подскажите пожалуйста, как будет для сайта лучше и чтобы он быстрее загружался. Сделать все через классы или onmouseover? 0

@xDanbo 15 / 15 / 7 Регистрация: 12.04.2014 Сообщений: 101
	17.10.2015, 13:32	4
	Можно не писать 100 разных классов, а написать всего один цикл в SASS http://sass-lang.com/documenta... RENCE.html 0

	17.10.2015, 14:41

Опции темы

Смена картинки при наведении

Решение