2013-02-26 2 views
0

Мне нужна помощь. У меня возникла проблема с попыткой вызвать изменение backgroundPosition элемента блока, когда одна ссылка из списка - вы догадались - замалчивается. Вот кикер: он должен быть жизнеспособным во внешнем файле .js (встроенный JS выглядит действительно грязным и непрофессиональным imho). Все решения, которые я видел до сих пор, либо слишком просты (решения, основанные только на CSS, не будут работать из-за отдельных элементов) или использовать вещи, которые мне пока не устраивают (это означает отсутствие jQuery, спасибо).Изменить backgroundPosition с событиями onmouseover

То, что я хотел бы что-то вдоль линий Условный еще заявления, которые будут выглядеть/выполнить что-то вроде (если вообще возможно, если нет, то следующий ближайший вещь будет делать.):

var block = document.getElementById('block'); 
if (onmouseover *link1*) { 
    block.style.backgroundPosition='-200px 0px'; 
} else if (onmouseover *link2*) { 
    block.style.backgroundPosition='-400px 0px'; 
} else if (onmouseover *link3*) { 
    block.style.backgroundPosition='0px -200px'; 
} 

Если какие-либо другие разделы кода необходимы, я предоставлю их, если это возможно. Заранее спасибо!

EDIT: Чтобы быть ясным, я не прошу о полной программе JS (я НЕ ТАК, тупой ...), как бы я хотел получить инструкцию if, чтобы признать, что один элемент был усечен -over и изменить другое соответственно, так как все мои попытки до сих пор были выполнены с ошибкой.

+0

Вы должны заставить его работать с CSS. Использование JavaScript просто для стилистических изменений является грязным и непрофессиональным. –

+0

можете ли вы разместить свой код в jsfiddle или jsbin –

+0

@MichaelIrigoyen прав, делать это в javascript может не работать в каком-то браузере. –

ответ

0

Я думаю, что вы делаете что-то довольно просто во что-то слишком сложное.

это то, что вы пытаетесь получить? Нет необходимости в javascript вообще.

Отъезд JSFiddle: http://jsfiddle.net/ionko22/fjTUA/

Basic HTML

<a id="hover-me1">Link 1</a> 
<a id="hover-me2">Link 2</a> 
<a id="hover-me3">Link 3</a> 

<div id="change-my-background"></div> 

и Basic CSS

#hover-me1:hover ~ #change-my-background{ 
    background:#aa3233 url(http://i.imgur.com/DMv02cc.jpg) repeat-x -200px -200px; 
} 

#hover-me2:hover ~ #change-my-background{ 
    background:#aa3233 url(http://i.imgur.com/DMv02cc.jpg) repeat-x -400px -200px; 
} 

#hover-me3:hover ~ #change-my-background{ 
    background:#aa3233 url(http://i.imgur.com/DMv02cc.jpg) repeat-x -600px -200px; 
} 

#change-my-background { 
    width:300px; 
    height:300px; 
} 
+0

На самом деле я понятия не имел, что это возможно даже с помощью CSS. Благодаря! – JGeorge