im working on a project in mvc and have a javascript to change the image on mouseover.
my problem is the follows:
the script is working but only change the image for the first li element and then when i do mouseout it´s showing me the image of the last li element on the place of the first li.
i can´t understand what happening .
someone can give me a hand with this pls??
here is my code:
<ul>
@foreach (var p in ViewBag.MyIcon)
{
<li>
<script type='text/javascript'>
function onHover() {
$("#iconInteraction").attr('src', '/Content/iconhover.png');
}
function offHover() {
$("#iconInteraction").attr('src', '@p.Icon');
}
</script>
<form action="" method="post">
<button type="submit" name="submit" id="Interface_Button">
<img src="@p.Icon" onmouseover="onHover();" onmouseout="offHover();" id="iconInteraction"/>
</button>
</form>
</li>
}
</ul>
you are using id's which are causing the problem
function onHover() {
$(".iconInteraction").attr('src', '/Content/iconhover.png');
}
function offHover() {
$(".iconInteraction").attr('src', '@p.Icon');
}
update : but thats not the answer the code above will just make all the iconInteraction change .
use this bit of code (put it in the head of the page.
$('.iconInteraction').hover(function(){
$(this).attr('src', '/Content/iconhover.png');
} , function(){
$(this).attr('src', '@p.Icon');
});
Try this code which reduces the number of <script>
tags also
<script type='text/javascript'>
function onHover(obj) {
$("obj").attr('src', '/Content/iconhover.png');
}
function offHover(obj) {
$("obj").attr('src', $(obj).data('original-src'));
}
</script>
<ul>
@foreach (var p in ViewBag.MyIcon)
{
<li>
<form action="" method="post">
<button type="submit" name="submit" id="Interface_Button">
<img src="@p.Icon" data-original-src="@p.Icon"
onmouseover="onHover(this);"
onmouseout="offHover(this);" id="iconInteraction"/>
</button>
</form>
</li>
}
</ul>
Youare using a duplicated id
. This is why only the first img
change.
Try changing the onmouseover
and onmouseout
attribute to this :
onHover.call(this)
offHover.call(this)
Then your code should be outside the foreach
and look like this :
function onHover() {
$(this).attr('src', '/Content/iconhover.png');
}
function offHover() {
$(this).attr('src', $(this).data('original-src'));
}
Well lets make it simple. On mouse hover save the actual img-url in a custom property (actualUrl) of the same DOM object (img). On mouse leave/out restore the actual url as src.
<script type='text/javascript'>
var onMouseOver = function(targetImg) {
$(targetImg).attr('actualUrl', $(targetImg).prop('src'));
$(targetImg).attr('src', '/Content/iconhover.png');
};
var onMouseOut = function(targetImg) {
$(targetImg).attr('src', $(targetImg).attr('actualUrl'));
$(targetImg).attr('actualUrl', null); // Cleaning data
};
</script>
<ul>
@foreach (var p in ViewBag.MyIcon)
{
<li>
<form action="" method="post">
<button type="submit" name="submit" id="Interface_Button">
<img src="@p.Icon" onmouseover="onMouseOver(this);"
onmouseout="onMouseOut(this);"/>
</button>
</form>
</li>
}
</ul>
i have solved it..
i have do it a little bit different but it works great.
What i have done:
i have place the call of the mouseover and mouseout in the button tag and have set a counter to create always a new id of the image tag.
i have add to the mouseover and mouseout event a "src"
attribute and now its working fine.
take a look to my working code:
hope that helps somebody else.
@{int x=0;} /**********Create variable and initalize with the value 0***********/
<ul>
@foreach (var p in ViewBag.MyIcon)
{
<li>
<form action="" method="post">
<button type="submit" name="submit" onmouseover="document.getElementById('@("icon" + x.ToString())').src='/Content/hovericon.png';"
onmouseout="document.getElementById('@("icon" + x.ToString())').src='@p.Icon';" >
<img src="@p.Icon" id="@("icon" + x.ToString())"/>
</button>
</form>
</li>
x = x + 1; /********+1 counter********/
}
</ul>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.