Use el título de anclaje en lugar del título de la imagen

Si tengo una imagen en un ancla, ¿cómo puedo hacer que aparezca el título del ancla y no el del elemento imagen?

Sé que podría eliminar el atributo de título con javascript, pero espero que haya una solución más simple.

Por ejemplo

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

Si pasa el cursor sobre el enlace, se mostrará “Título de la imagen”.

lo que he probado

Con CSS, pensé que tal vez podría cambiar los índices z para empujar el ancla al frente, o tal vez podría mostrar el ancla como un bloque y darle el ancho y alto de la imagen. Esto no funcionó. Ver JSFiddle aquí.

Esperaba encontrar una solución con CSS o quizás HTML.

La razón por la que quiero hacer esto es porque estoy trabajando con WordPress, escupiendo publicaciones y miniaturas. Quiero que las miniaturas se vinculen a una página determinada y quiero tener un título universal para el enlace, pero está tomando el título de las miniaturas individuales. Aquí está el código de WordPress/PHP:

<a href="https://stackoverflow.com/questions/13828571/<?php the_permalink(); ?>" title="Click to see Featured Stories">
<?php the_post_thumbnail(); ?>
</a>

Pase una cadena vacía en el title atributo en el $attr matriz en el miniatura:

<?php the_post_thumbnail('thumbnail', array('title' => '')); ?>

Esto ofrece una solución general, sin tener en cuenta WordPress. CSS evita que aparezca el título.

HTML:

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

Con CSS:

a {
  display: inline-block;
}

img {
  pointer-events: none;
}

Resultado

Ver Ejemplo de CodePen

solo ponle un transparente <span> sobre la imagen, con fondo transparente y el atributo de título deseado.

Margen

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

Yo solo bifurcó tu violínfunciona en Chrome al menos.

Creo que eliminar el atributo de título img es la solución más simple de todas.

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