0

How can I make something like this in MVC 4 or 5 but with vertical order and also when click the button, it links to the another page and when it is hover by mouse, the image will change?

enter image description here

What I know is, I can do that in WebForms and WinForms using PictureBox and with PictureBox Click function and PictureBox Hover function, but I am not sure on how to achieve that in MVC 4 or 5.

Thank you!

Stainn
  • 119
  • 1
  • 1
  • 13

2 Answers2

1

Try using a button (type "button" not "Submit") with the background image added using CSS class, then you can hook the event you want on Click (take you to another page) or Hover (change CSS class with the new image) on the button. As for the vertical alignment take a look at Bootstrap it has many css classes such as 'row' and 'col-xx-xx' that can help you achieve the design you want with the minimum effort.

function buttonClick() {
    window.location = "http://google.com";
}
.buttonTest {
    background-image: url("https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTtE7M1ab8BJGXilT25_ty0PcdBdtsgM1QOd2Zy_71hXb92mv0NIQ");
    width:100px;
    height:30px;
}

    .buttonTest:hover {
        background-image: url("https://gogreenhall.org/wp-content/uploads/2013/09/igihof-bg.jpg");
    }
.testDiv {

    width:110px;
    height:70px;
    /*if yoy want here you can any image as the background-image instead of back-ground-color and change the padding to get the wanted */
    background-color:gray;
    padding:6px;
}
<div class="testDiv" >
    <input type="button" class="buttonTest" value="Click Me" onclick="buttonClick();" />
    <input type="button" class="buttonTest" value="Click Me" onclick="buttonClick();" />
</div>
Noor Samara
  • 97
  • 7
  • do you have something similar like what you are talking about? and similar like what the image that I have posted in the question? like a blog, tutorial or something like that? Thanks – Stainn Jun 21 '15 at 13:27
  • please find my answer edited to include a code snippet, actually you don't need to use bootstrap library , you can manipulate with CSS classes to get the design you want. thanks – Noor Samara Jun 22 '15 at 08:13
0

it is not about MVC 4 or 5, it's all about dealing with CSS. you need two buttons, for example, and you need to specifically tell your CSS what to do when a hover happens. take a look at these links:

link1: http://www.w3schools.com/css/tryit.asp?filename=trycss_image_transparency

link2: Changing image on hover with CSS/HTML

Community
  • 1
  • 1
Ni Ma
  • 51
  • 10