How to do a rollover on header image in twenty ten

Here’s some simple jQuery code code to get you started

this goes in header.php

next line BEFORE existing wp_head(); line
wp_enqueue_script('jquery');

existing line >> wp_head();

next goes after wp_head()

?>
<script type="text/javascript">
jQuery(document).ready(function($) {
  	var img = $('#branding img').attr('src');
	var rollover = '<?php bloginfo('template_directory'); ?>/images/headers/berries.jpg';
		$('#branding img').hover(
		   function () {
	   	   	$(this).attr('src', rollover);
		   },
		   function () {
	   	   	$(this).attr('src', img);
		   }
		);
});
</script>

(next is the existing </head> in the 20 10 theme)
</head>

What this does:
I picked one of the 20 10 alternate headers as a demo and display it when the main 20 10 header image is hovered over. As the mouse moves off the image the regular background header is redisplayed.

Take this principle and modify it as needed.
Within the jQuery hover() code, the first section is what happens when the existing image is hovered over, the second section is what happens when that hover ends. I am switching the image that the IMG tag displays based on whether the image is being hovered by the mouse.

Thank you SO much stvwlf!! I am so grateful! After all that searching to actually find out how to do it is so wonderful.

You are very generous.

Hi

Well thank you, I’m glad it was what you are looking for. It was a simple snippet of code to put together and I could tell from what you wrote that you really wanted something that would do it.

That could also be modified pretty simply to pop up a yes no dialog box as you mentioned, to find out if they want to go further.

glad to help

stvwlf,

Can I please impose on you just once more in relation to this?

I was thinking that once I had the code to do the rollover I would be able to use an image map so that I could have two separate rollovers on the image and therefore two separate dialog boxes. My assumption was that once I knew where to put the onmouseover code I would also know where to put the image map code.

However your solution wasn’t along the lines of what I had anticipated. Is it possible to use an image map along with the solution you gave me?

Thank you!

yes you can use image maps

it would take a reworking of the jQuery code though because it was based on both the image and the rollover being the same image size

if I have time later I will see what I can come up with. I don’t use image maps any more. I tend to use empty A or DIV tags set to the size needed and use background images behind them. Same result, different approach.

Hi

Here is some partially worked out code. I didn’t know if you wanted this approach so stopped where it is now. It isn’t working in IE, is working fine in Firefox

It inserts two div’s on top of the 20-10 header image, each 50% of the width. When either half is hovered over, a background image is set for that div which displays and replaces half of the underlying header image. Text, questions, etc could also be displayed while hovering. When the mouse moves away the background image is removed, again displaying the underlying header image.

Hope this is helpful.

[Code moderated as per the Forum Rules. Please use the pastebin]

Wow, you have done a lot of work on this. From your description this is exactly what I want.

While I can see the code in my email, when I go into pastebin I can’t find it.

Re the code which I presume is showing up ok in my email: where do I put it in the twentyten theme please so that I can try it out?

Hi stvwlf:

i am using theme Tweny Ten, and want to use jquery Transitions in the header according to the size of the image located in the header.I am new comer to JavaScript and Css plz tell me complete steps. i will be thankfull