Help needed for image rollovers: Javascript or CSS Sprites

Community Forums Forums Design Tips and Tricks Help needed for image rollovers: Javascript or CSS Sprites

This topic is: resolved


This topic contains 5 replies, has 3 voices, and was last updated by  wheelerph 1 year, 4 months ago.

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
  • #100701



    I have 3 questions!

    I’m using Minimum Pro and want to create some circles on my home page with images that change on hover and link to other pages on the site, so it will have the look and feel that the Simple Social Icons plugin gives the demo site. I first tried to use the following code to achieve this:

    <a href="&quot;&quot;TARGET&quot;">&lt;img src=&quot;URL OF FIRST IMAGE GOES HERE&quot; 
    onmouseover=&quot;this.src=&#8217;URL OF IMAGE ON HOVER GOES HERE&#8217;&quot;
    onmouseout=&quot;this.src=&#8217;URL OF FIRST IMAGE GOES HERE AGAIN&#8217;&quot; /&gt;</A>

    1) This method works but I get a blue dotted line under the image, so my first question is how can I get rid of this?

    2) In my search for a solution I learnt that maybe I’d be better to use CSS sprites to achieve the same effect. I nearly got this working but it the images animated rather than instantly swapped and I couldn’t get it to look right. As I’m not a coder I found I was in over my head! So my second question is to ask whether in members’ opinion I am better to stick with the Javascript method or to use CSS sprites?

    3) My preferred option would be to use CSS Sprites. But the deadline for finishing the site is looming and I’m under pressure write content. So my third question is to ask whether there’s any developer reading this who I could engage on a paid basis to do it for me, or whether someone could make a recommendation?

    Thanks for reading.

    Blue dotted line:

    This is caused by the border-bottom you assign to all links.

    a {
         border-bottom: 1px dotted #333;
         color: #333;
         font-weight: 400;
         text-decoration: none;

    You could remove this altogether or create a CSS selector for those circle images and remove it from there only.

    .textwidget a {
         border-bottom: 0;

    CSS sprites animated

    You need to remove the transitions applied to all links from your circle image links.

    .textwidget a {
         -moz-transition: none;
         -webkit-transition: none;
         -o-transition: all 0 none;
         transition: none;

    I do custom WordPress work!
    Contact me directly:



    Hi Lauren,
    Thanks so much for answering my post. I’ve noted the CSS Sprites tip for later and and successfully removed the dotted line by adding the code to my custom CSS. All was looking great but then I noticed that when I viewed the site on an iPad and iPhone the circles disappear when touched. I don’t suppose you’d know why this is would you? Also is there any way to show the hover state on a touchscreen momentarily when an image is touched?


    Hey Jon,

    I’m not the best source for these mobile optimizations. You may try starting a new thread and seeing if anyone else can help you with these new questions. :)


    I do custom WordPress work!
    Contact me directly:



    Hi Lauren,
    Ok, I’ll do that. Thanks for your help though



    Hi, I have the same problem as this person at the beginning of the thread, except that the onmouseover code doesn’t work at all on my site. I am using StudioPress eleven40 Pro theme with Genesis 2.0.

    UncleJonny got his to work, mentioned CSS sprites, and I don’t see the solution actually spelled out here. I don’t know what CSS Sprites are.

    Is there some non-HTML code I can be using that should work?

    Many thanks

Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.