WordPress.org

Ready to get started?Download WordPress

Forums

Chage Theme image on mouse over (3 posts)

  1. lahoti
    Member
    Posted 5 years ago #

    I want to change the header image onmouseover -
    Is some javascript method possible

    Presently have used this method to make it a link
    ----------header.php-------------
    <div id="header">
    <div class="headerimg_1" onclick="location.href='http://abc';" style="cursor: pointer; ">
    </div>
    <div class="headerimg_2" onclick="location.href='http://xyz';" style="cursor: pointer; ">
    </div>
    </div>
    ------following in css----------
    .headerimg_1{
    height: 300px;
    width: 314px;
    background: url(images/1.gif);
    }

    #headerimg_2 {
    height: 300px;
    width: 222px;
    background: url(images/2.gif);
    }
    ---------------<<>>-----------
    Also an unrelated doubt-
    if I do not give header image in css and inside the tag give <img...> - It won't work. Why is it so?

    TIA

  2. lahoti
    Member
    Posted 5 years ago #

    it was <a...> <img...> </a>

  3. lahoti
    Member
    Posted 5 years ago #

    Did it like this but still a issue
    (here i am using a:hover property to change the header image but when
    it is over link1 i want different image and diff for link2 - which am not able to achieve with this method... I can possibly achieve by cutting my header into 2 parts but if it can be done using only single header image will prefer that)
    changed css -----
    #header {
    background-color: #73a0c5;
    margin: auto;
    padding: 0;
    height: 300px;
    width: 960px;
    background: url(images/sky.gif)
    }

    #header a:hover{
    background-color: #73a0c5;
    margin: auto;
    padding: 0;
    height: 300px;
    width: 960px;
    background: url(images/3.gif)
    }
    #link1 {
    float: left;
    position:absolute;
    width : 314px;
    height: 300px;
    margin-left: 0px;
    margin-top: 0px;
    }

    #link2 {
    float: left;
    position:absolute;
    width : 222px;
    height: 300px;
    margin-left: 314px;
    margin-top: 0px;
    }

    php....

    <div id="header">
    <a id="link1" href="http://as.com" title="Subscribe with RSS"></a>
    <a id="link2" href="http://as.com" title="Subscribe with RSS"></a>

Topic Closed

This topic has been closed to new replies.

About this Topic