title: Change img tag using jquery from a list of items and an url stored in an item
body: <p>I have a list of items displaying a link in my view like this:</p>
  
  <pre><code>@Html.ActionLink(cardPackInfo.mCard.mMasterCard.mCardName, "ViewItemDetails", "Item", null, new { @class = "cardImage", @data_id = cardPackInfo.mCard.mMasterCard.mCardImageLink})
  </code></pre>
  
  <p>As you can see, I'm trying to store a data in a kind of <code>@data_id</code> like I did.</p>
  
  <p>I have a field dedicated to display an image:</p>
  
  <pre><code>&lt;div id="image"&gt;
      &lt;img id="cardImageDiv" src="~/Images/Functional/cardback.jpg" alt="defaultCard" class="nullify"/&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>and my jQuery script is like this:</p>
  
  <pre><code>$('.cardImage').mouseover(function() {
      var imageSrc = $(this).attr("data-id");
  
      alert(imageSrc);
      $('#cardImageDiv').attr('src', imageSrc);
  
      var newImage = $('#cardImageDiv').attr('src');
      alert(newImage);
  });
  </code></pre>
  
  <p>So what I'm trying to do is, when the user's mouse is over one of the link, I take the url when the image is located (which is stored in my model at <code>cardPackInfo.mCard.mMasterCard.mCardImageLink</code> and change the src of the current image located in the image src with the id <code>cardImageDiv</code>.</p>
  
  <p>However the image is <strong>not</strong> changing. The two alerts are there to testify that the first data obtained is the url of the image (which may look like this: <code>~\Images\CardsImages\Return to Ravnica\(RTR) - 231 - NameOfTheCard.jpeg</code>) and the second alert tells me of the current src. But the result I have is that the first image is removed and I have the small "broken link" icon. Can anyone help me out?</p>