blog not responding to html change img on hover

  • Author
    Posts
  • #1386275

    mscassetta
    Member

    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.

    #1386507

    mscassetta
    Member

    any ideas on this?

    thanks

    #1386508

    andymci
    Member

    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.

    #1386509

    mscassetta
    Member

    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!

    #1386510

    raincoaster
    Member

    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.

    #1386536

    andymci
    Member

    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. :)

The topic ‘blog not responding to html change img on hover’ is closed to new replies.