<script type="text/javascript">
$(function() { // wait for page to fully load
// if you want the text to revert on mouse out set this placeholder
var placeholdertext = "Heading Number One";
// create an array of image text
var imagetext = new Array();
// assing text to each array note : 0 = first image
imagetext[0] = "Image One is cool";
// JQuery hover function
$(".imgone").hover(function() {
// hover enter
// replace the heading text
$(".heading").text(imagetext[0]);
}, function() {
// hover exit
// revert the heading text back.
$(".heading").text(placeholdertext);
});
});
</script>
The Important thing is A JQuery hover event is a little different from a CSS
hover event as element properties do not automatically revert to what it
previously was
On Fri, Jun 12, 2009 at 11:27 PM, aw <alokw...@gmail.com> wrote:
>
> Hey there, I'm redesigning my website at the moment and am looking to
> do things a little more efficiently this time around.
> Currently, I have something that looks like this like this:
>
>
> HEADING NUMBER ONE
> image one
> image two
> image three
>
> HEADING NUMBER TWO
> image four
> image five
> image six
>
>
> When someone hovers over image one, the actual text of "HEADING NUMBER
> ONE" changes to "IMAGE ONE IS COOL," and reverts when their cursor
> passes out of the image.
> When someone hovers over image five, the actual text of "HEADING
> NUMBER TWO" changes to "IMAGE FIVE IS THE COOLEST," and reverts when
> their cursor passes out of the image.
>
> The "images" in question will actually be used to manipulate a
> Galleriffic 1.0 slideshow, built on jQuery, so I'd love to find a
> nice, efficient way to do this, also using jQuery.
>
> Any thoughts?
> Thanks!
>
>
