#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Feb 2013
    Posts
    5
    Rep Power
    0

    Linking image tiles with JavaScript


    I'm trying to use Javascript to recreate something from GoogleMaps. I've successfully created a draggable picture object. Now I'm looking for some clues of how to "glue" two or more image tiles together. And yes, I'll assume that they are all identical square images for ease of use. I believe this could all be handled through JavaScript.
  2. #2
  3. A Not To Shabby Code Smurf
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Aug 2008
    Posts
    1,165
    Rep Power
    184
    You can combine the two titles; like so:

    Code:
    <script>
    
    function reTitle(img1,img2)
    {
    var pic1 = document.getElementById(img1);
    var pic2 = document.getElementById(img2);
    pic1.title = pic1.title + pic2.title;
    pic2.title = pic1.title;
    }
    
    window.onload = function() {
    new reTitle('pic1','pic2');
    new reTitle('pic3','pic4');
    }
    
    </script>
    
    <img id="pic1" src="any.jpg" title="any"/>
    <img id="pic2" src="body.jpg" title="body"/>
    
    <img id="pic3" src="can.jpg" title="can"/>
    <img id="pic4" src="not.jpg" title="not"/>
  4. #3
  5. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Feb 2013
    Posts
    5
    Rep Power
    0
    Hi Web Loonie -

    I meant picture tiles - not titles.
    Kinda like how GoogleMaps groups a whole bunch of map tiles into one giant object.
  6. #4
  7. A Not To Shabby Code Smurf
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Aug 2008
    Posts
    1,165
    Rep Power
    184
    Haha, miss read what you were wanting... sry. Look into HTML5 Canvas; you should be able to find some examples of combining two or more imgs onto a Canvas using JavaScript.

IMN logo majestic logo threadwatch logo seochat tools logo