WordPress.org

Ready to get started?Download WordPress

Forums

Help with jQuery rollover images (7 posts)

  1. SCO7TY
    Member
    Posted 2 years ago #

    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

  2. dougvdotcom
    Member
    Posted 2 years ago #

    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");
    });
    });
  3. dougvdotcom
    Member
    Posted 2 years ago #

    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");
    });
    });
  4. SCO7TY
    Member
    Posted 2 years ago #

    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/

  5. dougvdotcom
    Member
    Posted 2 years ago #

    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.

  6. SCO7TY
    Member
    Posted 2 years ago #

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

  7. SCO7TY
    Member
    Posted 2 years ago #

    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.

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags

No tags yet.