I have a Rails 4 application with three locales. I currently use image_tag for people to select their preferred languages using flag images.
Here is my Ruby code:
<%= link_to_unless_current image_tag("english.jpg", alt: "#{t :english}"), locale: "en" %>
<%= link_to_unless_current image_tag("french.jpg", alt: "#{t :french}"), locale: "fr" %>
<%= link_to_unless_current image_tag("spanish.jpg", alt: "#{t :spanish}"), locale: "es" %>
This logic is working. The three images are displayed on a single line in a very narrow span2 in my footer line.
However what I want to do is to display a lighter version of each image when someone hovers over images for different locales than the selected one. For example if a person is displaying the English version of the website I would like for the French and Spanish images to show my lighter version of the images on hover. The lighter images are the same dimensions as the original ones.
I attempted to implement a portion of the suggested solution from another Stack Overflow post that unfortunately I cannot find. I will look for it and update my question.
Here is my Ruby code:
<span class="image-english"><%= link_to_unless_current image_tag("english.jpg", alt: "#{t :english}"), locale: "en" %></span>
<span class="image-french"><%= link_to_unless_current image_tag("french.jpg", alt: "#{t :french}"), locale: "fr" %></span>
<span class="image-spanish"><%= link_to_unless_current image_tag("spanish.jpg", alt: "#{t :spanish}"), locale: "es" %></span>
Here is my CSS code:
.image-english {
input[type=image]:hover,
input[type=image]:active,
input[type=image]:focus {
background: image-url("english_hover.jpg");
}
}
.image-french {
input[type=image]:hover,
input[type=image]:active,
input[type=image]:focus {
background: image-url("french_hover.jpg");
}
}
.image-spanish {
input[type=image]:hover,
input[type=image]:active,
input[type=image]:focus {
background: image-url("spanish_hover.jpg");
}
}
Unfortunately this did not work. The original images display but somehow some extra padding was added somewhere. Now the first two images are on one line and the third is on another line.
I do not know where to go from here. I have not found anything about using a hover image related to i18n.
Any help would be appreciated. I will keep searching.
UPDATE 3/30/3014 2:30 pm CDT
My source code without my classes.
<div class="row-fluid">
<img alt="English" src="/assets/english.jpg" />
<a href="/fr/home"><img alt="French" src="/assets/french.jpg" /></a>
<a href="/es/home"><img alt="Spanish" src="/assets/spanish.jpg" /></a>
</div><br>
My source code with my classes.
<div class="row-fluid">
<span class="image-english"><img alt="English" src="/assets/english.jpg" /></span>
<span class="image-french"><a href="/fr/home"><img alt="French" src="/assets/french.jpg" /></a></span>
<span class="image-spanish"><a href="/es/home"><img alt="Spanish" src="/assets/spanish.jpg" /></a></span>
</div><br>
There is no difference in the markup between the two other than the span tags around the link image tags. I decided to comment out the statements for hover and active and try again. I still had extra padding. There are no spaces after the images. I have no other CSS code customizing images in my stylesheet. I have the same results in Safari, Chrome, Firefox and Opera. I even added padding-left: 0px; padding-right: 0px; to my classes but got the same results.
