Мне было интересно, как правильно использовать jquery для изменения состояний HyperLinkImage, т.е. Mousedown, onmouseup и т.д.... кроме копирования и вставки одной и той же функции и изменения имен имен? Вот код, который я только собираюсь скопировать и вставить и изменить части клиента, чтобы отобразить 5 других ссылок на изображения
$(function () {
$("#<%=HyperLink1.ClientID%> img").hover(function () {
$(this).attr("src", "/HoverIcons/Icon_lab.png");
}, function () {
$(this).attr("src", "/ActiveIcons/Icon_lab_a.png");
}).mousedown(function () {
$(this).attr("src", "/DownIcons/iconlab.png");
}).mouseup(function () {
$(this).attr("src", "/ActiveIcons/Icon_lab_a.png");
});
});
Есть ли более чистый способ сделать это?
Вот часть, где все ссылки находятся в моей разметке.
<div id="Navigation1">
<div id="Nav">
<table style="width: 100%;">
<tr>
<td>
<asp:HyperLink ID="HyperLink1" runat="server" ImageUrl="~/ActiveIcons/Icon_lab_a.png" NavigateUrl="~/Tabbet.aspx">HyperLink</asp:HyperLink>
</td>
<td>
<asp:HyperLink ID="HyperLink2" runat="server" ImageUrl="~/ActiveIcons/Icon_ABC_a.png">HyperLink</asp:HyperLink>
</td>
<td>
<asp:HyperLink ID="HyperLink3" runat="server" ImageUrl="~/ActiveIcons/Icon_math_a.png">HyperLink</asp:HyperLink>
</td>
</tr>
<tr>
<td>
<asp:HyperLink ID="HyperLink4" runat="server" ImageUrl="~/ActiveIcons/Icon_english_a.png">HyperLink</asp:HyperLink>
</td>
<td>
<asp:HyperLink ID="HyperLink5" runat="server" ImageUrl="~/ActiveIcons/Icon_history_a.png">HyperLink</asp:HyperLink>
</td>
<td>
<asp:HyperLink ID="HyperLink6" runat="server" ImageUrl="~/ActiveIcons/Icon_geography_a.png">HyperLink</asp:HyperLink>
</td>
</tr>
<tr>
<td>
<asp:HyperLink ID="HyperLink7" runat="server" ImageUrl="~/ActiveIcons/Icon_cyberspace_a.png">HyperLink</asp:HyperLink>
</td>
<td>
<img alt="" class="auto-style3" src="ActiveIcons/New_subject_coming.png" /></td>
<td>
<img alt="" class="auto-style3" src="ActiveIcons/New_subject_coming.png" /></td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>
</td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
</div>
Я только начинаю менять код сейчас, это мой макет для изображений.
Сделал это изменение в вашем.aspx файле.
Добавьте CssClass="linkcssclass"
в свои гиперссылки следующим образом:
<div id="Navigation1">
<div id="Nav">
<table style="width: 100%;">
<tr>
<td>
<asp:HyperLink ID="HyperLink1" CssClass="linkcssclass" runat="server" ImageUrl="~/ActiveIcons/Icon_lab_a.png" NavigateUrl="~/Tabbet.aspx">HyperLink</asp:HyperLink>
</td>
<td>
<asp:HyperLink ID="HyperLink2" CssClass="linkcssclass" runat="server" ImageUrl="~/ActiveIcons/Icon_ABC_a.png">HyperLink</asp:HyperLink>
</td>
<td>
<asp:HyperLink ID="HyperLink3" CssClass="linkcssclass" runat="server" ImageUrl="~/ActiveIcons/Icon_math_a.png">HyperLink</asp:HyperLink>
</td>
</tr>
<tr>
<td>
<asp:HyperLink ID="HyperLink4" CssClass="linkcssclass" runat="server" ImageUrl="~/ActiveIcons/Icon_english_a.png">HyperLink</asp:HyperLink>
</td>
<td>
<asp:HyperLink ID="HyperLink5" CssClass="linkcssclass" runat="server" ImageUrl="~/ActiveIcons/Icon_history_a.png">HyperLink</asp:HyperLink>
</td>
<td>
<asp:HyperLink ID="HyperLink6" CssClass="linkcssclass" runat="server" ImageUrl="~/ActiveIcons/Icon_geography_a.png">HyperLink</asp:HyperLink>
</td>
</tr>
<tr>
<td>
<asp:HyperLink ID="HyperLink7" CssClass="linkcssclass" runat="server" ImageUrl="~/ActiveIcons/Icon_cyberspace_a.png">HyperLink</asp:HyperLink>
</td>
<td>
<img alt="" class="auto-style3" src="ActiveIcons/New_subject_coming.png" /></td>
<td>
<img alt="" class="auto-style3" src="ActiveIcons/New_subject_coming.png" /></td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>
</td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
</div>
Внесите следующие изменения в jQuery:
<script src="Scripts/jquery-1.7.1.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$(".linkcssclass img").each(function (i) {
$(this).hover(function () {
$(this).attr("src", "/HoverIcons/Icon_lab.png");
}, function () {
$(this).attr("src", "/ActiveIcons/Icon_lab_a.png");
}).mousedown(function () {
$(this).attr("src", "/DownIcons/iconlab.png");
}).mouseup(function () {
$(this).attr("src", "/ActiveIcons/Icon_lab_a.png");
});
});
});
</script>
Я нашел этот ответ в другом вопросе:
<script src="Scripts/jquery-1.7.1.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#<%=Hyperlink1.ClientID%> img").hover(function () {
$(this).attr("src", "/Images/logo.png");
}, function () {
$(this).attr("src", "/Icons/Icon_english_a.png");
}).mousedown(function () {
$(this).attr("src", "/Images/logo.png");
}).mouseup(function () {
$(this).attr("src", "/Icons/Icon_english_a.png");
});
});
</script>
Ссылка: гиперссылка не может иметь состояния изображения, то есть onmousedown
ОБНОВИТЬ
<table>
<tr>
<td class="nav">
<table>
<tr>
<td>
<asp:HyperLink ID="HyperLink1" CssClass="lab" runat="server" ImageUrl="~/ActiveIcons/Icon_lab_a.png" NavigateUrl="~/Tabbet.aspx">HyperLink</asp:HyperLink>
</td>
<td>
<asp:HyperLink ID="HyperLink2" CssClass="abc" runat="server" ImageUrl="~/ActiveIcons/Icon_ABC_a.png">HyperLink</asp:HyperLink>
</td>
<td>
<asp:HyperLink ID="HyperLink3" CssClass="math" runat="server" ImageUrl="~/ActiveIcons/Icon_math_a.png">HyperLink</asp:HyperLink>
</td>
</tr>
</table>
</td>
</tr>
<table>
<script type="text/javascript">
$(document).ready(function() {
$('.nav a img').hover(function () {
if($(this).parent().hasClass("lab"))
$(this).attr("src", "/Images/lab_hover.png");
//if hasClass("abc")
//if hasClass("math")
}, function () {
if($(this).parent().hasClass("lab"))
$(this).attr("src", "/Images/lab_a.png");
//if hasClass("abc")
//if hasClass("math")
}).mousedown(function () {
if($(this).parent().hasClass("lab"))
$(this).attr("src", "/Images/lab_mousedown.png");
//if hasClass("abc")
//if hasClass("math")
}).mouseup(function () {
if($(this).parent().hasClass("lab"))
$(this).attr("src", "/Images/lab_mouseup.png");
//if hasClass("abc")
//if hasClass("math")
});
});
</script>
Я надеюсь, это поможет вам.
$("#<%=Hyperlink1.ClientID%> img")
на $('.your_hyperlink_class img')