Home/ Questions/Q 7709405
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-01T00:51:13+00:00

i have one image in my html and i have 5 different link, i

  • 0

i have one image in my html and i have 5 different link, i want to change image background position using only one class, so i set parameters in function but it is not working ?

<head>

<script type="text/javascript" src="jquery-1.7.min.js"></script>

<script type="text/javascript">

$(function Bg(left,top) {

    $('.me').each(function (){
        $(this).hover(function(){
            $('.container').css({backgroundPosition: left+ 'px', top + "px"})

            })

        })

    })




</script>
<style>

.container { width:100px; height:100px; float:left; background:url(../bike.jpg) left top no-repeat;}
</style>

</head>

<body>
<a href="#" class="me" onmouseover="Bg(50,60)">click me1</a>
<a href="#" onmouseover="Bg(80,70)" class="me">click me2</a>
<a href="#" onmouseover="Bg(120,60)" class="me">click me3</a>
<a href="#" onmouseover="Bg(150,60)" class="me">click me4</a>

<div class="container"></div>

</body>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    That code won’t work. You have the values stored inline in the href attribute of each <a> and you never call the function itself.

    You should move the background position in a data attribute like: data-bg="x,y" then use this adapted code: 

       $(function() {
    $('.me').each(function (){
        $(this).on('hover', function(){
             var bgPos = $(this).attr('coords');            
             bgPos = bgPos.split(',');   
             $('.container').css(
                  'background-position', bgPos[0] + 'px ' + bgPos[1] + 'px');
            });
        });
  });
    • 0