লিঙ্ক_ টু ইমেজ ট্যাগ। কিভাবে একটি ট্যাগ ক্লাস যোগ করতে


90

আমি নীচের মত লিঙ্ক_ টু আইএমজি ট্যাগ ব্যবহার করছি

<%= link_to image_tag("Search.png", :border=>0, :class => 'dock-item'), 
:action => 'search', :controller => 'pages'%><span>Search</span></a>

এইচটিএমএল নিম্নলিখিত ফলাফল যা

<a href="/pages/search"><img alt="Search" border="0" class="dock-item" 
src="/images/Search.png?1264132800" /></a><span>Search</span></a> 

আমি <a>img ট্যাগের পরিবর্তে ক্লাস = "ডক-আইটেম" ট্যাগটিতে যেতে চাই ।

আমি কীভাবে এটি পরিবর্তন করতে পারি?

হালনাগাদ:

<%= link_to image_tag("Search.png", :border=>0), :action => 'search', 
:controller => 'pages', :class => 'dock-item' %>

ফলাফল স্বরূপ

<a href="/pages/search?class=dock-item"><img alt="Search" border="0" 
src="/images/Search.png?1264132800" /></a> 

উত্তর:


137

হাই আপনি এই চেষ্টা করতে পারেন

link_to image_tag("Search.png", border: 0), {action: 'search', controller: 'pages'}, {class: 'dock-item'}

অথবা এমনকি

link_to image_tag("Search.png", border: 0), {action: 'search', controller: 'pages'}, class: 'dock-item'

নোট করুন যে কোঁকড়ানো ধনুর্বন্ধনী এর অবস্থান খুব গুরুত্বপূর্ণ, কারণ আপনি যদি এগুলি মিস করেন তবে রেলগুলি ধরে নেবে যে তারা একটি একক হ্যাশ প্যারামিটার তৈরি করে (এ সম্পর্কে এখানে আরও পড়ুন )

এবং লিঙ্ক_ টু এর জন্য এপিআই অনুসারে :

link_to(name, options = {}, html_options = nil)
  1. প্রথম প্যারামিটারটি হ'ল স্ট্রিংটি দেখানো হবে (বা এটি একটি চিত্র_ট্যাগও হতে পারে)
  2. দ্বিতীয়টি হল লিঙ্কটির ইউআরএলটির প্যারামিটার
  3. শেষ আইটেমটি এইচটিএমএল ট্যাগ, যেমন শ্রেণি, অন্বেষণ ইত্যাদি ঘোষণা করার জন্য alচ্ছিক প্যারামিটার is

আশা করি এটা সাহায্য করবে! =)


বিস্তারিত উত্তর করার জন্য ধন্যবাদ। আমি তোমার উত্তরের গ্রহণ কিন্তু আমাকে জানাতে আপনি যদি জানেন পাশাপাশি .. কিভাবে LINK_TO ট্যাগ দিয়ে এই অর্জন করব <a href="https://stackoverflow.com/pages/search" class="dock-item"><img alt="Search" border="0" src="/images/Search.png?1264132800" /><span>Search</span></a>আমি বন্ধ করার আগে কোনও স্প্যান ট্যাগ জুড়েছেন <a>ট্যাগ
সর্বত্র বিরাজমান

এটি আসলে একই ধারণা, সুতরাং আপনার চিত্র_ট্যাগ এবং স্প্যান দুটি "নাম" প্যারামিটারে চেপে ধরার উপায় খুঁজে বের করতে হবে। আপনি এটি চেষ্টা করতে পারেন, সম্পূর্ণ কোড নয় তবে আমার মনে হয় আপনি নিজেই এটি করতে পারবেন =) = লিঙ্ক_ থেকে "# {চিত্র_ট্যাগ} <span> অনুসন্ধান </ span>", ... আপনি কি দেখতে পাচ্ছেন যে আমি চেষ্টা করছি?
স্টেলেন

আহ এটা পেয়েছি। হ্যাঁ আমি এটি নাম প্যারামিটারে চেপে ধরতে চেয়েছিলাম। তবে # {of সম্পর্কে অবগত ছিল না} রেল সঙ্গে মজা সময়
22:25

এটি অন্যের পক্ষে সহায়ক হতে পারে: আপনি যদি লিঙ্কটির পাঠ্যের পাশে একটি চিত্র যুক্ত করতে চান তবে আপনি কেবল <% = link_to চিত্র_ট্যাগ ('চিত্র_পথ') + "লিঙ্ক পাঠ্য", the_path%>
নিক ফলাফল

28

কেবল যোগ করে আপনি link_toপদ্ধতিটি একটি ব্লকটি পাস করতে পারেন :

<%= link_to href: 'http://www.example.com/' do %>
    <%= image_tag 'happyface.png', width: 136, height: 67, alt: 'a face that is unnervingly happy'%>
<% end %>

ফলাফল স্বরূপ:

<a href="/?href=http%3A%2F%2Fhttp://www.example.com/k%2F">
    <img alt="a face that is unnervingly happy" height="67" src="/assets/happyface.png" width="136">
</a>

ডিজাইনার যখন আমাকে অভিনব সিএসএস 3 রোল-ওভার এফেক্টের সাথে জটিল লিঙ্কগুলি দিয়েছিল তখন এটি লাইফ সেভার ছিল।


লিঙ্কের আগে আসা অতিরিক্ত জিনিসগুলির আমার দরকার নেই। আপনি যদি হেরেফ থেকে মুক্তি পান তবে আপনাকে কেবল ইউআরএল-এ নির্দেশ দেওয়া যেতে পারে।
Jngai1297

এটি আমার পক্ষে সেরা উত্তর ছিল। ধন্যবাদ!
ব্যবহারকারীর নাম এখানে

@ নিউ ইউজারনেম এখানে কোন উদ্বেগ নেই! :)
সূচনাগুলি

17

সেরা হবে:

link_to image_tag("Search.png", :border => 0, :alt => '', :title => ''), pages_search_path, :class => 'dock-item'

এটিই সবচেয়ে পরিষ্কার সমাধান।
রাইডস্পেক

সেরা সমাধান, পরিষ্কার এবং কোনও অপ্রয়োজনীয় লুপ ছাড়াই।
লুকাস


6

সহজ:

<%= link_to image_tag("Search.png", :border=>0), :action => 'search', :controller => 'pages', :class => 'dock-item' %>

লিঙ্ক_-এর প্রথম প্যারামটি লিঙ্কের পাঠ্য / এইচটিএমএল ( কোনও ট্যাগের অভ্যন্তরে)। প্যারামিটারগুলির পরবর্তী সেটটি ইউআরএল বৈশিষ্ট্য এবং লিঙ্কটি তাদেরকে বিশিষ্ট করে।


আমি চেষ্টা করেছিলাম কিন্তু এটি যুক্ত করে এটি স্ট্রিংয়ের প্যারামিটার তৈরি করে। দয়া করে আমার আপডেটটি দেখুন
সার্বজনীন

হ্যাঁ, আমি এমনকি লিখেছি যে দ্বিতীয় পরমটি ইউআরএল, তবে এটি অকারণে মুছে ফেলা হয়েছে: পি
টবি হেড

2

আপনার আপডেট হওয়া প্রশ্নের জবাব দিতে, http://api.rubyonrails.org/classes/ActionView/Helpers/UrlHelper.html অনুসারে ...

অতিরিক্ত আক্ষরিক হ্যাশ যেমন প্রয়োজন হয়, পুরানো আর্গুমেন্ট শৈলী ব্যবহার করার সময় সতর্কতা অবলম্বন করুন:

  link_to "Articles", { :controller => "articles" }, :id => "news", :class => "article"
  # => <a href="/articles" class="article" id="news">Articles</a>

হ্যাশ ছেড়ে দেওয়া ভুল লিঙ্ক দেয়:

  link_to "WRONG!", :controller => "articles", :id => "news", :class => "article"
  # => <a href="/articles/index/news?class=article">WRONG!</a>

2

:action =>, :controller =>আমি প্রায় পুরোটা দেখেছি যা আমার পক্ষে কাজ করে নি।

ঘন্টা খনন ব্যয় করেছে এবং এই পদ্ধতিটি অবশ্যই আমার জন্য একটি লুপে কাজ করেছিল।

<%=link_to( image_tag(participant.user.profile_pic.url(:small)), user_path(participant.user), :class=>"work") %>

চিত্র_ট্যাগ সহ লিংক_ টু ব্যবহার করে রেলগুলিতে রুবি

এছাড়াও, আমি রেল 4 ব্যবহার করছি।


1

আমি এটিও চেষ্টা করে দেখেছি এবং খুব ভালভাবে কাজ করে:

      <%= link_to home_index_path do %>
      <div class='logo-container'>
        <div class='logo'>
          <%= image_tag('bar.ico') %>
        </div>
        <div class='brand' style='font-size: large;'>
          .BAR
        </div>
      </div>
      <% end %>

0

ওহে ছেলেরা লিংক ডাব্লু / ইমেজের একটি ভাল উপায় এবং আপনি সিএসএস বৈশিষ্ট্য উদাহরণস্বরূপ "Alt" বা "শিরোনাম" ইত্যাদি প্রতিস্থাপন করতে চান এমন ক্ষেত্রে অনেকগুলি প্রপস রয়েছে ..... এছাড়াও একটি যৌক্তিক বাধাও (?) সহ

<%= link_to image_tag("#{request.ssl? ? @image_domain_secure : @image_domain}/images/linkImage.png", {:alt=>"Alt title", :title=>"Link title"}) , "http://www.site.com"%>

আশাকরি এটা সাহায্য করবে!


0
<%= link_to root_path do %><%= image_tag("Search.png",:alt=>'Vivek',:title=>'Vivek',:class=>'dock-item')%><%= content_tag(:span, "Search").html_safe%><% end %>

আপনি কি আমাদের উত্তর সম্পর্কে কিছু বিবরণ ব্যাখ্যা করতে পারেন?
নীলেশ

আমার উত্তরগুলি এর মতো আউটপুট প্রদর্শন করবে: <a href="https://stackoverflow.com/pages/search "> <img alt = "অনুসন্ধান" বর্ডার = "0" শ্রেণি = "ডক-আইটেম" src = "/ চিত্র / অনুসন্ধান.png? 1264132800" /> </a> <span> অনুসন্ধান </ span> </a>
বিবেক কাপুর

0

আপনি এটি চেষ্টা করতে পারেন

<li><%= link_to "", application_welcome_path, class: "navbar-brand metas-logo"    %></li>

যেখানে "মেটাস-লোগো" ব্যাকগ্রাউন্ড চিত্র সহ একটি CSS শ্রেণি

আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.