Наведите курсор на изображение, как изображение на Facebook в asp.net - PullRequest
Новая
       3

Наведите курсор на изображение, как изображение на Facebook в asp.net

2 голосов
/ 30 ноября 2011

У меня есть контроль изображения на странице ASPX.Я хочу показать опцию «Изменить картинку» поверх нее, как Facebook.При нажатии на него должна перейти другая страница.

enter image description here

Есть идеи, как это сделать?

Ответы [ 5 ]

1 голос
/ 30 ноября 2011

Попробуйте этот код 

<head runat="server">
    <title>Untitled Page</title>
    <style type="text/css">
        #profile_pic_wrapper{ position:relative; border:#ccc solid 1px; width:200px; height:200px;}
        #profile_pic_wrapper a{ position:absolute; display:none; top:0; right:0; line-height:20px; padding:5px; color:#fff; background-color:#333; text-decoration:underline;}
        #profile_pic_wrapper:hover a{ display:block; }
        #profile_pic_wrapper:hover a:hover{text-decoration:none;}
        .profile_pic{ width:200px; height:200px;}
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <div id="profile_pic_wrapper">
            <asp:Image ID="imgProfilePic" runat="server" ImageUrl="profile.jpg" CssClass="profile_pic"/>
            <asp:HyperLink ID="lnkChangePicture" runat="server" NavigateUrl="ChangeProfilePic.aspx">Change Picture</asp:HyperLink>
        </div>
    </div>
    </form>
</body>

В приведенном выше примере я включил стили CSS в страницу aspx только для иллюстрации.Для реализации в реальном мире всегда рекомендуется хранить стили в отдельном файле CSS.

1 голос
/ 30 ноября 2011

Может быть, это то, что вы хотите:

http://demo.fearlessflyer.com/html/demo/pretty-hovers/

http://thirdroute.com/projects/captify/

Надеюсь, это поможет.

0 голосов
/ 01 декабря 2011

Оберните кнопку image в обработчики div и свяжите jquery, чтобы показать или скрыть ссылку.

Редактировать : Здесь simple пример: 

<head runat="server">
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
</head>
<body>
    <form id="form1" runat="server">    
    <div id="mynamediv" style="width: 50px;">   
        <div id="mydiv" style="display: none;"><a href="www.google.com">Change Image</a></div>
        <asp:ImageButton runat="server" ID="myimage" ImageUrl="~/myimage.gif" /> 
    </div>
    </form>
<script language="javascript">
    $("#mynamediv").mouseover(function () {
        $("#mydiv").show();   
    });

    $("#mynamediv").mouseout(function () {
        $("#mydiv").hide();
    });
</script>

Вот подсказка, которая вам может понравиться

http://file.urin.take -uma.net / jquery.balloon.js-Demo.html

0 голосов
/ 30 ноября 2011

Вам понадобится некоторый код на стороне клиента для фактического управления событием наведения мыши, а затем для отображения наложенного тега A (с нужным текстом / изображением)

0 голосов
/ 30 ноября 2011

Здесь вы можете найти инструкции http://www.dreamweavertutorial.co.uk/dreamweaver/articles/transparent-layer-overlay.htm

Они называются оверлеями.

Другой пример здесь

http://css -tricks.com / 3118-text-blocks-over-image /

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...