SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Member
    Join Date
    Feb 2007
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Creating Hotspots from CMS.

    Hey guys,

    I would like to adapt a WYSIWYG CMS to add/edit hotspots on an image, preferably by clicking on the desired location in the image instead of entering x and y coordinates.
    Would it be possible to read out the x-y coordinates of a mousepointer within an image using javascript? I could then use these coords to create a map for the image.

    Thanks in advance,

    Wackedmac.

  2. #2
    SitePoint Evangelist
    Join Date
    Mar 2006
    Location
    Sweden
    Posts
    451
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Sure, just find out the top left corner coords of the image, use clientX and clientY in window.event (IE) and pageX and pageY in the event that standards-complient browsers gives the function executed by the event. Something like this:

    Code:
    <html>
    <head>
    <script type="text/javascript">
    window.onload = function()
    {
    	document.getElementById( 'myimage' ).onclick = getClickedCoords;
    }
    
    function getClickedCoords( e )
    {
    	var x = e.pageX || window.event.clientX;
    	var y = e.pageY || window.event.clientY;
    
    	var img = document.getElementById( 'myimage' );
    	x = x - parseInt( img.style.left, 10 );
    	y = y - parseInt( img.style.top, 10 );
    
    	alert( 'x: '+ x +', y: '+ y );
    }
    </script>
    </head>
    <body>
    
    	<img src="image.jpg" style="position: absolute;left:100px;top:100px;" id="myimage">
    
    </body>
    </html>


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •