CODEWITHSUNDEEP
javascriptjqueryhtmlcsswordpress
George McKenzie
George McKenzie

Reputation: 115

How to show image title text on hover?

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?

Upvotes: 5

Views: 32654

Answers (4)

Rohit Paul
Rohit Paul

Reputation: 336

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

Then on hover:

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

Try this.

Upvotes: 0

El_boogy
El_boogy

Reputation: 155

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);
}

Upvotes: 0

Afzaal Ahmad Zeeshan
Afzaal Ahmad Zeeshan

Reputation: 15860

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..

Upvotes: 7

muiiu
muiiu

Reputation: 587

<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!

Upvotes: 0

Related Questions