Rollover image effect

First things first, I love the picture of Jennifer!

I think someone is going to provide more precise info, or correct anything I say wrong. With that disclaimer, I think the place you need to look is the page template in the child theme. Page templates, I think, often (or always) are provided with themes, so you will be looking in your child theme for the page template, which I think is a different file from the css files.

Finding the right file/page template can be a little tricky, because templates often have reusable components, for things that go on more than one page. Menus and header images are a perfect example. So, if my understanding is correct, you are looking for the template file with the header image in it. If you can get in there, find the file, you can modify what is there with what you need.

Again, I am not 100% sure, but I think child themes sometimes will not have all the page templates of the parent theme, just the pages that are different. If your child theme works like that, you have to find the menu template in the parent, then make a child page for that template. Usually, the first version of the child page will be a copy of the parent, then you edit from there.

It’s been awhile since I did things with WordPress. I am getting back into it for a client who needs their site done in WordPress, so I am trying to practice the principle of, “the best way to learn is by teaching.” Please accept my apology if my efforts to teach and learn are in any way confusing.

I’ll be watching this thread with you, to find out the answer to your question.

Thanks for asking such a good question, because it definitely focuses on one of WordPress’s basic features: child themes.

For the 2012 theme, the html for the header image is in the following file, lines 48-51
wp-content/themes/twentytwelve/header.php

<?php $header_image = get_header_image();
if ( ! empty( $header_image ) ) : ?>
	<a>"><img src="<?php echo esc_url( $header_image ); ?>" class="header-image" width="<?php echo get_custom_header()->width; ?>" height="<?php echo get_custom_header()->height; ?>" alt="" /></a>
<?php endif; ?>

Glad you liked the painting, and thanks for looking into this with me danallenhouston. I found the file and looked at the code, but am still confused about where I should start editing and inserting the url’s for my header images…if I even have to do that. Unfortunately I’m not that familiar with php yet, so this may be a big challenge for me.

Apparently there may be a way to create the hover effect using css image sprites. I will have to look more into this to make sure, and it won’t help me learn how to edit the wordpress html/php.

It might be a few days or even a couple weeks, but for a project I am on now, I will need to learn how to work with the WP menu enough that I will be able to work with WP menus in the header.php file. At that point, I might be able to help you apply the code change you are looking for.

When I tinkered with WP a few years ago, I remember being frustrated at how difficult simple requirements like this were for me. If nothing else, you are helping me see I am not the only one that finds this stuff tough. I have done a lot of php over the years, but never have cracked the WP way. It always is a battle for me.

I bet someone else will respond that will explain the easy way for this.

@mrling – just to be sure what you want to do – are you trying just have one image in the header that will change to one other image upon mouse-over?

Do you want to use the images that are on your page (currently in the content section) you linked to? Or something else?

Additional info – I just tried this out on a test site and it’s quite straightforward using the code from the page you linked to – once you’ve identified where to put it – – which is pretty much what you asked in the first place :)! If it’s in the header, yes, you should use a copy of the header.php file in your child theme – which you probably already have? Then depending on where you want the images to show up, you can add the code (copied below) and fill in the image links from your media library for the two images you want to use.

<a href="TARGET URL GOES HERE"><img src="URL OF FIRST IMAGE GOES HERE" onmouseover="this.src='URL OF SECOND IMAGE GOES HERE'" onmouseout="this.src='URL OF FIRST IMAGE GOES HERE'" /></a>

@wpyogi, thanks for testing it out. I will try working on it some more tonight. However, as you mentioned, last night while looking through the header.php, lines 48-51, I was having a hard time trying to figure out how to implement the html with the php code that already controls the header. It will probably take me a lot of trial and error, so I’m hoping somebody will be able to share how to implement the roll-over html effect with the header.php.

@wpyogi, the image I want to add the roll-over effect to is the header images that says my name on the top left.

Can you post your header.php file that you have in your child theme? Be sure to use the code buttons when posting code here.

And what is the second image you want to show up there?

@wpyogi, the second image is the same, just using lighter (white) colored letters.

Here is the code for the header.php in twenty-twelve theme:

<?php
/**
 * The Header for our theme.
 *
 * Displays all of the <head> section and everything up till <div id="main">
 *
 * @package WordPress
 * @subpackage Twenty_Twelve
 * @since Twenty Twelve 1.0
 */
?><!DOCTYPE html>
<!--[if IE 7]>
<html class="ie ie7" <?php language_attributes(); ?>>
<![endif]-->
<!--[if IE 8]>
<html class="ie ie8" <?php language_attributes(); ?>>
<![endif]-->
<!--[if !(IE 7) | !(IE 8)  ]><!-->
<html <?php language_attributes(); ?>>
<!--<![endif]-->
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>" />
<meta name="viewport" content="width=device-width" />
<title><?php wp_title( '|', true, 'right' ); ?></title>
<link rel="profile" href="https://gmpg.org/xfn/11" />
<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>" />
<?php // Loads HTML5 JavaScript file to add support for HTML5 elements in older IE versions. ?>
<!--[if lt IE 9]>
<script src="<?php echo get_template_directory_uri(); ?>/js/html5.js" type="text/javascript"></script>
<![endif]-->
<?php wp_head(); ?>
</head>

