CODEWITHSUNDEEP
javascriptjquery
Daisy Oopsy
Daisy Oopsy

Reputation: 155

Javascript click function img tag

I have a javascript which displays images from style and css.

<script type="text/javascript">
$(function () {
    $("div[style]").click(function() {
        $("#full-wrap-new").css("background-image", $(this).css("background-image"));
    });
});
</script>

<div id="colors">
<div style="background-image:url(/images/style/whatcan.jpg); width:200px; height:150px; float: left; margin:4px"></div>
<div style="background-image:url(/images/art/art.jpg); width:200px; height:150px; float: left; margin:4px"></div>
<div style="background-image:url(/images/beauty/beauty.jpg); width:200px; height:150px; float: left; margin:4px"></div>
<div style="background-image:url(/images/careers/career.jpg); width:200px; height:150px; float: left; margin:4px"></div>
</div>

I would like to change the script to use img rather than css how do i change this following line of script.

$("#full-wrap-new").css("background-image", $(this).css("background-image"));

This is what i have so far but i have no idea how to change it to img

<script type="text/javascript">
$(function () {
    $("div.ri").click(function() {
        $("#full-wrap-new").css("background-image", $(this).css("background-image"));
    });
});
</script>

<div id="colors">
<div class="ri"><img src="/images/style/whatcan.jpg"/></div>
<div class="ri"><img src="/images/art/art.jpg"/></div>
<div class="ri"><img src="/images/beauty/beauty.jpg"/></div>
<div class="ri"><img src="/images/careers/career.jpg"/></div>
</div>

<div id="full-wrap-new"></div>

Upvotes: 0

Views: 138

Answers (1)

nicosantangelo
nicosantangelo

Reputation: 13726

I think you trying to do this:

$(function () {
    $("div.ri").click(function() {
        $("#full-wrap-new").html($(this).find("img").clone());
    });
});

Try it in this fiddle (change the sources so you can see something)

Upvotes: 1

Related Questions