CODEWITHSUNDEEP
javascriptjqueryhtmlimage
hsim
hsim

Reputation: 2080

Change img tag using jquery from a list of items and an url stored in an item

I have a list of items displaying a link in my view like this:

@Html.ActionLink(cardPackInfo.mCard.mMasterCard.mCardName, "ViewItemDetails", "Item", null, new { @class = "cardImage", @data_id = cardPackInfo.mCard.mMasterCard.mCardImageLink})

As you can see, I'm trying to store a data in a kind of @data_id like I did.

I have a field dedicated to display an image:

<div id="image">
    <img id="cardImageDiv" src="~/Images/Functional/cardback.jpg" alt="defaultCard" class="nullify"/>
</div>

and my jQuery script is like this:

$('.cardImage').mouseover(function() {
    var imageSrc = $(this).attr("data-id");

    alert(imageSrc);
    $('#cardImageDiv').attr('src', imageSrc);

    var newImage = $('#cardImageDiv').attr('src');
    alert(newImage);
});

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 cardPackInfo.mCard.mMasterCard.mCardImageLink and change the src of the current image located in the image src with the id cardImageDiv.

However the image is not changing. The two alerts are there to testify that the first data obtained is the url of the image (which may look like this: ~\Images\CardsImages\Return to Ravnica\(RTR) - 231 - NameOfTheCard.jpeg) 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?

Upvotes: 0

Views: 104

Answers (1)

user1166905
user1166905

Reputation: 2622

Can you try with the src like "/Images/etc" and lose the ~

Upvotes: 1

Related Questions