Need help? Check out our Support site, then


blog not responding to html change img on hover

  1. On my "about" page and also in my sidebar I want to add an image of myself and on mouse over it should change to a different image. I am using this code:

    <a href="http://doseofdash.com/about/">
    <img src="http://emdash512.files.wordpress.com/2013/08/bio-pic-circle.png"
    onmouseover="this.src='http://emdash512.files.wordpress.com/2013/08/bio-pic-circle-hover.png'"
    onmouseout="this.src='http://emdash512.files.wordpress.com/2013/08/bio-pic-circle.png'">
    </img>
    </a>

    When I add the html to both the sidebar and the about page, then click update, it changes to this: `<a href="http://doseofdash.com/about/">
    <img src="http://emdash512.files.wordpress.com/2013/08/bio-pic-circle.png">
    </img>
    </a>`

    Why is the hover code not working/why does it keep deleting?

    Thanks

    The blog I need help with is doseofdash.com.

  2. any ideas on this?

    thanks

  3. Hey there,

    It's the Javascript getting stripped out. Do you have Custom CSS enabled on your blog? You can achieve the same effect with CSS instead.

  4. Thanks, andymci.

    I do have custom CSS enabled but am fairly new to it...

    How do I get the same effect by changing the CSS and/or stop the javascript from getting stripped out when I add it to individual posts/pages?

    The more detail you can give would be really helpful!

  5. There is absolutely no way you can add javascript to the blog. You'll simply HAVE to find a CSS way to do it instead.

  6. Little bit of a tutorial here, bear with me... ;)

    What we're going to do:

    We're going to style the link, not the image. We're going to set a background image for the link and then change that background image when someone mouses over the link (anchor tag).

    Here's how:

    1. We're going to create a special CSS class for your about pic. In your Custom CSS, add:

    a.about-pic { }

    2. Next we'll add instructions for that CSS class to follow.

    a.about-pic {
    display: block;
    width: 150px;
    height: 150px;
     }

    Change the "150px" (both of them) to whatever size you want. Keep them the same so the link remains square.

    3. Next is adding the background image. We'll position it in the middle, tell the CSS to not let the image repeat, and make the background image fill the anchor tag.

    a.about-pic {
    display: block;
    width: 150px;
    height: 150px;
    background-image: url("http://emdash512.files.wordpress.com/2013/08/bio-pic-circle.png");
    background-position: center center;
    background-repeat: no-repeat;
    background-size: contain;
    }

    4. Below this big chunk of code, after the second curly bracket }, we're going to add a new chunk of code.

    a.about-pic:hover {}

    This bit of code tells the CSS that, when the anchor tag is moused over, follow the instructions in the curly brackets.

    5. We're going to replace the background image for the moused-over anchor tag.

    a.about-pic:hover {
    background-image: url("http://emdash512.files.wordpress.com/2013/08/bio-pic-circle-hover.png");
    }

    6. Finally, we're going to place the anchor tag itself wherever we want the pic to appear. This can be in a widget or in your page.

    <a href="http://doseofdash.com/about/" class="about-pic"></a>

    Give that a shot and let me know how it works out. :)

Topic Closed

This topic has been closed to new replies.

About this Topic