vb.org Archive - Css Image properties

as this is a more general question I thought I would post here.

Can any developers help me out on a small problem

I am developing a small app to help with a game. Basicaly I have two images a main image that is of a large size sitting in a layer. A second image, which when a user clicks on the main images moves to that location.

I have this working with a layer background image but I cant add hotspots.

I would like to replicated this with have a div with an image. But I cant seem to find the attribute to move the image.

Its hard to explain so I have producted a link to explain.

http://www.dnd-gamer.com/index.php?p..._explorers_map

thanks

Gary

Code:



<style type="text/css">

<!--

#Layer1 {

        width:675px;

        height:650px;

        z-index:1;

        background-image: url(./addons/dnl/map/images/mastermap3.jpg);

        background-position: -490px -2142px;

        background-repeat: no-repeat;

}



#mainimage {

        width:675px;

        height:650px;

        z-index:1;

        background-repeat: no-repeat;

        overflow:hidden;

}



-->

</style>





<script language="javascript">

var tempX = 0

var tempY = 0





function getMouseXY(e) {



  tempX = window.event.offsetX

  tempY = window.event.offsetY



  document.Show.MouseX.value = (tempX * -15) + 338

  document.Show.MouseY.value = (tempY * -16.5) + 325

    

  document.getElementById('mainmap').scrollLeft = tempX + 338

  document.getElementById('mainmap').scrollTop = tempY + 325



  document.getElementById('Layer1').style.backgroundPositionX = document.Show.MouseX.value 

  document.getElementById('Layer1').style.backgroundPositionY = document.Show.MouseY.value

}

 



</script>



<table>

<tr><td>this is a layer div with a backgroundImage, by clicking on the smaller map, the backgroundPosition X and Y are set to move it around</td></tr>

  <tr>

     <td><div id="Layer1"></div></td>

  </tr>

    <tr><td>this is a div with a < img / > but what img.value do I need to set to move to the X/Y position</td></tr>

  <tr>

     <td><div id="mainimage"><img id="mainmap" src="./addons/dnl/map/images/mastermap3.jpg" /></img></div>

         </td>

  </tr>

</table>

X vBulletin 3.8.12 by vBS Debug Information
Page Generation 0.00960 seconds Memory Usage 1,714KB Queries Executed 10 (?)
More Information
Template Usage: (1)ad_footer_end (1)ad_footer_start (1)ad_header_end (1)ad_header_logo (1)ad_navbar_below (1)bbcode_code_printable (1)footer (1)gobutton (1)header (1)headinclude (6)option (1)post_thanks_navbar_search (1)printthread (1)printthreadbit (1)spacer_close (1)spacer_open Phrase Groups Available: global postbit showthread	Included Files: ./printthread.php ./global.php ./includes/init.php ./includes/class_core.php ./includes/config.php ./includes/functions.php ./includes/class_hook.php ./includes/modsystem_functions.php ./includes/class_bbcode_alt.php ./includes/class_bbcode.php ./includes/functions_bigthree.php Hooks Called: init_startup init_startup_session_setup_start init_startup_session_setup_complete cache_permissions fetch_threadinfo_query fetch_threadinfo fetch_foruminfo style_fetch cache_templates global_start parse_templates global_setup_complete printthread_start bbcode_fetch_tags bbcode_create bbcode_parse_start bbcode_parse_complete_precache bbcode_parse_complete printthread_post printthread_complete
Messages: