javascript rollover image - (как) можно установить стили CSS для изображения onmouseover? - PullRequest
Новая
       5

javascript rollover image - (как) можно установить стили CSS для изображения onmouseover?

1 голос
/ 23 февраля 2011

новичок здесь, так что, пожалуйста, будьте терпеливы:)

У меня есть изображение (изображение # 1), которое выровнено по крайнему левому краю страницы (все отступы тела и поля установлены в 0), и я добавил некоторыеJavascript ролловера, так что новое изображение (изображение № 2) появляется на его место при наведении курсора.Изображение № 2 больше, чем Изображение № 1.

В данный момент при наведении мыши появляется изображение № 2, но оно не выравнивается по левому краю страницы (поля страницы по умолчанию, кажется, были вновь введены, а правила CSS для тела игнорируются).

Есть ли способ применить ID к изображению № 2, чтобы я мог контролировать стили CSS для него?Или любой другой способ удаления поля, которое появляется при наведении мыши?В основном я хотел бы, чтобы 2 изображения перекрывались в дальнем левом углу.

Помощь очень ценится.Спасибо!

Ответы [ 4 ]

1 голос
/ 23 февраля 2011 
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
</head>

$('img#id').mouseover(function(){
$(this).css("property","value");

});

требуется jQuery ..

/////////////////////////////////////////////// /////////////////////////////////////// 

var elem = document.getElementById("id"); //your img id is passed in here
elem.onmouseover= function(){
this.style.yourPropertiesInCamelCase = "value";
}

/////////////////////////////////////////////// /////////////////////////////////////// П.С .: Вы можете погуглить CamelCase, если не знаете, что это такое ... Будьте осторожны со свойствами CSS в «чистом» Javascript. Возможны несоответствия браузера ... Ваш код может стать не кроссбраузерным ...

0 голосов
/ 23 февраля 2011

Лучше использовать состояние привязки привязки в CSS, чтобы поменять фоновое изображение вместо использования javascript для чего-то такого простого.Также вы должны сделать изображения одним изображением, чтобы вы могли загрузить их за один раз и просто изменить положение фона при наведении ...

http://jsfiddle.net/k36am/

0 голосов
/ 23 февраля 2011

Вы можете использовать с фиксированными размерами и 0-отступами и добавлять изображения внутри него. Это может сработать? Не уверен.

В любом случае, для выполнения пролонгации необходимо изменить атрибут «src» исходного изображения. Остальное должно остаться прежним.

0 голосов
/ 23 февраля 2011

Вы согласились ... 

<script type="text/javascript">
function changeImage() {
   document.getElementById("theImg").src = "other.gif";
}
</script>

<img src="/myImage.gif" id="theImg" onmouseover="changeImage()" />
...