Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people, just like you, are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
Solved

Adding custom Javascript to WordPress site to control image mouseover

Posted on 2014-04-15
5
703 Views
Last Modified: 2014-04-17
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
Comment
Question by:bbdesign
  • 2
  • 2
5 Comments
 
LVL 17

Accepted Solution

by:
jrm213jrm213 earned 500 total points
ID: 40003944
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
 
LVL 55

Expert Comment

by:Julian Hansen
ID: 40003973
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
 

Author Comment

by:bbdesign
ID: 40004071
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
 

Author Comment

by:bbdesign
ID: 40007216
Thanks! With a little finagling, I was able to get this to work.
0
 
LVL 17

Expert Comment

by:jrm213jrm213
ID: 40007744
Glad to hear it! Thanks for the points.
0

Featured Post

Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
push Book Today button to right 10 34
Index on a Table 6 25
how can i get 4 nd 5 ? 3 31
on window close, not beforeunload 6 15
This article discusses the difference between strict equality operator and equality operator in JavaScript. The Need: Because JavaScript performs an implicit type conversion when performing comparisons, we have to take this into account when wri…
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
The purpose of this video is to demonstrate how to exclude a particular blog category from the main blog page. This is can be used when a category already has its own tab, or you simply want certain types of posts not to show up on the main blog. …
The purpose of this video is to demonstrate how to reset a WordPress password if you are locked out and cannot reset the password. A typical use would be if you cannot access the email to which WordPress would send the password recovery email to…

790 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question