Creating Rollover Images Inside WordPress

Creating Rollover Images Inside WordPress

We have created some steps to assist you in creating a rollover image within WordPress:

This is the original image we are going to use below, this image was used courtesy of Komodo Media, Rogie King / CC BY-SA 3.0:

Youtube_s2

Below is the image rollover effect that we are trying to achieve within WordPress (hover over image with mouse cursor to see rollover change):

Step #1: Make sure you have created 2 separate images that are slightly modified to give rollover effect when mouse hovers over Image 1 (see example 1A below, these are two separate images with image 1 opacity changed to 75%).

With this example, we want the YouTube icon to go from a transparent 75% opacity to 100% opacity color as seen in Example 1A below:

Example 1A:

Youtube

Image
1

Youtube_s2

Image 2

You can complete changing opacity by using Adobe Photoshop or Fireworks.

When in your choice of photo editor you first want to bring down the opacity of Image 1 to 75% (so it looks to be a similar opactiy as Image 1).

When in Adobe Photoshop or Fireworks, Go to ‘file’ -> ‘Save as’, then save as Transparent PNG under new name, such as Image 1. Don’t save with original name, as you will just save over your original image, we want 2 separate image names for 2 separate images.

Now, you should have 2 separate images, Image 1 (opacity down to 75%) and Image 2 (at 100% opacity). As seen in Example 1A.

Step #2: You must be using the correct code to insert rollover images within a WordPress post or page.

Below is the code you need to use in order to get the rollover image effect to work within WordPress:

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

Step #3: Remember the images you edited above? The ones you changed the opacity to 75% and leaving the other at 100% opacity? Well, you need to use those images URL links in this code to obtain the rollover effect you are looking for within WordPress.

In the above code you MUST change the following:

      • MAIN TARGET URL PLACED HERE

This is where you want to place the URL that you are trying to direct your visitors to. Example: http://www.yourwordpresswebsitenamehere.com

        • URL OF FIRST IMAGE PLACED HERE (this will be done twice in the code above)

Here is where you want to place your 100% opacity image URL. Example of what link should look like (you would change to your image pathway, this is just example): http://www.yourwordpresswebsitenamehere.com/wp-content/uploads/2013/01/image2.png

          • URL OF SECOND IMAGE PLACE HERE

Here is where you want to place your 75% opacity image URL. Example of what link should look like (you would change to your image pathway, this is just example): http://www.yourwordpresswebsitenamehere.com/wp-content/uploads/2013/01/image1.png

The following two tabs change content below.
Web Designer and Developer here to assist others create the perfect online experience with guidance and innovation.

