CODEWITHSUNDEEP
jqueryasp.netimagebutton
ISFO
ISFO

Reputation: 135

Image Button with Java Script

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/

Upvotes: 0

Views: 85

Answers (3)

mega-crazy
mega-crazy

Reputation: 858

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/

Upvotes: 1

Bram Vanroy
Bram Vanroy

Reputation: 28564

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);
    });
});

Upvotes: 1

Samuel Reid
Samuel Reid

Reputation: 1766

Try changing your mouseover function to hover instead.

Upvotes: 0

Related Questions