Action Link mouseover?

Question

I am using cshtml/C# and I need images that link as well as have a mouseover effect. I can't seem to find something that works for both.

<img src="http://upload.wikimedia.org/wikipedia/commons/thumb/e/e1/Tokyoship_Home_icon.svg/300px-Tokyoship_Home_icon.svg.png" class='img-responsive' onclick="location.href='@Url.Action("Index", "ModelDirectory")'; return false;"/>

Is there a solution for this? So on hover, the picture would be http://upload.wikimedia.org/wikipedia/commons/thumb/e/e6/Home_Icon.svg/512px-Home_Icon.svg.png and on mouseout go back to normal. I have many image links and would rather avoid a jquery function for mouse hover for each image. I'm not sure why onmouseover="changeImage('http://upload.wikimedia.org/wikipedia/commons/thumb/e/e6/Home_Icon.svg/512px-Home_Icon.svg.png')" won't work. Thanks in advance.

I've posted a solution with both javaScript and jQuery. You can handle as many images you like.you may check... — Md Ashaduzzaman
– Md Ashaduzzaman, Commented Nov 25, 2013 at 19:04

Comfortably Numb · Accepted Answer · 2013-11-25 18:42:28Z

You don't need JavaScript for that. Instead of IMG declare a DIV like that:

<div class='img-responsive' onclick="location.href='@Url.Action("Index", "ModelDirectory")'; return false;"> </div>

And use your images as background images in CSS classes. For normal view:

div.img-responsive { background-image:url('http://upload.wikimedia.org/wikipedia/commons/thumb/e/e1/Tokyoship_Home_icon.svg/300px-Tokyoship_Home_icon.svg.png'); width:100px; height:100px; background-size:contain; }

And mouse-hovered view:

div.img-responsive:hover { background-image:url('http://upload.wikimedia.org/wikipedia/commons/thumb/e/e6/Home_Icon.svg/512px-Home_Icon.svg.png'); background-size:contain; }

Demo: http://jsfiddle.net/c3YXN/ Feel free to adjust DIV size in 1st class

Community · Accepted Answer · 2017-05-23 11:49:42Z

Actually, this works perfectly. Considering I have many different images, I just give them new classes and adjust the hovers via CSS. Change image on hover

<div class="effect"> <img class="image" src="image.jpg" /> <img class="image hover" src="image-hover.jpg" /> </div> div.effect img.image{ /*type your css here which you want to use for both*/ } div:hover.effect img.image{ display:none; } div.effect img.hover{ display:none; } div:hover.effect img.hover{ display:block; }

I think this is over-complicating things. You can have just one DIV and change its image background on hover - check my answer

Collectives™ on Stack Overflow

Action Link mouseover?

2 Answers 2

Comments

1 Comment

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Linked

Related