Search code examples
javascriptjqueryhtmlwordpressrollover

Wordpress div with href link and rollover image, link not working


Here is the code. I have written it in one of my Wordpress pages, everything works well. The on mouseover, and onmouseout, but the href link is not working. I don't get it to work. I researched about putting the href outside the div, but it did not worked, and I don't know how to embed javascript in Wordpress just for this buttons to work.

I will appreciate any help, but please if it is in reference with javascript, please be specific, because I am a noob in javascript. I know some css, but for this case, i wrote everything in the same document, so i did not assigned an

<div id="bigbutton1" style="width: 300px; height: 300px; 
 display: block; float: left; margin: 2px;">
  <a  style="overflow: hidden; position: relative; color: black;
   text-align:center;padding-top: 0px;width: 300px; height: 300px; 
   display: block; margin: 0 auto;href="http://www.youtube.com">
   <img src=" firstimage.jpg "onmouseover="this.src='anotherjpg'"
    onmouseout="this.src='firstimage.jpg'"/>
  </a>
</div>

and the link when you can see how is working now is here...link

my problem is in the 4 big buttons area that have roll over, thanks.


Solution

  • You forget to close "" quotes in your style

    <div id="bigbutton1" style="width: 300px; height: 300px; display: block; float: left; margin: 2px;"><a  style="overflow: hidden; position: relative; color: black;text-align:center;padding-top: 0px;width: 300px; height: 300px; display: block; margin: 0 auto;" href="http://www.youtube.com" target="_blank"><img src=" firstimage.jpg "onmouseover="this.src='anotherjpg'" onmouseout="this.src='firstimage.jpg'"/></a></div>
    

    Demo JsFiddle