Home/ Questions/Q 5928781
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-22T14:19:58+00:00

I am trying to position my Div wherever the user clicks on my Image.

  • 0

I am trying to position my Div wherever the user clicks on my Image.

test is my Div, and myimg is my image.

Here is my JS:

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
jQuery(document).ready(function(){
  $("#myimg").click(function(e){
                             $("#test").show(2000);
                             $("#test").offset({left:e.pageX,top:e.pageY});

                             })
})
</script>

However that does not work. Can anyone tell me what I am doing wrong?

Edit: Sorry, I forgot to mention that the Div wont show up, if I include the offset line, if I dont, it shows, but not at the right position.

Here is the full code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>xSky Software - Most likely the only software on Clickbank that exists.</title>
<link href="style.css" rel="stylesheet" type="text/css" /> 
<script type='text/javascript' src='video/jwplayer.js'></script>

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("#myimg").click(function(e){
                             $("#test").show(2000);
                             $("#test").offset({left:e.pageX,top:e.pageY});

                             })
})
</script>


</head>
<body>
    <!--Header and Logo-->
    <div id="header">
            <div id='mainvid'>This text will be replaced</div> 
            <script type='text/javascript'>
              jwplayer('mainvid').setup({
                'flashplayer': 'video/player.swf',
                'file': 'video/Untitled1.mp4',
                'controlbar': 'none',
                'frontcolor': 'FFFFFF',
                'lightcolor': 'FFFFFF',
                'screencolor': 'FFFFFF',
                'autostart': 'true',
                'width': '709',
                'height': '422'
              });
            </script>            
            </div>   
    </div>


    <div id="test" style="width:100px; position:absolute; display:none; height:100px; border:#093 solid 2px; background:#0C6;">
    Teeest
    </div>

    <!--Content-->
    <div id="content">            
        <center><img src="Images/downloadbutton.png" id="myimg" /></center>   
        <br />
        <div class="text">
        OH YEAH!
        </div> 
    </div>



    <!--Footer-->
    <div id="footer">

    </div>

</body>
</html>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    It seems to work fine. I have set up a JSFiddle for you:

    http://jsfiddle.net/JPvya/

    Click on the image and the test div moves. The only change is using the $ short notation for JQuery instead of typing “JQuery” which, by the way is probably case sensetive and causing the problem!

    • 0