Community Forums › Forums › Archived Forums › Design Tips and Tricks › Help needed for image rollovers: Javascript or CSS Sprites
Tagged: onmouseover
- This topic has 5 replies, 3 voices, and was last updated 9 years, 8 months ago by wheelerph.
-
AuthorPosts
-
April 16, 2014 at 11:15 am #100701unclejonnyMember
Hi
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="""TARGET""><img src="URL OF FIRST IMAGE GOES HERE" onmouseover="this.src='URL OF IMAGE ON HOVER GOES HERE'" onmouseout="this.src='URL OF FIRST IMAGE GOES HERE AGAIN'" /></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.
http://tribbecks.com/ruby/bananaApril 16, 2014 at 11:36 am #100709Lauren @ OnceCoupledMemberBlue 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; }
We create mobile-first, PageSpeed-optimized, pixel-perfect custom themes! https://www.oncecoupled.com
April 17, 2014 at 2:02 am #100913unclejonnyMemberHi 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?
Thanks,
JonApril 17, 2014 at 8:41 am #100957Lauren @ OnceCoupledMemberHey 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. 🙂
Best,
Lauren
We create mobile-first, PageSpeed-optimized, pixel-perfect custom themes! https://www.oncecoupled.com
April 17, 2014 at 8:52 am #100962unclejonnyMemberHi Lauren,
Ok, I'll do that. Thanks for your help though
Cheerio,
JonJuly 22, 2014 at 7:19 am #115355wheelerphMemberHi, 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
-
AuthorPosts
- The forum ‘Design Tips and Tricks’ is closed to new topics and replies.