如何在悬停时显示图片标题文字？

Question

I'm building a basic Wordpress website. This is the demo page I need help with:

http://irontemplates.com/wp-themes/ironband/photos/

When mouse is hovered over the image, I want it to show the title of the image before it says "View Image."

This is javascript or jQuery I'm assuming? Can anyone give me a sample code of how I would go about this?

Answer 1

The View-Image is a new link to the real image, or the full sized image. Which can have the title of the image Just like this:

<a href="#" title="title to show">
  <img src="source/to/file.ng" alt="photo" />
</a>

This way, you will show the image title in the link..

Answer 2

var title= $("#imageid").attr("title");

Then on hover:

$("#imageid").on("hover",function(){
    alert(title);
});

Try this.

Answer 3

<a href="http://irontemplates.com/wp-themes/ironband/content/uploads/2013/08/photo_2112.jpg" rel="lightbox" class="lightbox hoverZoomLink">
    <img src="http://irontemplates.com/wp-themes/ironband/content/uploads/2013/08/photo_2112-300x230.jpg" width="352" height="347" alt="">
        <span class="hover-text"><span>VIEW IMAGE</span></span>
    </a>

This is found inside a list element that exists within an unsorted list that holds all of the images for that page.

You need to change what is between the innermost span tags. In this case, it says "VIEW IMAGE", change it to "Image 1" or whatever you want.

You can use Javascript to dynamically name them for you, but that wasn't exactly your question!

Answer 4

You can do that with JS:

var ls_input_section_header = document.createElement("img");   
ls_input_section_header.title="info to display on hover of info";
ls_input_section_header.className="ls_input_section_header_gs";
ls_input_section_header.setAttribute("src","style/img/info.gif");
ls_input_section.appendChild(ls_input_section_header);   

Or you can use CSS only

.ls_input_section_header_gs
{   
 position: absolute;
    top: 15px;    
}
    .ls_input_section_header_gs a:hover:after {
  content: attr(title);
}