Go Premium for a chance to win a PS4. Enter to Win

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 742
  • Last Modified:

Adding custom Javascript to WordPress site to control image mouseover

Here is a test page:
http://www.berksfoods.com/test/special-offers

When the page loads, the very first slider image is this one:
http://www.berksfoods.com/test/wp-content/uploads/2014/03/ph_promo001b1.jpg

I did not build this website. But I would like to attach my own Javascript mouseover event to this image. When I right-click on the slider itself, I don't even see "open image in new window", so not sure if the image is accessible to a mouseover event?

Is what I am describing possible? And if so, where in the existing WordPress theme/admin area would I add my Javascript? I know how to do this in a regular HTML/CSS/JS website, but trying to figure out how to do it in WordPress seems to be a whole different thing.

Thank you!
0
bbdesign
Asked:
bbdesign
  • 2
  • 2
1 Solution
 
jrm213jrm213Commented:
Hi,

So that page has a slew of javascript on it already and the way the slider works it doesn't give a very good way to select that image, but this is what I came up with, it appears to work if I run it through the console when viewing the page.

Basically I am adding the hover to the div with a class of ls-slide that contains an image with a src of ph_promo001b1.jpg

jQuery("div.ls-slide:has(img[src*='ph_promo001b1.jpg'])").hover(function(){alert('hello');},function(){alert('goodbye');});

Open in new window


The first function with alert('hello') is the onmouseover, the second function is the onmouse out. You have to supply both functions as parameters to the "hover" function, if you don't want anything to run onmouseout, just leave that function empty, ie

jQuery("div.ls-slide:has(img[src*='ph_promo001b1.jpg'])").hover(function(){alert('hello');},function(){});

Open in new window

0
 
Julian HansenCommented:
The image is inside an <a> element which is why you can't see it in the context menu.

What would like to do with the hover event? Rather than explain how to attach a mouseover event in this case - rather tell us what you want to do when you mouseover the image.
0
 
bbdesignAuthor Commented:
I want to swap out the image on mouseover (hover effect), to a different image.

I also need to know where to put the Javascript. I am a WordPress beginner, so need to know where in the admin interface it is best to do this? I guess I need to do it in such a way that if the Theme is upgraded, etc., the Javascript doesn't go away.

Thanks!
0
 
bbdesignAuthor Commented:
Thanks! With a little finagling, I was able to get this to work.
0
 
jrm213jrm213Commented:
Glad to hear it! Thanks for the points.
0

Featured Post

Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

  • 2
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now