Options

Failed HTML CODE

MonkeyHipsandRiceMonkeyHipsandRice Registered Users Posts: 30 Big grins
edited September 7, 2013 in SmugMug Customization
Greetings,

I used the following HTML code with my legacy site and I am now trying to use it on while crafting my new site but its not working. Anyone have any ideas as to why its not working?

<a href="TARGET URL GOES HERE"><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>

It worked nice on the legacy for changing between the two photos. You can see it in action here:

http://www.timothyfernandez.com/Weddings/Wedding-Investments/29463553_hFvtXD

Any help would be great or if you have any suggestions for another code to do the same. I liked the simplicity of the html.

Kind Regards,

T.

Comments

  • Options
    thenickdudethenickdude Registered Users Posts: 1,302 Major grins
    edited September 7, 2013
    The issue is that the "onmouseover" and "onmouseout" handlers are JavaScript, and so aren't supported in the new SmugMug. What you'd want to do instead is something like this:
    <a id="my-image-link" href="TARGET_URL"></a>
    

    Then add CSS like this:
    #my-image-link {
      display: block;
      width: 400px; /* Put width of your image here */
      height: 300px; /* And the height... */
      background-image: url(URL OF FIRST IMAGE GOES HERE);
      background-repeat: no-repeat;
    }
    
    #my-image-link:hover {
      background-image: url(URL OF IMAGE ON HOVER GOES HERE);
    }
    
  • Options
    MonkeyHipsandRiceMonkeyHipsandRice Registered Users Posts: 30 Big grins
    edited September 7, 2013
    Lamah wrote: »
    The issue is that the "onmouseover" and "onmouseout" handlers are JavaScript, and so aren't supported in the new SmugMug. What you'd want to do instead is something like this:
    <a id="my-image-link" href="TARGET_URL"></a>
    

    Then add CSS like this:
    #my-image-link {
      display: block;
      width: 400px; /* Put width of your image here */
      height: 300px; /* And the height... */
      background-image: url(URL OF FIRST IMAGE GOES HERE);
      background-repeat: no-repeat;
    }
     
    #my-image-link:hover {
      background-image: url(URL OF IMAGE ON HOVER GOES HERE);
    }
    


    Worked like a charm! Thank you very much sir. I like my fancy smancy menu and I did not want to scrap it. I must say making changes to css and seeing it change is great!

    Thanks Again!!

    kind regards,

    T.
Sign In or Register to comment.