<body <?php body_class(); ?>>
<div id="page" class="hfeed site">
	<header id="masthead" class="site-header" role="banner">
		<hgroup>
			<h1 class="site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></h1>
			<h2 class="site-description"><?php bloginfo( 'description' ); ?></h2>
		</hgroup>

		<nav id="site-navigation" class="main-navigation" role="navigation">
			<h3 class="menu-toggle"><?php _e( 'Menu', 'twentytwelve' ); ?></h3>
			<a class="assistive-text" href="#content" title="<?php esc_attr_e( 'Skip to content', 'twentytwelve' ); ?>"><?php _e( 'Skip to content', 'twentytwelve' ); ?></a>
			<?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => 'nav-menu' ) ); ?>
		</nav><!-- #site-navigation -->

		<?php $header_image = get_header_image();
		if ( ! empty( $header_image ) ) : ?>
			<a href="<?php echo esc_url( home_url( '/' ) ); ?>"><img src="<?php echo esc_url( $header_image ); ?>" class="header-image" width="<?php echo get_custom_header()->width; ?>" height="<?php echo get_custom_header()->height; ?>" alt="" /></a>
		<?php endif; ?>
	</header><!-- #masthead -->

	<div id="main" class="wrapper">

Okay, save a copy of that file to your local computer and then replace it with this:

<?php
/**
 * The Header for our theme.
 *
 * Displays all of the <head> section and everything up till <div id="main">
 *
 * @package WordPress
 * @subpackage Twenty_Twelve
 * @since Twenty Twelve 1.0
 */
?><!DOCTYPE html>
<!--[if IE 7]>
<html class="ie ie7" <?php language_attributes(); ?>>
<![endif]-->
<!--[if IE 8]>
<html class="ie ie8" <?php language_attributes(); ?>>
<![endif]-->
<!--[if !(IE 7) | !(IE 8)  ]><!-->
<html <?php language_attributes(); ?>>
<!--<![endif]-->
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>" />
<meta name="viewport" content="width=device-width" />
<title><?php wp_title( '|', true, 'right' ); ?></title>
<link rel="profile" href="https://gmpg.org/xfn/11" />
<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>" />
<?php // Loads HTML5 JavaScript file to add support for HTML5 elements in older IE versions. ?>
<!--[if lt IE 9]>
<script src="<?php echo get_template_directory_uri(); ?>/js/html5.js" type="text/javascript"></script>
<![endif]-->
<?php wp_head(); ?>
</head>

<body <?php body_class(); ?>>
<div id="page" class="hfeed site">
	<header id="masthead" class="site-header" role="banner">
		<hgroup>
			<h1 class="site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></h1>
			<h2 class="site-description"><?php bloginfo( 'description' ); ?></h2>
		</hgroup>

		<nav id="site-navigation" class="main-navigation" role="navigation">
			<h3 class="menu-toggle"><?php _e( 'Menu', 'twentytwelve' ); ?></h3>
			<a class="assistive-text" href="#content" title="<?php esc_attr_e( 'Skip to content', 'twentytwelve' ); ?>"><?php _e( 'Skip to content', 'twentytwelve' ); ?></a>
			<?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => 'nav-menu' ) ); ?>
		</nav><!-- #site-navigation -->

<!-- comment out header image section
		<?php $header_image = get_header_image();
		if ( ! empty( $header_image ) ) : ?>
			<a href="<?php echo esc_url( home_url( '/' ) ); ?>"><img src="<?php echo esc_url( $header_image ); ?>" class="header-image" width="<?php echo get_custom_header()->width; ?>" height="<?php echo get_custom_header()->height; ?>" alt="" /></a>
		<?php endif; ?>

end commented out section -->

<!-- start new header image section with rollover -->

<div id="rollover-header">

<a href="TARGET URL GOES HERE"><img src="URL OF FIRST IMAGE GOES HERE" onmouseover="this.src='URL OF SECOND IMAGE GOES HERE'" onmouseout="this.src='URL OF FIRST IMAGE GOES HERE'" /></a>

</div>  <!-- end new header image section with rollover -->

	</header><!-- #masthead -->

	<div id="main" class="wrapper">

You’ll see that you need to add the URL’s for the images you want to use in the new section of code.

Then we may need to add some CSS to positing the images where you want them to show up on the page.

I just want to say thank you to WPyogi for picking up this coding question. The information you are providing is extremely valuable. This is exactly some info I need for my WP road at this time. The code you are putting up is a huge relief to me, because now I can start seeing solutions to a number of WP theme coding requirements I need to address over the next month or so. So again, thank you so much for putting up so much valuable, excellent information.

I know this thread still is open, but I am keeping this as a reference. Thank you again.

LOL – no problem – reading threads on here is always a great source of info to me too :).

Eureka! it worked! Thank you WPyogi!!!! Also thanks for reminding me with your code that one should comment the original code out, I had forgotten that, though I suspect I would have been reminded the hard way later on. Check out my site with the new mouse-over feature on the header!
Resolved!

One final detail I was wondering, is I decided to copy all the header.php code into my child-theme. Is this a sloppy practice? Would it be best to just add the commented out and new code?