Use Anchor title instead of image title

0 Views

If I have an image in an anchor, how can I make the title of the anchor appear, and not that of the image element?

I know I could remove the title attribute with javascript, but I’m hoping there is a simpler solution.

Read More

For example

<a title="Anchor Title"><img title="Image Title" /></a>

If you hover over the link, it will display “Image Title”.

What I’ve Tried

With CSS, I thought maybe I could change the z-indexes to push the anchor to the front, or maybe I could display the anchor as a block and give it the width and height of the image. This did not work. See JSFiddle here.

I was hoping to find a solution with CSS or maybe HTML.

The reason I want to do this is is that I’m working with WordPress, spitting out posts and thumbnails. I want the thumbnails to link to a certain page, and I want to have a universal title for the link, but it is taking the title from the individual thumbnails. Here’s the WordPress/PHP code: 

<a href="<?php the_permalink(); ?>" title="Click to see Featured Stories">
<?php the_post_thumbnail(); ?>
</a>
Post Views: 0

Related posts

Leave a Reply

5 comments

  2. This offers a general solution, disregarding WordPress. CSS prevents the title to show up.

    HTML:

    <a title="Anchor Title">
    <img title="Image Title" src="http://codepen.io/images/logo.png" />
</a>

    With CSS:

    a {
  display: inline-block;
}

img {
  pointer-events: none;
}

    Result

    enter image description here

    See CodePen example

  3. Just put a transparent <span> over the image, with transparent background and desired title attribute.

    Markup

    <a href="#">

    <img title="Image Title" />
    <span title="Div Title"></span>    

</a>​

    CSS

    img { width:50px;height:50px;background:blue; }
a, img { position:absolute; } 
a { z-index:4;display:block;width:50px;height:50px; }
img { z-index:2; }
​span{
    top:0;
    left:0;
    position:absolute;
    width:50px;
    height:50px;    
    display:block;
    z-index:100;
    background-color:transparent;
}​

    I just forked your fiddle, works in Chrome at least.

  5. http://jsfiddle.net/hnmuj/

    CSS:

    #foo {
    position:relative;
    display:block;    
}
#foo span {
    position:absolute;
    width:100%;
    height:100%;
    z-index:1;
    top:0;
    left:0;
    display:block;

    }
    ​

    HTML:

    <a title="Anchor Title" id="foo">
    <span></span>
    <img title="Image Title" />
</a>​