WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] image mouseover works when editing page, not when published (3 posts)

  1. dora_m
    Member
    Posted 1 year ago #

    Hi, I've got a few icons on my homepage which I would like to have change on mouseover. They all work when I'm looking at the page in editing mode, but when I publish it only one works.

    Here's the site: doramitchell.com

    Here's the code I'm using for the mouseover images:
    <a href="http://www.doramitchell.com/portfolio_tag/creatures" rel="attachment wp-att-273"><img class=" wp-image-273 alignleft" onmouseover="this.src='http://www.doramitchell.com/portfolio/wp-content/uploads/2013/01/oddities1.jpg'" onmouseout="this.src='http://www.doramitchell.com/portfolio/wp-content/uploads/2013/01/oddities2.jpg'" alt="illustrations of creatures" src="http://www.doramitchell.com/portfolio/wp-content/uploads/2013/01/oddities2.jpg" width="175" height="266" /></a>

    That's the image that works on the published page.

    <a href="http://www.doramitchell.com/portfolio_tag/people" rel="attachment wp-att-581"><img class=" wp-image-581 alignright" onmouseover="this.src='http://www.doramitchell.com/portfolio/wp-content/uploads/2013/01/people2_72dpi1.jpg'" onmouseout="this.src='http://www.doramitchell.com/portfolio/wp-content/uploads/2013/01/people1_72dpi1.jpg'" alt="illustrations of people" src="http://www.doramitchell.com/portfolio/wp-content/uploads/2013/01/people1_72dpi1.jpg" width="150" height="280" /></a>

    THat's the code for one of the non-working images. I don't see any differences... Any help would be much appreciated! :)

  2. linux4me2
    Member
    Posted 1 year ago #

    I took a look at your site, and the code I see for the "people" images looks like this:
    <img width="150" height="280" src="http://www.doramitchell.com/portfolio/wp-content/uploads/2013/01/people1_72dpi1.jpg" alt="illustrations of people" onmouseout="this.src='http://www.doramitchell.com/portfolio/wp-content/uploads/2013/01/people1_72dpi1.jpg'" onmouseover="this.src='http://i1.wp.com/www.doramitchell.com/portfolio/wp-content/uploads/2013/01/people1_72dpi1.jpg?resize=150%2C280'" class=" wp-image-581 alignright">
    See how the URL for the onmouseover event is:
    http://i1.wp.com/www.doramitchell.com/portfolio/wp-content/uploads/2013/01/people1_72dpi1.jpg?resize=150%2C280
    If I browse to that URL, it is the same image, so it appears the onmouseover isn't working, when it really is.

    I'm not seeing any javascript errors, so I believe your code is correct except for the onmouseover URL. Since the code I'm seeing is not what you have above, maybe what I'm seeing is a cached version of the page if you have a caching plugin installed and activated?

    Cool images, by the way.

  3. dora_m
    Member
    Posted 1 year ago #

    Thank you!!

    It was the caching, I guess -- I turned off Photon in Jetpack and now it's working. I had noticed that the image URLs were changing to "i1.wp.com" but I didn't realize why that was happening or what it was doing!

    Thanks again for your help :)

Topic Closed

This topic has been closed to new replies.

About this Topic