Support » How-To and Troubleshooting » Help with jQuery rollover images

Help with jQuery rollover images

  • I’m currently using old style HTML for some rollover images. I was advised to look up jQuery. I have been on quite a lot of sites now with information on jQuery rollover images and most sites show different bits of code but dont really say where it goes. I’m really struggling to understand this so hopefully i can get some help on it off you guys.

    Do i have to add some sort of jQuery file somewhere then the other code somewhere else? I have been creating a page and copying the code into the HTML side.

    My site – http://www.completemuscleandfitness.com

Viewing 6 replies - 1 through 6 (of 6 total)
  • In a standard WordPress install, if your have added wp_head() to your template’s header.php file, jQuery loads automatically. Your site is loading the jQuery library

    In terms of the rollover effect code itself, since you don’t link to where you expect this effect to happen, I can’t answer your implementation problem directly.

    However, most likely your problem is the sample code you are using probably uses the $ designator in its calls. In other words, a rollover effect might look like this:

    $(document).ready( function() {
    $('#myimage').mouseover(function() { $('#myimage').attr("src", "mouseover.jpg"); })
    .mouseout(function() { $('#myimage').attr("src", "original.jpg");

    WordPress runs jQuery in Safe Mode by default. Thus, you just need to replace all the $ with jQuery., like this:

    jQuery.(document).ready( function() {
    jQuery('#myimage').mouseover(function() { jQuery.('#myimage').attr("src", "mouseover.jpg"); })
    .mouseout(function() { jQuery.('#myimage').attr("src", "original.jpg");

    Corrected code (apologies for the wrong initial code)

    jQuery(document).ready( function() {
    jQuery('#myimage').mouseover(function() { jQuery('#myimage').attr("src", "mouseover.jpg"); })
    .mouseout(function() { jQuery('#myimage').attr("src", "original.jpg");

    Thanks for the reply, I havent added anything to the header.php file. What is it i need to add?

    And this is the link to the rollover buttons but none of them are jQuery, infact i have only done one with old HTML code so far – http://completemuscleandfitness.com/index.php/workouts/

    You don’t need to add anything to the header.php file. jQuery is already there.

    As far as your rollovers go, they ain’t broke, so I wouldn’t fix them. But if you insist, the short answer is again, since you do not have a specific implementation that is causing you trouble, I can’t answer your question.

    In other words, try to do it, then point to what you tried to do.

    I am going to exit this thread, however, as I cannot assist you further for free, given where you are.

    Yet again i’ve gotten nowhere. Think i best give up on this….

    I have been trying to create some rollover images using javascript as it seems easier.

    Here is the page with the image on i’m trying to get to rollover – http://completemuscleandfitness.com/index.php/203-2/

    I’ve probably named something wrong somewhere in the code but i cant find what.

    I was hoping someone could tell me what i’ve done wrong?
    Let me know if i need to post the code.

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘Help with jQuery rollover images’ is closed to new replies.