CODEWITHSUNDEEP
jqueryasp.netrazorasp.net-mvc-5
nemostyle
nemostyle

Reputation: 814

How to copy one image to another in ASP.NET?

This is picture of my "Avatar" tab on my Registration.cshtml page:

enter image description here

I want to copy selected image from this image slider to this bigger image above slider.

Here is my code in Registration.cshtml:

<div id="copiedimage">
  <img class="default-avatar" src="@Url.Content("~/Content/Images/Account/avatar.png")" alt='default-avatar' />
 </div>
        <div class="slider">
          <img class="avatar selected" src="@Url.Content("~/Content/Images/Account/avatar.png")" alt='avatar' />
          <img class="avatar" src="@Url.Content("~/Content/Images/Account/avatar_dog.png")" alt='dog' />
          <img class="avatar" src="@Url.Content("~/Content/Images/Account/avatar_chihuahua.png")" alt='chihuahua' />
          <img class="avatar" src="@Url.Content("~/Content/Images/Account/avatar_black_cat.png")" alt='black_cat' />
          <img class="avatar" src="@Url.Content("~/Content/Images/Account/avatar_kitten.png")" alt='black_cat' />
          <img class="avatar" src="@Url.Content("~/Content/Images/Account/avatar_mouse.png")" alt='black_cat' />
          <img class="avatar" src="@Url.Content("~/Content/Images/Account/avatar_horse.png")" alt='horse' />
          <img class="avatar" src="@Url.Content("~/Content/Images/Account/avatar_pig.png")" alt='horse' />
          <img class="avatar" src="@Url.Content("~/Content/Images/Account/avatar_blue_bird.png")" alt='blue_bird' />
          <img class="avatar" src="@Url.Content("~/Content/Images/Account/avatar_cow.png")" alt='cow' />
          <img class="avatar" src="@Url.Content("~/Content/Images/Account/avatar_green_fish.png")" alt='green_fish' />
          <img class="avatar" src="@Url.Content("~/Content/Images/Account/avatar_shark.png")" alt='shark' />
          <img class="avatar" src="@Url.Content("~/Content/Images/Account/avatar_crab.png")" alt='crab' />
          <img class="avatar" src="@Url.Content("~/Content/Images/Account/avatar_dolphin.png")" alt='dolphin' />
          <img class="avatar" src="@Url.Content("~/Content/Images/Account/avatar_octopus.png")" alt='octopus' />
          <img class="avatar" src="@Url.Content("~/Content/Images/Account/avatar_seal.png")" alt='octopus' />
        </div>

I don't know if this is important, but my application is in MVC5.

Do you need more details about something? I have jquery for this slider, should I use jquery? Or maybe it can be done in razor? Maybe images should be in form of buttons? Any idea?

Upvotes: 0

Views: 98

Answers (1)

Peter B
Peter B

Reputation: 24247

Assuming that the selected image is the only one that has css class selected, try this:

var img1 = $('.slider .avatar.selected')[0];
var img2 = $('#copiedimage img')[0];
img2.src = img1.src;
img2.alt = img1.alt;
.avatar.selected {
  border: solid 2px blue
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="copiedimage">
  Selected image:
  <img class="default-avatar" src="" alt='default-avatar' />
</div>
<br/>
<div class="slider">
  Slider:
  <img class="avatar selected" src="https://i.sstatic.net/G1osH.jpg?s=32&g=1" alt='user1' />
  <img class="avatar" src="https://i.sstatic.net/HzMxg.jpg?s=32&g=1" alt='user2' />
</div>

Upvotes: 2

Related Questions