Как мне дать .gif высоту и ширину при вставке с onMouseOver

Question

Как мне дать .gif высоту и ширину при вставке с onMouseOver

0

У меня есть веб-страница с jpeg, которая переключается на gifs, когда вы наводите на них курсор. Я делаю это, используя этот код

<img src="images/e911_icon_vi_site_2014_white.jpg" onmouseover="this.src = 'images/e911_icon_vi_site_2014_white.gif'" onmouseout="    this.src = 'images/e911_icon_vi_site_2014_white.jpg'" class="servicesimages">

Я дал ему класс сервисных изображений, поэтому я могу применить этот стиль

.servicesImages{
    height:300px;
    width:412px;

}

Класс работал, когда это был обычный образ. Однако теперь, когда это изображение rollOver, класс не применяется, и изображение по умолчанию имеет нормальный размер, как для gif, так и для jpeg.

Живой пример можно увидеть ЗДЕСЬ

Как я могу это исправить?

onTheInternet 24 март 2014, в 19:57

Источник

0

Я не уверен, что я вполне понимаю, но большое изображение имело опечатку в классе servicesimages изменив его на servicesImages и оно должно работать.
Pedro Estrada 24 март 2014, в 18:54
0

Ух ты. не могу поверить, что я этого не заметил. Спасибо за внимание
onTheInternet 24 март 2014, в 18:55

Теги:

javascript

html

css

2 ответа

0

Вы можете установить высоту и ширину в обработчике onmouseover следующим образом:

onmouseover="this.src = 'images/e911_icon_vi_site_2014_white.gif'; this.style.height = '50px';"

Однако вы можете изменить свой подход к использованию CSS. Затем вы можете использовать класс: hover вместо того, чтобы возиться с обработчиками мыши. пример.

#Service1 {
    height: 300px;
    width: 300px;
    background: url('http://upload.wikimedia.org/wikipedia/commons/9/9a/Avenger__Westphalian_horse.jpg');
    background-size: 300px 300px;
}

#Service1:hover {
    height: 300px;
    width: 300px;
    background: url('http://www.canadianpetconnection.com/wp-content/uploads/2014/02/horse-OSPCA.jpg');
    background-size: 300px 300px;
}

Jon B 24 март 2014, в 16:33

0

В вашем примере вы можете удалить height , width и background-size из селектора hover . Это сохраняет свойство элемента. Кстати, background является псевдонимом многих background свойств. В этом случае просто используйте background-image .
aloisdg 24 март 2014, в 19:19

Ещё вопросы

Я не уверен, что я вполне понимаю, но большое изображение имело опечатку в классе servicesimages изменив его на servicesImages и оно должно работать.
Ух ты. не могу поверить, что я этого не заметил. Спасибо за внимание
В вашем примере вы можете удалить height , width и background-size из селектора hover . Это сохраняет свойство элемента. Кстати, background является псевдонимом многих background свойств. В этом случае просто используйте background-image .

aloisdg · Accepted Answer · 2014-03-24T16-25-00.000Z

На самом деле для этого вам не нужен JavaScript. Вы можете использовать только чистый CSS.

JSFiddle

HTML

<div class="imgif"></div>

CSS

.imgif {
    height: 400px;
    width: 400px;
    background-position: center;
    border-radius:50%;

    background-image: url("http://placekitten.com/400/400");
}

.imgif:hover {
     background-image: url("http://i.imgur.com/YzGK6hf.jpg");    
}