My original intention was to display some text on the image. At the same time, when we click the images, the webpage will be redirected. And I use link_to function with div containing background image. The code is like this:
<%= link_to raw('<div style="background-image:url(<%= image_url '1.jpg'%>);width:340px;"> This is a test</div>'),index_by_dvp_domain_path %>
But the system tells me there is SyntaxError.
You can pass link_to a block that contains the content you want to display. So instead of going with the link_to(display, url, options={}) you get link_to(url, option={}, &block) where you can do.
<%= link_to index_by_dvp_domain_path do %>
<div style="background-image: url(<%= image_url '1.jpg'%>);width:340px;">
This is a test
</div>
<% end %>
After you do this you can treat it like normal html.
As always, I'd recommend trying to move any style out into it's own separate stylesheet.
Best way to do it this is used following
<%= link_to index_by_dvp_domain_path do
content_tag(:div, 'This is a test',:style=>"background-image:url(#{image_url} '1.jpg');width:340px;" )
end
%>
OR
<%= link_to content_tag(:div, 'This is a test',:style=>"background-image:url(#{image_url} '1.jpg');width:340px;" ), index_by_dvp_domain_path %>
Please have a try with
<%= link_to raw('<div style="background-image:url(#{image_url '1.jpg'}%>);width:340px;"> This is a test</div>'),index_by_dvp_domain_path %>
I think using Link_to as below would be much more simpler even when you have a big block including multiple tags:
<%= link_to desired_path do %>
<div class="linkable">
<another div>
... some other tags
</another div>
</div>
<% end %>
and I recommend you to use a different background color for mouse over events because it shows the viewer that it's a link!
In you .css file:
.linkable:hover{
background-color: red;
}
Im so surprised to see that no one came up with the regular way of doing it in Rails.
<%= link_to image_tag("/images/1.jpg",:size => "340X340"),index_by_dvp_domain_path %>
