Results 1 to 6 of 6

Thread: Creating Dynamic Image Links

  1. #1
    Join Date
    Jun 2010
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Creating Dynamic Image Links

    I'm using the code as shown on the following page:
    Example Map

    I've modified it a bit so you don't have to rollover anything to show the images and they automatically show upon page load. I'm looking to add links to these dynamically created images, just the small dot that you see on the example. Any idea on how to do this?

    If you look at the source, I tried adding marker.location.href = 'URL' and that didn't work. Still fairly new with Javascript so hopefully someone can help.

    Thanks guy/girls!

  2. #2
    Join Date
    Dec 2008
    Location
    Portsmouth, UK
    Posts
    1,891
    Thanks
    2
    Thanked 441 Times in 435 Posts

    Default

    I've modified it a bit so you don't have to rollover anything to show the images and they automatically show upon page load.
    please post your modified code
    Vic
    God Loves You and will never love you less.
    http://www.vicsjavascripts.org/Home.htm
    If my post has been useful please donate to http://www.operationsmile.org.uk/

  3. #3
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,373
    Thanks
    77
    Thanked 3,421 Times in 3,382 Posts
    Blog Entries
    12

    Default

    If you are showing everything onload anyway, it would be easier to just hard code the markers as img tags. Each one could be linked, ex:

    HTML Code:
    <div id="map">
    <a href="belfast.htm"><img class="marker" id="belfast" src="marker.png" alt=""></a>
    <!-- other markers go here -->
    </div>
    Repeat for each marker, giving each a unique id.

    You could have style in your stylesheet, like:

    Code:
    #map {
    position: relative;
    width: 297px;
    height: 388px;
    background-image: url('uk_map.png');
    }
    
    .marker {
    position: absolute;
    width: 32px;
    height: 32px;
    border: none;
    }
    
    #belfast { /* These are adjusted down for 1/2 the marker size */
    left: 99px;
    top: 164px;
    }
    Repeat the #whatever part for each marker, giving each its correct left and top position.

    The advantage here is that everything would work, even without javascript. The only things javascript are required for are hiding and showing the markers (which you no longer are doing), and for dealing with .png in IE 6 and less. This can be done much better than by substituting a .gif for it in all IE browsers, but that's another topic.

    If you still want to use the script you could add URL's, ex:

    Code:
      var marker, markersrc, markersize;
      var isIE = (document.all && navigator.userAgent.indexOf("Opera")==-1);
      var coordx   = new Array(10);
      var coordy   = new Array(10);
      var URLs   = new Array(10);
    Then add the URL for each entry, example:

    Code:
      // Belfast
      coordx[5]   = 115;
      coordy[5]   = 180;
      URLs[5]   = 'belfast.htm';
    Now, I'm not sure exactly how you've scripted it to show all markers at once. In the page you linked to there is only one marker, it just gets moved around. There are various ways you could have done it. But you would have to deal with each marker as a separate element in some way. So, where you do that, you could have something like:

    Code:
    marker.onclick = function(){location.href = URLs[city];};
    If you want more help:

    Please post a link to a page on your site that contains the problematic code so we can check it out.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  4. #4
    Join Date
    Jun 2010
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Quote Originally Posted by jscheuer1 View Post

    Now, I'm not sure exactly how you've scripted it to show all markers at once. In the page you linked to there is only one marker, it just gets moved around. There are various ways you could have done it. But you would have to deal with each marker as a separate element in some way. So, where you do that, you could have something like:

    Code:
    marker.onclick = function(){location.href = URLs[city];};
    If you want more help:

    Please post a link to a page on your site that contains the problematic code so we can check it out.
    Brilliant, the onclick code is what I was looking for I was using:
    marker.onclick = function(funcname); and couldn't figure out why it wasn't working.

    Also, thanks to the first solution as well, I may end up using that as it's more practical.

    Here's the code I'm using, I can't post a link to my site as it's work related, but I can show you some of the code I used just in case anyone else wants to use this script. I'm using it to display available apartments in a floorplate.

    Code:
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Untitled Document</title>
    <script type="text/javascript">
    
      var marker, markersrc, markersize;
      var isIE = (document.all && navigator.userAgent.indexOf("Opera")==-1);
      var coordx   = new Array(10);
      var coordy   = new Array(10);
      
      if (isIE) {
        markersrc = "marker.gif";
      } else {
        markersrc = "marker.png";
      }
      
      markersize = 32;
      
      // Apt 1
      coordx[0]   = 240;
      coordy[0]   = 235;
    
     
      function maphide () {
        marker.style.display = "none";
      }
      
      function mapshow (city) {
        var map = document.getElementById("map");
        map.style.width = "657px";
        map.style.height = "388px";
        map.style.backgroundImage = "url('images/floorplates/fp_1.jpg')";
        map.style.position = "relative"; // to position marker
    	
    	marker = new Image();
        marker.src = markersrc;
        marker.alt = "";
        marker.style.display = "none";
        marker.style.position = "absolute";
        map.appendChild(marker);
    	
    	var offset = 0 - (markersize/2);
        var x = coordx[city] + offset;
        var y = coordy[city] + offset;
        marker.style.left = x + "px";
        marker.style.top = y + "px";
        marker.style.display = "block";
        marker.onclick = function(){location.href = 'http://www.google.com';};
      }
        
      
    </script>
    
    </head>
    
    <body>
    <div id="map">
    </div>
    <!----CF Code to Check if Item is In Database and Display Image if It Is----->
    
    <!--------------------------------------------------------------------------->
    <script type="text/javascript">
    mapshow(0);
    </script>
    </body>

  5. #5
    Join Date
    Dec 2008
    Location
    Portsmouth, UK
    Posts
    1,891
    Thanks
    2
    Thanked 441 Times in 435 Posts

    Default

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <title>UK Map Example</title>
    
    <style type="text/css" media="screen,projection">
    
      #locations {
        width: 9em;
        float: right;
      }
    
      #map {
       width:297px;
       height:388px;
       background-Image:url(http://examples.tobyinkster.co.uk/map/uk_map.png);
       position:relative;
    
      }
    
    </style>
    
    <script type="text/javascript">
    
    
    var markersrc =(document.all && navigator.userAgent.indexOf("Opera")==-1)? "http://examples.tobyinkster.co.uk/map/marker.gif":"http://examples.tobyinkster.co.uk/map/marker.png";
    
    function mapinit (o) {
     var map = document.getElementById(o.ID);
     var cities=o.CityArray||[]
     this.marks=[];
     for (var a,m,z0=0;z0<cities.length;z0++){
      a=document.createElement('A');
      map.appendChild(a);
      if (cities[z0][3]){
       a.href=cities[z0][3];
      }
      m=document.createElement('IMG');
      m.src=o.MarkSRC;
      m.width=o.MarkSize;
      m.height=o.MarkSize;
      m.alt=cities[z0][0];
      m.style.position='absolute';
      m.style.left=cities[z0][1]-o.MarkSize/2+'px';
      m.style.top=cities[z0][2]-o.MarkSize/2+'px';
      m.style.borderWidth='0px';
      a.appendChild(m);
      this.marks[z0]=m;
     }
    }
    
    mapinit.prototype.maphide=function() {
     for (var z0=0;z0<this.marks.length;z0++){
       this.marks[z0].style.display = 'none';
     }
    }
    
    mapinit.prototype.mapshow=function(city) {
     if (this.marks[city]){
      this.marks[city].style.display = 'block';
     }
    }
    
    var M;
    
      window.onload = function(){
       M=new mapinit({
        ID:'map',
        MarkSize:32,
        MarkSRC:markersrc,
        CityArray:[
          ['London',248,320,'http://www.vicsjavascripts.org.uk/'],
          ['Birmingham',200,270],
          ['Manchester',200,235],
          ['Edinburgh',195,135],
          ['Cardiff',170,310,'http://www.dynamicdrive.com/forums/showthread.php?p=229363#post229363'],
          ['Belfast',115,180],
          ['Glasgow',165,140],
          ['Douglas',152,200],
          ['Liverpool',184,234],
          ['Newcastle',225,175]
         ]
       });
      }
    </script>
    
    <ul id="locations">
     <li><a href="branch?b=Belfast" onmouseover="M.mapshow(5);" onmouseout="M.maphide();">Belfast</a>
     <li><a href="branch?b=Birmingham" onmouseover="M.mapshow(1);" onmouseout="M.maphide();">Birmingham</a>
    
     <li><a href="branch?b=Cardiff" onmouseover="M.mapshow(4);" onmouseout="M.maphide();">Cardiff</a>
     <li><a href="branch?b=Douglas" onmouseover="M.mapshow(7);" onmouseout="M.maphide();">Douglas</a>
     <li><a href="branch?b=Edinburgh" onmouseover="M.mapshow(3);" onmouseout="M.maphide();">Edinburgh</a>
     <li><a href="branch?b=Glasgow" onmouseover="M.mapshow(6);" onmouseout="M.maphide();">Glasgow</a>
     <li><a href="branch?b=Liverpool" onmouseover="M.mapshow(8);" onmouseout="M.maphide();">Liverpool</a>
     <li><a href="branch?b=London" onmouseover="M.mapshow(0);" onmouseout="M.maphide();">London</a>
    
     <li><a href="branch?b=Manchester" onmouseover="M.mapshow(2);" onmouseout="M.maphide();">Manchester</a>
     <li><a href="branch?b=Newcastle" onmouseover="M.mapshow(9);" onmouseout="M.maphide();">Newcastle</a>
    </ul>
    
    <div id="map">&nbsp;</div>
    Vic
    God Loves You and will never love you less.
    http://www.vicsjavascripts.org/Home.htm
    If my post has been useful please donate to http://www.operationsmile.org.uk/

  6. #6
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,373
    Thanks
    77
    Thanked 3,421 Times in 3,382 Posts
    Blog Entries
    12

    Default

    Here's a demo of the the first solution, refined a bit to take care of .png in IE 6:

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <title>UK Map Example</title>
    <base href="http://examples.tobyinkster.co.uk/map/">
    <style type="text/css" media="screen,projection">
    #map {
    position: relative;
    width: 297px;
    height: 388px;
    background-image: url('uk_map.png');
    }
    
    .marker {
    position: absolute;
    display: block;
    background-image: url('marker.png');
    width: 32px;
    height: 32px;
    margin-left: -16px;
    margin-top: -16px;
    }
    
    #London {
    left: 248px;
    top: 320px;
    }
    
    #Birmingham {
    left: 200px;
    top: 270px;
    }
      
    #Manchester {
    left: 200px;
    top: 235px;
    }
      
    #Edinburgh {
    left: 195px;
    top: 135px;
    }
    
    #Cardiff {
    left: 170px;
    top: 310px;
    }
      
    #Belfast {
    left: 115px;
    top: 180px;
    }
    
    #Glasgow {
    left: 165px;
    top: 140px;
    }
    
    #Douglas {
    left: 152px;
    top: 200px;
    }
    
    #Liverpool {
    left: 184px;
    top: 234px;
    }
    
    #Newcastle {
    left: 225px;
    top: 175px;
    }
    
    </style>
    <!--[if lt IE 7]>
    <style type="text/css">
    .marker {
    background-image: url(nothing);
    filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://examples.tobyinkster.co.uk/map/marker.png');
    cursor: hand;
    }
    </style>
    <![endif]-->
    </head>
    <body>
    <div id="map">
    <a href="London.htm" id="London" class="marker"></a>
    <a href="Birmingham.htm" id="Birmingham" class="marker"></a>  
    <a href="Manchester.htm" id="Manchester" class="marker"></a>  
    <a href="Edinburgh.htm" id="Edinburgh" class="marker"></a>
    <a href="Cardiff.htm" id="Cardiff" class="marker"></a>  
    <a href="Belfast.htm" id="Belfast" class="marker"></a>
    <a href="Glasgow.htm" id="Glasgow" class="marker"></a>
    <a href="Douglas.htm" id="Douglas" class="marker"></a>
    <a href="Liverpool.htm" id="Liverpool" class="marker"></a>
    <a href="Newcastle.htm" id="Newcastle" class="marker"></a>
    <!-- other markers can go here -->
    </div>
    </body>
    </html>
    Last edited by jscheuer1; 06-17-2010 at 04:28 PM. Reason: correct IE 6 handling
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

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
  •