Show Title from Header-Picture on MouseOver

  • maurizio



    is it possible to show the Title or Alt-Tag or Description of a Picture on MouseOver in the article-picture. I’ld like to show the copyright information of used pictures.



    Title of the image will show upon you hover on image. So you can use it to show copyright info.



    Thats right, but i think i’ve described my problem in a wrong way. I’m talking about the Picture in the header.

    I think in the header.php it is referenced in $header_img the page-source is generated with <div id=”header” style=”background-image:url(<?php echo $header_img; ?>);”>

    The result is <div id=”header” style=”background-image:url(×198.jpg);”>

    I think, this should be <div id=”header” style=”background-image:url(×198.jpg alt=TEXT1″ title=”TEXT2″);”> to display something on MouseOver. I think, TEXT1 should be something like <?php echo $header_alt; ?> and TEXT2 <?php echo $header_title; ?>

    BUT I’M NOT SURE. I don’t have experiences in programming PHP and scripting CSS or HTML.

    Furthermore i’ld like to link the header-background images to a special copyright-page, not to the homepage.



    You’re on the right track. I don’t think there is an easy way to add a title attribute to the header image without hard-coding. Which means you will need to manually make the adjustment everytime a new graphene version is released.

    I keep a log of any changes I make to core files. So, when it’s time to update, I know what I have to go back and change. I don’t reccomend this for the average user… but for the more advanced, this is the workaround I have used.

    Question… are you using only one header image? If you are rotating header images, it’s going to be difficult coding each one to show a different hover text.



    I try to use a unique header for every post. It should have something to do with the posts content.

    I also think it is hard coding. And i think there will be only two lines to include. As i understand, the problem is, that the banner is a background-image and not a normal image with special size. Normal images will show their title, but with background images, this behaviour normaly don’t make sense and isn’t implemented.

    At last there are 3 questions:

    1 – how to get the background-image title

    2 – how to get background-image alt-tag

    3 – how to show the title in MouseOver-Window. That seems to be not a regular option for background-images. As workarround i have the idea to show a normal blank, transparent image in the same area. Then MouseOver will show the tag belonging to it and the background-image.


    Kenneth John Odle


    How are you using a unique header for each post? Is it through the “use featured image as header image” function?


    Kenneth John Odle


    You might want to look at this plugin:

    Not sure if it will work for you, but it’s a start.



    I have a german version. But yes, i use featured picture oder first picture in post as header-image.


    Kenneth John Odle


    Okay, that’s good, because you can easily add a title attribute to a featured image.

    $header_img is a PHP variable. If you look at Graphene’s functions.php file, it’s defined on lines 1862-1866:

    $header_img = get_the_post_thumbnail( $post_id, 'post-thumbnail' );
    $header_img = explode( '" class="', $header_img);
    $header_img = $header_img[0];
    $header_img = explode( 'src="', $header_img);
    $header_img = $header_img[1]; // only the url

    So the question may be how to redefine this function in a child theme to include the title attribute.



    Sounds good – but, as i said, i am not an experienced programmer. My last code is from 1993 – c++, c 😉

Viewing 10 posts - 1 through 10 (of 14 total)

  • 1
  • 2
  • You must be logged in to reply to this topic.
Graphene Themes Forum