Image Button with Java Script

Question

Ok, i'm trying to create a script.js to make a image button, but the code dont want to run! can you show me what is wrong?

HTML:

    <div class="baixo-tudo">
        <div class="botao">
            <img src="./images/bto-net-out.png" />
            <span class="src1">http://www.midnightbsd.org/art/logo/MidnightBSDLogo32x32.png</span>
            <span class="src2">http://www.parmaja.com/projects/firebirdlogo/logo-32x32.png</span>
        </div>
        <div class="botao">
            <img src="./images/bto-net-out.png" />
            <span class="src1">./images/bto-visual-out.png</span>
            <span class="src2">./images/bto-visual-over.png</span>
        </div>
        <div class="botao">
            <img src="./images/bto-net-out.png" />
            <span class="src1">./images/bto-sql-out.png</span>
            <span class="src2">./images/bto-sql-over.png</span>
        </div>
    </div>

</div>

Script.js:

 $('.baixo-tudo').find('.botao').each(function (i) {

    var imge = $('img');
    var t = $('.botao'),
        src1 = t.find('.src1').text(),
        src2 = t.find('.src2').text();

    imge.mouseover(function () {
        t.attr('src', src1);
    }, function () {
        t.attr('src', src2);
    });
});

look: http://jsfiddle.net/NnUe6/

many neurons firing to create this =/

look now, the imagem disapear: http://jsfiddle.net/NnUe6/4/

Include jQuery, I also added log statements: jsfiddle.net/NnUe6/1 — tymeJV
– tymeJV, Commented Aug 1, 2013 at 19:30
@ISFO There is no server code. Why the question is tagged to ASP.Net? — Win
– Win, Commented Aug 1, 2013 at 19:32

Bram Vanroy · Accepted Answer · 2013-08-01 19:42:27Z

You could try to put it in a document.ready call. And as Samuel Reid pointed out, a hover function is what you need. Like so:

$(document).ready(function () {
    $('.baixo-tudo').find('.botao').each(function (i) {

        var imge = $('img');
        var t = $('.botao'),
            src1 = t.find('.src1').text(),
            src2 = t.find('.src2').text();

        imge.hover(function () {
            t.attr('src', src1);
        }, function () {
            t.attr('src', src2);
        });
    });
});

EDIT, building on your fiddle.

I am guessing this is what you want?

$('.baixo-tudo').find('.botao').each(function (i) {

    var t = $(this),
        imge = t.children("img"),
        src1 = t.children('.src1').text(),
        src2 = t.children('.src2').text();

    imge.mouseover(function () {
        imge.attr('src', src1);
    });

    imge.mouseout(function () {
        imge.attr('src', src2);
    });
});

And even shorter.

$('.baixo-tudo').find('.botao').each(function (i) {

    var t = $(this),
        imge = t.children("img"),
        src1 = t.children('.src1').text(),
        src2 = t.children('.src2').text();

    imge.hover(function () {
        imge.attr('src', src1);
    }, function () {
        imge.attr('src', src2);
    });
});

mega-crazy · Accepted Answer · 2013-08-01 19:47:12Z

1

Here what you need

$('.baixo-tudo').find('.botao').each(function (i) {


    var imge = $(this).find('img');
    var src1 = $(this).find('span.src1').text();

    imge.hover(function(){
        $(this).attr('src',src1);

    });

});

Adjust it to your needs. I have also edited your fiddle. it works as u needed it.

http://jsfiddle.net/NnUe6/7/

answered Aug 1, 2013 at 19:47

mega-crazy

8562 gold badges19 silver badges37 bronze badges

Comments

Samuel Reid · Accepted Answer · 2013-08-01 19:29:59Z

0

Try changing your mouseover function to hover instead.

answered Aug 1, 2013 at 19:29

Samuel Reid

1,7761 gold badge12 silver badges23 bronze badges

Collectives™ on Stack Overflow

Image Button with Java Script

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related