Pratham4950 Ответов: 1

масштабирование изображения при наведении курсора мыши

когда я загружаю изображение пользователя и отображаю его в datalist, я упоминаю свой код ниже.
а после отображения изображения я хочу навести курсор мыши на все изображения.
Итак, как я могу это сделать ?



мой код таков:

<asp:DataList ID="DataList1" runat="server" BackColor="#DEBA84" BorderColor="#DEBA84"

            BorderStyle="None" BorderWidth="1px" CellPadding="3" CellSpacing="2" GridLines="Both"

            RepeatColumns="3">
            <footerstyle backcolor="#F7DFB5" forecolor="#8C4510" />
            <itemstyle backcolor="#FFF7E7" forecolor="#8C4510" />
            <SelectedItemStyle BackColor="#738A9C" Font-Bold="True" ForeColor="White" />
            <HeaderStyle BackColor="#A55129" Font-Bold="True" ForeColor="White" />
            <SelectedItemTemplate>
            </SelectedItemTemplate>
            <itemtemplate>
                <table style="width: 100%;">
                    <tr>
                        <td rowspan="3">
                            <img alt="" src='Admin/ProductImages/<%# Eval("ImageName") %>' />
                        </td>
                        <td>
                        </td>
                        <td>
                             
                        </td>
                    </tr>
                </table>
            </itemtemplate>

1 Ответов

Рейтинг:
9

Sergey Alexandrovich Kryukov

С jQuery все просто:

<html>
<head>
    <title> ... </title>
    <script type="text/javascript" src="scripts/jquery-1.7.1.min.js"></script>
</head>
<body>

	<img alt="Image" id="image" />	
	
	<script type="text/javascript">

                $(document).ready(function() {
			imageElement = $("#image"); // element img found by its attribute id="image"
			imageElement.attr("src", "small.png"); // start with small image
			imageElement.hover(
				function() { // mouse moves over the image
					$(this).attr("src", "big.png");
				},
				function() { // mouse goes out
					$(this).attr("src", "small.png");
				}
			);
		});
        
        </script>

</body>
</html>


Я предполагаю, что у вас есть два изображения: "small.png" и "big.png", в основном, оба могут быть сделаны из одного и того же исходного изображения, но "small.png" был повторно выбран до меньшего размера с тем же соотношением сторон.

Это работает, проверено.

Если вам нужно изучить jQuery, пожалуйста, смотрите:
http://en.wikipedia.org/wiki/JQuery[^],
http://jquery.com/[^],
http://docs.jquery.com/Tutorials:How_jQuery_Works[^],
http://docs.jquery.com/Tutorials[^].

—СА

Maciej Los

Хороший ответ, мой 5!

Sergey Alexandrovich Kryukov

Спасибо, Мацей.
--СА

SoMad

Хороший и простой ответ. Когда я прочитал этот вопрос, я вспомнил плагин jQuery, с которым столкнулся - я думаю, что он выглядит действительно круто, но у меня еще не было причин его использовать: www.wizzud.com/jqdock/demonstrator[^]

Сорен Мадсен

Sergey Alexandrovich Kryukov

- Спасибо, Сорен.

Я вижу, что страница, которую вы показали, является более продвинутым примером, но также может быть задействован серверный код (через Ajax, я не смотрел тщательно): изображение может быть масштабировано на лету на стороне сервера, чтобы обеспечить плавную градацию размера, экономить изображения на диске и работать и тратить немного трафика (что является общей проблемой обширных постбэков и Ajax).

Достаточной причиной для использования jQuery является элегантность, лаконичный стиль кода и читабельность, которую он способствует, даже для тех же эффектов, которые вы уже имели раньше.
--СА

thatraja

5!

Sergey Alexandrovich Kryukov

- Спасибо, Раджа.
--СА