Latest posts by Chad Meyer (see all)

  • Emmy

    THANK YOU. You have no idea of how long I’ve been searching for the right code x.x

    • http://valentinowebdesign.com Chad Meyer

      You are very welcome! Thanks for stopping by!

  • http://www.resmgt.com Jim

    I am creating a WordPress web site, but it is not up yet. I appreciate your post about creating rollover images. If I could ask 2 questions? I have a map of the U.S. and I would like to create a rollover that when you point to an office location, a regional area shows up on the map as the rollover. Is this possible using and/or modifying your directions? Also, I would like the rollover to have some transparency to see the map below it. Is this also possible?
    Thanx again for your tutorial.

  • http://www.vietnam-kitesurfing.com/ Jeff Newell

    Hey Chad,
    thank for this, it had made life easy for me before i was looking at adobe dreamer and stuff and it looked to complicated. just one thing though once i do the image it works fine then a day later i doesnt roll over anymore any idea why, its so frustrating

    Thanks

  • http://www.crea-tifphotoboots.co.za jono

    Hi there. Thanks so much for the info, however how would i go about adding size an margins to my rollover?

  • http://localboyoutfitters.com Taylor

    Hey Chad, have you had a problem with this working in Safari? Works perfect and Chrome and Firefox but only one of my three rollover images works in Safari? All three setup the same.

  • Sentello

    I’m looking for a roll over aswell. I saved both images in .JPG. Whenever I paste the code I got the FIRST IMAGE, linked to my target URL on my page

    Below this image I got following:
    onmouseover=”this.src=’URL OF SECOND IMAGE PLACED HERE'”
    onmouseout=”this.src=’URL OF FIRST IMAGE PLACED HERE'” />

    What am I doing wrong?

    • http://valentinowebdesign.com Chad Meyer

      Take a look at example giving about making sure to use ‘Text’ and not ‘Visual’ tab. See if helps.

  • http://www.clairethomas.net Claire Thomas

    Chad,

    I’m having trouble with this code and am hoping you can help:
    I’m trying to have before & after image rollovers in my WordPress website. When we apply the code with the relevant image URLs we get this problem:
    The first line of code seems to work – it applies to the target page with the chosen image, however instead of a rollover being applied the 2nd and 3rd lines of code are written underneath the image. No rollover happens and you can click on the image but it just takes you to the target page.
    Am I adding the code wrong? I’m not particularly good with this sort of thing :)

    Hope you can help,
    Claire

    • http://www.clairethomas.net Claire Thomas

      Chad,

      Quick update – we’ve managed to apply both the original and rollover image, however it doesn’t mouse out again when you stop hovering – it just stays as the rollover image. Do you know what we might be doing wrong? We need it to roll back to the original image.

      Thanks,
      Claire

      • http://valentinowebdesign.com Chad Meyer

        Make sure when pasting the code in WordPress ‘Edit Post’ or ‘Edit Page’ section(s) you are in the ‘Text’ NOT ‘Visual’ tab. This will make sure to copy all the essential HTML code whn copied and pasted. Example below:

        Tab Help

        When you don’t use this method it seems to take out the onmouseover=”this.src= part of the code and doesn’t work. Just follow above step-by-step and make sure to use 100% opacity image URL in ‘URL OF FIRST IMAGE PLACED HERE’ and ‘75% opacity image URL’ in ‘URL OF SECOND IMAGE PLACE HERE’. Just like code explains from my post.

        Hope this helps.

      • http://www.clairethomas.net Claire Thomas

        I think we’ve sorted it now Chad – sorry about all the posts!

        Claire

        • http://valentinowebdesign.com Chad Meyer

          Sounds good, what fixed the issue?? Add your solution as it might help others with same problem:) Thanks for stopping by!!

  • http://www.troll4fun.org Jason Onet

    THANK YOU! The instructions were easy to follow and it worked perfectly.

  • http://21b.co.nz Ace

    Cheers man, simple easy and just what I was looking for, quick way to create a button in WordPress this technique be!! :-]

  • http://www.alexzemkus.com Alex Zemkus

    Hi,

    thanks for this info. I was hunting all over the web looking for a solution to get this working. But even then with the code you had above it changed the image once and then stayed there without changing back.

    I then had a look at your code for the youtube video which has no img in front of src as well as the onmouseout/onmouseover reverse and it then worked for me.

  • http://wpvisualslideboxbuilder.com Enmanuel Corvo

    plugin in wordpress to create rollover
    wordpress.org/plugins/wp-visual-slidebox-builder/

    • http://valentinowebdesign.com Chad Meyer

      This might be a good option for some of you out there, thanks for adding link! Here is screen shot from the extending plugin section: https://wordpress.org/plugins/wp-visual-slidebox-builder/screenshots/

      Current status of plugin as of 4/6/2014:

      Requires: 3.4 or higher
      Compatible up to: 3.8.1
      Last Updated: 2014-2-28
      Downloads: 3,179

      5 of 9 support threads in the last two months have been resolved.

      3 people say it works.
      0 people say it’s broken.

  • http://cheyennewilsonphotography.com Cheyenne

    Hi Chad! Thanks for the easy instructions. I worked for me great in my Edit post page- but as soon as I published it and checked out my published page, the rollover is not working and only my second image is displayed. Any idea on what I’m doing wrong?

  • Kerry

    Thanks so much! So simple and worked perfectly.
    You’re awesome :)

  • rubbish

    Hi,
    thanks for the code, helped a lot!
    I had the same problem as the user sentello: got the first image, no rollover effect and the two lines of html-code. Although I had put it in the “text”-tab, not “visual”.

    I sorted it out by putting a semicolon after each of the two link’s quotation marks.
    Just thought I’d spread the wisdom :-)

    Cheers,
    Peter

  • Dave

    Hi Chad,

    I added the code and it works no problem when viewed on a desktop and laptop over Firefox, Safari and Chrome. But when viewed on a tablet the upstate of the button is good, but when you click the button the rollover state disappears with just an empty placeholder. Any ideas as to what’s causing this?

    • http://valentinowebdesign.com Chad Meyer

      This plugin might be help, takes out all the coding that needs to be done. Here is screen shot from the extending plugin section: https://wordpress.org/plugins/wp-visual-slidebox-builder/screenshots/

      Current status of plugin as of 4/6/2014:

      Requires: 3.4 or higher
      Compatible up to: 3.8.1
      Last Updated: 2014-2-28
      Downloads: 3,179

      5 of 9 support threads in the last two months have been resolved.

      3 people say it works.
      0 people say it’s broken.

      It’s a rather new plugin, so use at your own risk.

  • http://theilluminatinetwork.com Steve McManus

    I am working on the text tab on this page http://theilluminatinetwork.com/roll but you can see the results. The first button shows where I changed the code and it removed the rollover effect. The second button shows where I left the code exactly as in your example and simply inserted the urls for the target and the buttons. Can you spot my error? Thanks.