image viewer

Collapse
X
 
  • Time
  • Show
Clear All
new posts
  • yogarajan
    New Member
    • Apr 2007
    • 115

    image viewer

    Hi All

    i have develope one new project. ie world map display that map width=2000 and height=1000 but my image viewer size is 400 width 400 height and i have all side button

    if i click botton button i want see world map bottom
    if i click top botton i want see world map top

    is this possible?

    pls guide me

    thanks

    Yogarajan.G
  • hsriat
    Recognized Expert Top Contributor
    • Jan 2008
    • 1653

    #2
    What is this image viewer?
    Have you set the image of world map as background or is it in the img tag?

    Can you explain the whole thing and provide some code what you have tried till now?

    Comment

    • yogarajan
      New Member
      • Apr 2007
      • 115

      #3
      hi

      Thanks for ur reply

      my image width 3000 px and height 3000 px.

      my request list

      1. I want show only particular position only ie i want to show height 400 px and width 400 px
      2. each side i have button ie totally i have 4 button

      3. if i click bottom button my image display porition should be changed ie image display bottom porition


      this is my sample site

      https://www.qv.co.nz/MapControls/MapSearch.aspx

      Thanks

      Yogarajan.G


      Originally posted by hsriat
      What is this image viewer?
      Have you set the image of world map as background or is it in the img tag?

      Can you explain the whole thing and provide some code what you have tried till now?

      Comment

      • hsriat
        Recognized Expert Top Contributor
        • Jan 2008
        • 1653

        #4
        Follow the following steps:
        • Make a div in your page, with id="map", and place it where ever you want it to. Give the following properties to it.[code=css]height:400px;
          width:400px;
          border:#999 solid 1px;
          background-image:url("map. png"); /*src of your map image*/
          background-repeat:no-repeat;
          background-position:550px 550px;
          [/code]
        • On the click event of the top button, add a function moveMap("top"). Similarly to other three buttons with left, right and bottom as arguments.
        • Make a function moveMap like this...[code=javascript]function moveMap(directi on) {
          var displacement = 50;
          var map = document.getEle mentById("map") ;
          var dir = direction=="top " || direction == "left" ? -1 : 1;
          var limit = direction=="top " || direction == "left" ? 1100 : 0;
          if (direction == "top" || direction = "bottom") {
          var presentPos = parseInt(map.st yle.backgroundY Position);
          if (presentPos != limit)
          map.style.backg roundYPosition = (presentPos + dir*displacemen t) + "px";
          }
          else {
          var presentPos = parseInt(map.st yle.backgroundX Position);
          if (presentPos != limit)
          map.style.backg roundXPosition = (presentPos + dir*displacemen t) + "px";
          }
          }[/code]
        • If you it moves fast or slow on the click of the button, change the value of displacement (line 2) to 10, 25, 50 or 110, which ever suits you.

        Comment

        • yogarajan
          New Member
          • Apr 2007
          • 115

          #5
          hi

          my code here

          [HTML]<style type="text/css">
          <!--
          .style1 {
          height:400px;
          width:400px;
          border:#999 solid 1px;
          background-image:url("Indi a_map.jpg");
          background-repeat:no-repeat;
          background-position:550px 550px;
          }

          -->
          </style>
          <div id="map" class="style1"> </div>

          [/HTML]div background image is not working
          why?
          Last edited by acoder; Jun 2 '08, 09:47 AM. Reason: Added code tags

          Comment

          • acoder
            Recognized Expert MVP
            • Nov 2006
            • 16032

            #6
            Yogarajan, as a full member now, you should know that we expect your code to be posted in [CODE] tags (See How to Ask a Question).

            This makes it easier for our Experts to read and understand it. Failing to do so creates extra work for the moderators, thus wasting resources, otherwise available to answer the members' questions.

            Please use the tags in future.

            MODERATOR.

            Comment

            • hsriat
              Recognized Expert Top Contributor
              • Jan 2008
              • 1653

              #7
              Make sure the path is correct.

              see this example.

              Comment

              • yogarajan
                New Member
                • Apr 2007
                • 115

                #8
                hi am sure

                path is correct

                pls give me sample code

                Comment

                • hsriat
                  Recognized Expert Top Contributor
                  • Jan 2008
                  • 1653

                  #9
                  Originally posted by yogarajan
                  hi am sure

                  path is correct

                  pls give me sample code
                  What did I give you in post #4?

                  Comment

                  • yogarajan
                    New Member
                    • Apr 2007
                    • 115

                    #10
                    hi

                    this is my code
                    Code:
                    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
                    <HTML>
                     <HEAD>
                      <TITLE> New Document </TITLE>
                       </HEAD>
                     <style type="text/css">
                    <!--
                    .style1 {
                    	height:400px;
                    	width:400px;
                    	border:#999 solid 1px;
                    	background-image:url("India_map.jpg");
                    	background-repeat:no-repeat;
                    	background-position:550px 550px;
                    }
                    
                    -->
                    </style>
                    
                    <script language="javascript">
                    function moveMap(direction) {
                        var displacement = 50;
                        var map = document.getElementById("map");
                        var dir = direction=="top" || direction == "left" ? -1 : 1;
                        var limit = direction=="top" || direction == "left" ? 1100 : 0;
                        if (direction == "top" || direction == "bottom") {
                            var presentPos = parseInt(map.style.backgroundYPosition);
                    		alert("presentPos ="+presentPos);
                            if (presentPos != limit)
                            {
                    		map.style.backgroundYPosition = (presentPos + dir*displacement) + "px";
                    		alert("ypos="+(presentPos + dir*displacement));
                    		}
                        }
                        else {
                            var presentPos = parseInt(map.style.backgroundXPosition);
                            if (presentPos != limit)
                            map.style.backgroundXPosition = (presentPos + dir*displacement) + "px";
                        }
                    }
                    </script>
                    
                    
                     <BODY>
                      
                      <DIV id ="map"  class="style1"></DIV>
                    <input type="button" name="up" value="up" onclick ="moveMap('top')">
                     </BODY>
                    </HTML>
                    this is my code

                    it is not working
                    it gives presentPos value is NaN

                    pls guide me

                    Comment

                    • hsriat
                      Recognized Expert Top Contributor
                      • Jan 2008
                      • 1653

                      #11
                      [html]<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
                      <html>
                      <head><title> New Document </title>
                      <style type="text/css">
                      #map {
                      height:400px;
                      width:400px;
                      border:#999 solid 1px;
                      background-image:url("imag e_viewer.png"); /*replace name with your image*/
                      background-repeat:no-repeat;
                      }
                      </style>
                      <script type="text/javascript">
                      window.onload = function() {
                      document.getEle mentById("map") .style.backgrou ndPosition="-550px -550px";
                      }
                      function moveMap(directi on) {
                      var displacement = 50;
                      var map = document.getEle mentById("map") ;
                      var dir = direction == "top" || direction == "left" ? 1 : -1;
                      var limit = direction == "top" || direction == "left" ? 0 : -1100;
                      var pos = map.style.backg roundPosition.s plit(" ");
                      pos[0] = parseInt(pos[0]);
                      pos[1] = parseInt(pos[1]);
                      var XorY = direction == "top" || direction == "bottom" ? 1 : 0;
                      if (pos[XorY]==limit)
                      return;
                      pos[XorY] += dir*displacemen t;
                      map.style.backg roundPosition = pos[0] + "px " + pos[1] + "px";
                      }
                      </script>
                      </head>
                      <body>
                      <div id ="map"></div>
                      <input type="button" name="up" value="Up" onclick ="moveMap('top' )">
                      <input type="button" name="down" value="Down" onclick ="moveMap('bott om')">
                      <input type="button" name="left" value="Left" onclick ="moveMap('left ')">
                      <input type="button" name="right" value="Right" onclick ="moveMap('righ t')">
                      </body>
                      </html>[/html]

                      Some bugs were there, fixed them. Now its working for me, in Firefox.
                      See if it works for you.

                      I strongly recommend you if you don't understand any part of the code, do ask me.

                      Comment

                      • acoder
                        Recognized Expert MVP
                        • Nov 2006
                        • 16032

                        #12
                        You can also use backgroundPosit ionX and backgroundPosit ionY. It might things a bit easier.

                        Comment

                        • hsriat
                          Recognized Expert Top Contributor
                          • Jan 2008
                          • 1653

                          #13
                          Originally posted by acoder
                          You can also use backgroundPosit ionX and backgroundPosit ionY. It might things a bit easier.
                          Yeah I figured out that it had to be backgroundPosit ionX and backgroundPosit ionY instead of backgroundXPosi tion and backgroundYPosi tion. (what I said in post#4).

                          But somehow it was not reading this property. So I used backgroundPosit ion at last and splitted it with a space. And a good thing is I did not need to use any if else by using backgroundPosit ion, while in other case, I might have to.

                          Comment

                          • yogarajan
                            New Member
                            • Apr 2007
                            • 115

                            #14
                            Hi
                            Thanks

                            it is working fine

                            i have one more doubt

                            my image is not only

                            example i will take world map

                            so i am cut world map in 9 parts

                            so if i go up means my current image and top image also show

                            it is possible?

                            Thanks

                            Comment

                            • hsriat
                              Recognized Expert Top Contributor
                              • Jan 2008
                              • 1653

                              #15
                              I could not get that at all, but if you wish to use different images with this, add background-image to div tag, instead of defining it separately in the styles.
                              [HTML]<div style="backgrou nd-image:url('worl d_map.png');"></div>[/HTML]

                              Comment

                              Working...