Creating Dynamic Image Links

**wrekanyze** · 06-17-2010, 02:06 PM

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!

**vwphillips** · 06-17-2010, 02:48 PM

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

**jscheuer1** · 06-17-2010, 02:51 PM

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.

**wrekanyze** · 06-17-2010, 03:06 PM

Originally Posted by jscheuer1

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>

**vwphillips** · 06-17-2010, 03:44 PM

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>

**jscheuer1** · 06-17-2010, 03:45 PM

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>

Thread: Creating Dynamic Image Links

Thread Tools

Search Thread

Creating Dynamic Image Links

Bookmarks

Bookmarks

Posting Permissions