CODEWITHSUNDEEP
javascriptjqueryhtml
finners
finners

Reputation: 885

Getting the title of an image and display it as HTML using JQuery

I have a img which is displaying fine, however I now want to hide the image (display: none) and get the value of its title and display that in its parent div instead, using JQuery. I'm sure it's relatively simple, I'm just drawing a massive mind blank at the moment. 

<div class="cardBrand image">
  <img class="card-logo" title="Mastercard" src="/hosted/assets/payment-logo/mastercard-debit.png">
</div>

Upvotes: 1

Views: 379

Answers (4)

HvS
HvS

Reputation: 11

var imgTitle="<span>" + $(".card-logo").attr("title") + "</span>";
$(imgTitle).insertAfter($(".card-logo"));
$(".card-logo").hide();

Upvotes: 0

Arun P Johny
Arun P Johny

Reputation: 388316

You can insert the title after the image like

$('.cardBrand.image img').after(function() {
  return this.title;
}).hide();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="cardBrand image">
  <img class="card-logo" title="Mastercard" src="/hosted/assets/payment-logo/mastercard-debit.png">
</div>

Upvotes: 1

Deval Khandelwal
Deval Khandelwal

Reputation: 3548

You can get the title of the image using $('#img-id').attr('title'); and then use it to set the html using $('#div-id').html($('#img-id').attr('title'));
Note : You can use the class also. But, it will change all the div with the same class. It is recommended that you use an id for the div for these purposes

Upvotes: 0

Dhara Parmar
Dhara Parmar

Reputation: 8101

var image_title=$('.card-logo').attr('title'); // get title of image
$('.card-logo').hide(); // hide image
$('.cardBrand').text(image_title); // set title in parent div

Upvotes: 0

Related Questions