¿Usar javascript para reemplazar imágenes?

Currently on my website I have some javascript which changes [+] to [-] and back again on a drop down menu depending on whether it is open or closed, I would like to have it done with images instead. For example, a small right pointing arrow when menu is closed and a small down pointing arrow when the menu is open. How do I modify the following javascript to accomplish this? Thanks

Ejemplo aquí:jsFiddle

$(".refine_button").click(function(){
        var butt = $(this);
        $(this).next(".refine_block").slideToggle("normal", function(){
                if ($(this).css("display") == "block") {
                    butt.children(".refine_icon").html("[-]");
                } else {
                    butt.children(".refine_icon").html("[+]");
                }
            });
    });

preguntado el 09 de enero de 11 a las 11:01

3 Respuestas

As roman and Sasan said, you can change your image source with JavaScript but you can also do this with CSS classes (perhaps the best way considering it's a drop-down menu and that the image should not be indexed separately from its contiguous button):

$(".refine_button").click(function(){
    var butt = $(this);
    $(this).next(".refine_block").slideToggle("normal", function(){
            if ( $(this).hasClass("opened") ) {
                butt.children(".refine_icon").removeClass("opened");
            } else {
                butt.children(".refine_icon").addClass("opened");
            }
        });
});

And the CSS...

<style type="text/css">
.refine_icon {
     display: inline-block;
     padding-left: 20px;
     background: transparent url(../path/to/your/image) left top no-repeat scroll;
}
.refine_icon.opened {
     background: transparent url(../path/to/your/image2) left center no-repeat scroll;
     /* or if you are using a sprite simply change the position... */
     /* background-position: left bottom; */
}
</style>

Respondido el 09 de enero de 11 a las 15:01

With your help I went with this: jsfiddle.net/LpW37/3 Combining slideToggle and toggleClass. Thanks! - Antonio

$(".refine_button").click(function(){
    var butt = $(this);
    $(this).next(".refine_block").slideToggle("normal", function(){
            if ($(this).css("display") == "block") {
                butt.children(".refine_icon").attr('src', 'url to your image');
            } else {
                butt.children(".refine_icon").attr('src', 'url to your other image');
            }
        });
});

assuming that .refine_icon is an img tag

Respondido el 09 de enero de 11 a las 14:01

Currenty refine_icon is a div... <div class="refine_icon">[+]</div>. Would I change it like this: <img class="refine_icon" src="arrow.gif" alt="arrow" /> - Antonio

yes, or as an alternative <div class="refine_icon"><img ... in combination with children(".refine_icon img") - romano

use following functions:

function modifyState() {
    var el = $("roll1");
    var elIco = $("rollIcon1"); // img tag with id="rollIcon1"

    if (el.style.display == "none") {
        el.style.display = "";
        elIco.src = elIco.src.replace("LArrow", "BArrow");
    } else {
        el.style.display = "none";
        elIco.src = elIco.src.replace("BArrow", "LArrow");
    }
}

function load() {
    $("rollTitle1").onclick = function () { modifyState(); };
}

for following html code:

<html onload="load();">
    <table>
    <tr id="rollTitle1">
        <td><img src="Img/BArrow.png" id="rollIcon1" />Roll Title</td>
    </tr>
    <tr id="roll1">
        <td>Roll Content</td>
    </tr>
    </table>
</html>

Respondido el 09 de enero de 11 a las 14:01

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.