CODEWITHSUNDEEP
htmlcssruby-on-railshoverruby-on-rails-4
tomburger
tomburger

Reputation: 237

Rails4: How to create Image Links with Hover?

I have a Rails 4.0.1 app that shows a set of image links on the homepage. Rails gets the image names from the Industry model. Each image should show a hover image on mouseover.

I've tried this:

<% @industries.each_with_index do |i,n| %>

    <li class="col-md-2 col-md-offset-1">
         <%= link_to image_tag(i.img_full, alt: i.name, class: 'industry_thumb', mouseover: i.img_full_mo), companies_path(industry: i.name) %>
    </li>
<% end %>

However, this results in this HTML:

<li class="col-md-2">
    <a href="/companies?industry=Personalberatung">
         <img alt="Personalberatung" class="industry_thumb" mouseover="branchen_personalber_mo.png" src="/assets/branchen_personalber.png">
    </a>
</li>

When I was expecting the mouseover: to work like described here: http://apidock.com/rails/ActionView/Helpers/AssetTagHelper/image_tag

I found not too many articles about this issue which is why I'm guessing there's an alternative way using CSS. However, how would I achieve the same effect with CSS if I want to dynamically generate the image links? Unfortunately, moving the default and the hover image into one image and using something like this:

 .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;
 }

isn't possible in this case. Unless there's an automatic way to combine the two images during assets:precompile?

Many thanks for your help!

Upvotes: 1

Views: 1473

Answers (3)

Mahan Lamei
Mahan Lamei

Reputation: 29

You should use something like this to be consistent with the asset pipeline way:

image_tag(class_door(student_class), onMouseover: "this.src='#{image_url("/assets/open_door.png")}';", onMouseout: "this.src='#{image_url("/assets/closed_door.png")}'" )

Upvotes: 0

Mostafa Hussein
Mostafa Hussein

Reputation: 11940

image_tag(class_door(student_class), onMouseover: "this.src='/assets/open_door.png';", onMouseout: "this.src='/assets/closed_door.png'" )

I have the above code is working for me , note that class_door(student_class) is a helper in my application

the mouse over method is onMouseover: not mouseover:

Upvotes: 3

Nitesh
Nitesh

Reputation: 15749

Try this.

.col-md-2 a img:hover{
    /*Your hover values should be here*/
}

Hope this helps.

Upvotes: 0

Related Questions