onmouseover с привязкой к RoR

У меня есть кнопка, которую я создал как изображение. Эта кнопка имеет мышь, которая переключается на другое изображение. Основной javascript. Мне нужно изображение внутри ссылки Rails. Есть ли способ для меня иметь javascript-событие внутри ссылки rails?onmouseover с привязкой к RoR

Вот что я работаю:

<%= link_to image_tag("../assets/images/buttonBig.png", :border=>0), :action => 
'signup', :controller => 'prelogin' %>

Вот что я хочу:

<%= link_to image_tag("../assets/images/buttonBig.png" 
onmouseover="src='../assets/images/buttonBigHover.png'" 
onmouseout="src='../assets/images/buttonBig.png'", :border=>0), :action => 
'signup', :controller => 'prelogin' %>

источник

2012-06-17 ryanSrich

Почему вы хотите сделать это таким образом? Для начала я бы использовал CSS для этого, гораздо более простой и надежный. И если не CSS, смешение бит JS внутри HTML может стать болезненным. –

Я не предпочитаю один путь над другим. Я новичок в рельсах и не знаю, как правильно это сделать. Я не использую CSS из-за проблем с градиентом в IE. – ryanSrich

CSS и JS одинаково восприимчивы к проблемам с градиентом в IE. Вы можете избежать любых возможных проблем, используя gif, если необходимо –

Хорошо хорошо это лучше всего решается не с помощью Rails. Вы должны оставаться строго CSS здесь iwth что-то вроде этого:

<%= link_to image_tag("../assets/images/buttonBig.png"), :action => 'signup', :controller => 'prelogin', :class => "button-class" %>

Написать остальное в CSS:

.button-class { 
    border: 0; 
    background: url('../assets/images/button.png') no-repeat 0 0px; 
} 
.button-class:hover { 
    background: url('../assets/images/button.png') no-repeat 0 20px; 
}

Теперь обратите внимание, как я использую тот же образ для вашей кнопки здесь. Причина в том, что вашему браузеру приходится загружать только одно изображение. А разница в состояниях - разница в фоновой позиции этого изображения. Таким образом, вы бы нарезали свою кнопку, чтобы оба состояния были доступны на одном изображении. Затем измерьте разность пикселей и установите эти координаты после атрибута no-repeat, который я написал выше. В моем примере, я угадываю 20px разность y-координат.

источник

2012-06-17 17:11:55 Trip

С помощью CSS это проще и надежнее, вы должны иметь спрайт вместо 2-х изображений:

1º Вы должны создать спрайт с buttonBig.png и buttonBigHover.png в http://csssprites.com/

2º Теперь вы должны применить класс к вашему ссылка, СТГ, как:

в вашем view.html.erb

<%= link_to image_tag("buttonBig.png", :border=>0), :action => 
'signup', :controller => 'prelogin', :class => "button" %>

3о http://csssprites.com/ будет генерировать значения для background-position собственности: вы должны скопировать эти значения для CSS СТГ, как:

В файле prelogin.scss:

a.button { 
     background: url("buttonBig.png") no-repeat scroll 0 0 transparent; 
      } 

a.button:hover { 
      background: url("buttonBig.png") no-repeat scroll 0 50px transparent; 
       }

В a.button:hover вы можете наблюдать, что фон-позиция 0 50px , вы должны проверить правильность значения для спрайта.

С уважением!

источник

2012-06-17 17:12:15 hyperrjas

onmouseover с привязкой к RoR

ответ

Смежные вопросы