The code below shows how you can redirect users of Internet Explorer to a different page when they enter your site. Two key points (and pros and cons) to bear in mind:

1. This is a JavaScript solution
2. It works irrespective of your page content (meta-refresh is more buggy in this respect)

If you research this problem, you'll find a lot of forum responses saying 'you don't want to do that' (which REALLY annoys me...they wouldn't ask if they didn't want to!) and a lot of suggestions that simply don't work or are too buggy. And of course you'll also get lots of people suggesting the standard meta-refresh technique.

My problem was as follows: When you load this blog via the blog homepage, it runs a perl script to pull the content out of my database and passes a few variables along the way, making the URL look a bit messy. So a year or so ago I decided to but the blog in a 100% iframe and load it from there. This works fine in Firefox and everything works as normal, but in IE, it won't show anything on the page until the iframe is fully loaded - meaning loading times can be up to a minute.


Diagram showing the redirect system for this blog

This is obviously a major issue, so to get round it, I decided it was best to send IE users to the perl script directly, but leave others with the slightly nicer iframe system. Any permalink / individual story will use its proper url and all page titles are migrated back to the source frame, meaning the system is relatively problem-free on non-IE browsers.

So, here's my foolproof* way of redirecting IE users only - just bung this code within your tag and you're in business:

 <script type="text/javascript">
  if(navigator.userAgent.indexOf('MSIE') > -1){
  window.location = "REDIRECT_URL_HERE"}
 </script>
 

*I haven't tested it fully, but everything I've thrown at it works fine.

Oh and one more thing - in the second sentence of this post I used the phrase "bear in mind", which I rarely do. I usually refrain from writing it as I can never work out whether it is "bear" or "bare" - but I finally looked it up...let's hope I remember the answer!

That's An Idea: Bear / Bare in Mind
 

I decided to tinker around with StreetView and make my own client, with a number of tools not available on the official site. I've developed a system that chooses a random location in the south of Edinburgh and allows you to explore it.

Although I made this a few weeks ago, it's taken me a while to write it up. I've testing out a new system for projects where some of the more technical details are hidden until you click to expand. Sorry for the delay, but hope it works!

The following code highlights a few excerpts from the StreetView client above, but certainly isn't comprehensive - for that, just check out the source code. First off, you need to declare your variables: var panoClient; var map; var panorama; var currentYaw = 180; var currentPitch = 0; var timer; var marker; var guyIcon; var mapCentre = "55, -3";   Next up, we need to create a basic StreetView client and panorama to display and parse the data [note the ¶ symbol shows an unintentional line break]: panoClient = new GStreetviewClient(); panoClient.getNearestPanorama(mapCentre, showPanoData);   panorama = new GStreetviewPanorama ¶ (document.getElementById("pano"));   Then the panaroma div needs to be sent a location, yaw, pitch and zoom - in this case, the last three variables are given 'current' values so data can be gathered from the user's selection: panorama.setLocationAndPOV(new GLatLng ¶ (mapCentre), {yaw: currentYaw, pitch: ¶ currentPitch, zoom: currentZoom});   The ability for the client to smoothly rotate the map is gained from only two small functions, one to set the parameter changes and one to set the timer changes. These values can be tinkered with to change the speed and movement of the rotation. function spiralslow() { currentYaw += 0.75; panorama.panTo({yaw:currentYaw, pitch:currentPitch}); }   function spinslow() { clearInterval(timer); timer = window.setInterval (spiralslow, 50); }   In order to stop the rotation at any point, a simple stop function is created that resets the timer to zero: function stop() { clearInterval(timer); }   Finally, you can set up the marker icon to look like the little StreetView man used on the Google Maps site. Other sites may well have missed out the .shadow and .shadowSize lines, but without these the marker will be given an extra shadow - the PNG file for this marker has a shadow in it, so you need to set the default shadow to 0 to end up with it looking right: guyIcon = new GIcon(G_DEFAULT_ICON); guyIcon.image = "http://maps.google.com/intl/en_us/¶ mapfiles/cb/man_arrow-0.png"; guyIcon.transparent = "http://maps.google.com/intl/¶ en_us/mapfiles/cb/man-pick.png"; guyIcon.shadow = "http://maps.google.com/intl/en_us/¶ mapfiles/cb/man-pick.png"; guyIcon.shadowSize = new GSize(0.0, 0.0); guyIcon.imageMap = [26,13, 30,14, 32,28, 27,28, 28,36,¶ 18,35, 18,27, 16,26, 16,20, 16,14, 19,13, 22,8]; guyIcon.iconSize = new GSize(49, 52); guyIcon.iconAnchor = new GPoint(25, 35); guyIcon.infoWindowAnchor = new GPoint(25, 5);   So that's some of the key functions in this StreetView client - take a look at the source code if you want to find out more. The above code presumes some knowledge about embedding Google Maps, but it's all relatively simple stuff that can be picked up in numerous online tutorials.

- The StreetView Icon doesn't show view direction - Each random view is calculated in JavaScript, within a bounding box - The Panorama function helps find the nearest StreetView - Google Maps Blog: StreetView Panaromas - Google Maps API: Street View Objects - Solving StreetView Issues in IE

 

Showing and hiding table rows onClick can be a really useful feature for a webpage - it allows a small amount of data to be displayed on the page by default whilst the page can instantly be expanded by the user. This process can be repeated allowing each section of a webpage to be expanded with the user's discretion - see my About Page for an example of the system in action.

Sure, this can be a useful feature - but it's nice to jazz it up a bit with some image work. As you can see using the link above, one way is to have image rollovers on the clickable sections. This not only looks good, but alerts the user that the image has a function. So we need two sepearate JavaScript files to power this system - I'll link to them below.

So, firstly we need to link to these JavaScript files in the <head> of our HTML document:

 <SCRIPT LANGUAGE=JavaScript SRC="JSFX_FadingRollovers.js"
  TYPE="text/javascript"></SCRIPT>

 <SCRIPT LANGUAGE=JavaScript SRC="showHide.js"
 TYPE="text/javascript"></SCRIPT>
 

Secondly, we need to set up two CSS classes to style the document:

 <style type="text/css">
  .bodylinks {text-decoration: none; color:#333232;
              font-family:Verdana; font-size:13px;}
  .versiondata {padding: 15px;}
 </style>
 

Now in order to get the clickable sections looking nice, design images to use making sure they have a 1px border around the top and sides of the image. Design a rollover image in the same way, and make your clickable table row dimensions the same as these images (in the example at the bottom, I've used image dimensions of 400x34).

Once the images are saved, you need to set up the rollover behaviour, again putting the code in the <head> of our HTML document - The first term in quotes is an ID for the rollover (in this case, img1 and img2) and the next term in the location and name of the rollover image:

 <SCRIPT LANGUAGE="JavaScript"> 
  FadeInStep=10; FadeOutStep=5;
  JSFX.Rollover("img1", "1_over.jpg");
  JSFX.Rollover("img2", "2_over.jpg");
 </script>
 

We now need to make a background image for the data cells of the table - it only needs to be 1px high and the width of your table (in this case, 400px). Make sure it has a one pixel border at each side (matching your image border) and a light background colour making up the rest of the image. You also need to make a 1px square GIF matching your border colour - this is used to make the bottom border line of your clickable images. In this way, we can guarantee there is always a 1px border around everything, whether it's being shown or hidden. In my example, the background image is called 'version_data.jpg' and the border file is called 'dark_line.gif'.

Now we have everything ready to go, we just need to code the table itself, calling up both out JavaScript classes. Set up a table as normal, making its width match that of your images. The set up the first clickable table row referencing the show/hide script:

 <tr id="trOne" onClick="FuncShowHideOne()">
 

Then set up your table cell, referencing your clickable image and the rollover ID set up earlier, finishing by closing your table row:

 <td background="1.jpg" height="34">
  <a href="#null" onMouseOver="JSFX.fadeIn('img1')"
   onMouseOut="JSFX.fadeOut('img1')">
  <img src="1.jpg" width="400" height="34"
   name="img1" class="imgFader" border="0"/></a>
  </td></tr>
 

Finally, you need to set up the row that can shown and hidden. In this example, the row will start off hidden, but to show it by default just remove the bit of style code:

 <tr id="hideShowOne" style="display:none">
  <td class="bodylinks"
  background="version_data.jpg">
  <img src="dark_line.gif" width="400" height="1"/>
  <div class="versiondata">DATA</div></td></tr>
 

So, that should be it. I admit it looks a bit complicated on here, but once you've mastered the system, it's really simple to replicate and gives great results. I've attached a ZIP file below with all the necessary scripts, files etc so you should be able to edit mine directly if you so wish - just open the index.html file and away you go! And just to finish off, here's the working version that all the code above was for:



All files for ShowHide system (ZIP)

 

I've been a user of Twitter for a while now, but never quite got into it like some. As far as I can tell, it is essentially the same as a Facebook status (yep, I use Facebook too). It can be a more powerful tool if used frequently and with a large 'fanbase' or social network behind it, but that takes a bit more effort and commitment.

It is commonly talked about in reference to the many celebrities who use it, allowing them to communicate directly (and more personally) with their fans. But the feature that has always impressed me the most is the ability to update your status with your mobile phone. Once registered, you just add the Twitter number to your phonebook and then whatever you text to this number added as a tweet (a twitter post).


An example of a Twitter page - Often though, the RSS feed is more useful.

This is useful but not revolutionary, however it nicely links the web and mobile arenas, something that phone companies still haven't really managed (well, not in a wide-ranging way anyway). Twitter also automatically creates an RSS feed and I already manipulate this by importing my recent statuses into my homepage - using Perl to process and format it all (you could use x-path but it's HORRIBLE.)

This got me thinking - what if I set up a system where my website could actually be managed via this mobile phone / twitter combo? This would allow some pre-set admin tasks to be performed from anywhere in the world and at a moment's notice. And as my site automatically checks twitter with every page load - the results would be instantaneous. So I set up the following system to put this into practise:


A diagram of the loop set up to control my site by mobile phone.

Now all I have to do is to text Twitter using my mobile with the message "website off _____", giving a reason for the downtime and my homepage stops displaying its normal content and instead shows the following message - with the reason displayed in blue.


The message displayed as a result of sending a "website off" message.

Of course, these days you can get phones that have good web browsers and you could log in and make all these changes directly - but mobile coverage is significantly better than mobile broadband coverage (in the UK anyway) so this route gives a simple, no-nonsense approach to mobile web management!
 

Ok, so website statistics aren't exciting. Everyone knows that. But, pretty much every client I've worked for requires them and the requests are getting more specific ("How many people downloaded this video?", "How many people opened this document AND saved it to the computer?").

So I give them what they want, but try to do it in a mildly stylish way - stats don't have to look boring as well. Website stats used to centre around "hits" but thankfully most people are now aware of the different type of statistics produced - hits, unique hits, page loads etc. I've always preferred my stats to show daily unique page loads - This shows how many different people went to your website each day and how many pages they looked at.

My stats are produced dynamically - I made a script to do that - but come out as a colour coded graph as well as a table of numbers [click to enlarge]:



This script can easily be manipulated to produce graphs for web display, giving users an idea of current website use - As you can see from my stats, this blog has gradually getting more popular - with over 2000 unique page loads being reached for the first time a month or so ago...may the rise continue!
 

A client recently came to me with a project to make a set of offline-only webpages that could be taken around the country on a memory stick, taking a service to people with no internet connection. This wouldn't have been too difficult except that they wanted a form-based service that would run offline without the need to install any software.

In other words, I had to create a form system that was processed without using a cgi-bin / perl scripts. The logical solution was using Javascript to handle the form data.

Below is a basic example of this system, passing one variable across two webpages. In this case, the data is preceeded by a '?' in the URL string. Start by putting the following code in the page you are passing the data to:

 <FORM NAME="form">
  <INPUT TYPE="hidden" NAME="pass" SIZE="35">
 </FORM>

Then, simply add this javascript code where you want the variable printed into the docuement. In this case, I've put the data inside a result tag:

 <SCRIPT LANGUAGE="javascript">
  var locate = window.location
  document.form.pass.value = locate
  var text = document.form.pass.value
  function delineate(str){
  theleft = str.indexOf("?") + 1;
  return(str.substring(theleft));
  }
  document.write("<result>"
  +delineate(text) +"</result>");
 </SCRIPT>

And there you have it. In this simple example, you pass the data after a '?'. Say your data is "56.887" and the page you are passing it to is called "results.html", then link it to "results.html?56.887" to send the data. Of course, this technique can be expanded considerably to send more than one form field, but thought it best to explain it simply!
 

The lack of support for invisibility in PNG files across web browsers is a constant irritation for web designers. It's amazing that a proper solution still hasn't been sorted, with browsers hopping in and out of support for this function.

It seems simple enough...you want to create high quality graphics for a website that can be any shape yet blend in with any background. Curved tables, free-standing text, any shape that isn't a rectangle...there's a lot of scope for this function to be useful. And then, once created, the graphics for a website would be independent of any stylistic changes to the background. A bit like the situation we currently have with GIFs, but allowing good quality graphics.

So - after a lot of searching - I've come across what I think is the best solution to this problem. Of course, modern web browsers should display (or not display!) invisibility in PNGs without an issue, but you don't need to go back far to realise this solution hasn't been in existence long.

So, to solve the problem, I found a solution involving a link to an HTC file and then setting div tags for a background png image and bunging it in a table. I'll explain this below, but first I'll show you the problem. Below is the same image shown twice, on top without any HTC file and below with the link set up. If both images show invisibility, then you're using an up-to-date browser, but try opening this page in another piece of software and you may well see why this problem is so frustrating!





So - how is this fix applied? First, you need to get your hands on the HTC file (right click and Save As).

Then put the following lines of code in the <head> of your document, changing the code to represent your png file(s). For multiple files, just repeat with a new class name:

 <style type="text/css">
  div.classname { background-image: url(image.png) }
  img,div { behavior: url(iepngfix.htc) }
 </style>

Now, it's just a case of wrapping a table (with the dimensions of your image) with your div class, like so:

 <div class="classname">
  <table width="" height=" cellpadding="0" 
   cellspacing="0" border="0"><tr><td></td></tr>
  </table>
 </div>

And there we have it - perfectly displaying PNG files with invisibility across all browsers.
 

Tagging images is a practice seen more and more across the internet as social networking sites have allowed vast networks of people to share media content. Tagging via social networking usually centres around ideentifying individuals, but other uses are cropping up all the time. On Flickr, for example, landscape features and photographic styles are often highlighted using tags and image maps, sometimes even adding narrative to the photo itself. So you may be wondering, how hard is it for me to make my own tags / image maps? Well, the answer is: not very hard at all - it's just simple CSS. Below is an example showing a photo from the coast of Argyll, with 3 regions 'tagged'. I've added a bit more than CSS to this example by making 3 overlay images (in black and white with a label) that appear on a mouseover event. These images are simply included in the CSS as a hover event. First up, here is a working example of tags and tag boxes - with mouseover events:

Now, I'm sure you'd like to know how it's done, so let's get cracking! I'll show the code for one box, rather than repeating it for all three, but the values to change are pretty obvious, just make sure you rename the CSS class (say from, #tag1 to #tag2) throughout the document. First up, define your image in your CSS - the image will be defined as a background for a div element. Remember to change the file name and dimensions when using this example yourself: #image { position: absolute; width : 500px; height: 333px; background: url(filename.jpg) top left no-repeat; } Next up, you need to define the tag box itself, in this case adding a hover event as well: #tag1 { position: absolute; width : 85px; height: 180px; left: 93px; top: 131px; border: 1px dotted #FFFCAB; } #tag1:hover { width : 85px; height: 180px; left: 93px; top: 131px; border: 1px dotted #FFFFFF; background: url(imagemap_1.jpg) top left no-repeat; z-index: 100; } All the above code should be placed in a CSS declaration in the <head> of your document. The final step is to place some code in the <body> of your document that will display the image and tags: <div style="display: none;"><img alt="" src= "mouseover_imagename.jpg" /></div> <div id="image"><a id="tag1" href="#" title="title"> </a></div> And there we have it, you can now make your own tag boxes on top of an image - bellissimo!

 

Well, it's been over 8 months since the company blog was set up and since then I've made it to 50 posts, hopefully providing some useful stuff along the way! I thought I'd celebrate this benchmark my launching a new Beats! Design service: 2 Degrees. It's called 2 Degrees as it's a search tool that brings back results seperated from your original term by 2 degrees of seperation.

This isn't a hugely serious service and isn't useful when a specific result is desired, but more designed to provied a link to a new website vaguely related to one you know of before. For example, if you enter "Sony" into 2 Degrees, the URL it brings back for you is "www.epson.co.uk", as the initial search harvested keywords including 'products' which was pumped back into the search to bring a different commercial supplier.



So you can see how 2 Degrees works, by entering one term, you will be taken to another site that links in some way to your original search. This link may not always be that obvious, but that's the joy of the service, a sense of exploration! And as search results change with the times, so will 2 degrees, always up-to-date and ready! The background service runs a script that connects to Microsoft Live Search, bringing back results and requesting results before being displayed in-line on the 2 Degrees results page.

Enjoy playing around with it anyway and thanks for visiting, another 50 posts here we come!

2 Degrees: Search Results with Seperation
 

In order to highlight hyperlinks within blog posts and to distinguish them from other links on the blog (tags, topics, blog title etc), I've made inline links blink with an animated dotted line below them.

There are two parts to this method. You need to set up the CSS for the blinking links and distinguish these links from all other links on the page (especially important when using general a:link type CSS).

So, firstly you may well have set up a CSS class that covers the text where the links will be (in this case, all hyperlinks within a blog post message). In this example, we're calling the class 'blinks':

 .blinks {font-family: Tahoma; color: #DDDDDD; 
          font-size: 12px;}

A complication will come if you are using general hyperlink style code within your CSS, such as this:

 a:link {text-decoration:none; color:#B99D73}
 a:visited {text-decoration:none; color:#abb7ba}
 a:hover {text-decoration:underline; font-weight:bold;}
 a:active {text-decoration:underline; font-weight:bold;}

In order to override the general hyperlink styles, you have to set up hyperlink styles specific to your class. This is also where you add the code to make the links blink. To do this, I'm using a tiny animated GIF and setting its location underneath the link text:

 .blinks a:link {
     font-family: Tahoma; 
     color: #DDDDDD; 
     background: url(Images/line.gif) repeat-x bottom left;
  }

Feel free to use this image / code on your own website - it's good to share!

Download the flashing line image

All you need to make sure now is that the links you want to blink are within the class you have defined it in. This class may cover all the text of the message, or just the link itself, as in the following example:

 <span class="blinks">
 <a href="../blog/Images/line.gif">link text</a>
 </span>

Enjoy!
 

As shown in previous posts for this blog, code can be displayed in a seperate box (using a different font, such as a mono-spaced font) to allow users to easily recognise and understand it when published in HTML.

This is a very simple example showing a small piece of code and how this technique can work. As the technique uses code itself, the following examples will show how it can be done as well as the result - a 2 in 1 bonus!

First, set up the CSS for the "PRE" style class to be put into the HEAD section of the HTML page. This is the class you will use for the code box and defines all its style properties. As can be seen, this sets up a light orange box, with darker orange dotted border and a suitable size mono text:

 <style type="text/css">
  PRE.listing {
   margin-left: 10px;
   margin-right: 10px;
   border: solid 2px #e69834;
   border-style: dotted;
   background-color: #EADFD0;
   color: #663300;
   width: 480px;
   font: Verdana;
   }
 </style>

Now the CSS is set up, simple wrap any text in the BODY section of the HTML page with the PRE class, in this case we have called it 'listing':

 <pre class=listing>
  YOUR CODE HERE
 </pre>

Then this text will be shown in a code box. Be careful using ASCII characters in HTML, these will have to be converted to their relevant formats, see this link for help: ASCII Characters in HTML
 

After exploring techniques for showing multiple-layer images on the web, it occurred to me that this technique could be applied to add content to an image by zooming into higher detail areas.

The following example is quite self-explanatory, just click the labels to get a zoomed in image at full resolution:
 

 

Well after discussing the possibilities of multi-layer photographs using JavaScript and HTML, I felt the system could be quite effective with a bit of fine-tuning.

The following an image taken from Nelson's Monument in Edinburgh and 5 layers are included and are toggled using the little key in the top right hand corner. The same applies for the image below, which is of the coastal view from Culross, Fife but this uses a blog key toggle as an alternative. I may use this system in the future as it is nice and simple and doesn't require any plugins, such as Flash (although does require a JavaScript-enabled browser - but they're pretty common!).

The letters in the key refer to: (c) colour image, (s) sepia image, (b) black and white image, (a) artistic image, (i) inverted image.
 

 

 

After many, many hours of fine-tuning, I've created a nice little system for displaying multiple photographic layers withing one image. This is great when you have multiple versions of one image (say a colour and b&w copy) and want to be able to easily flick between layers.
 
This uses a relatively simple piece of JavaScript as well as HTML image maps, but the reason it took so long to perfect was because of problems using this script across different internet browsers. Instead of setting the multiple layers to invisible div tags, they have to have the setting 'display:none'. This allows the layers to be pre-loaded without the HTML displaying a blank space where the image should be. Secondly, a lot of issues were encountered when using multple instances of the same script on one page, but again these issues have been resolved.
 
The first example shows a black & white image and a colour image of Napier University's Craighouse campus:
 

 
The second example shows a different image of the same campus, but this time using four layers with different tints applied in Photoshop. This allows the effects of various photographic filters to be reviewed:
 
 

 
The final example shows a slightly more intuitive use of this code, using a little bit of image design to alter a night time photo by adding 'lighting' to an image. Clicking the lamp will turn on the lights and increase the image brightness:
 

 
At the moment, I'm going to leave this example without script details. It took so long to perfect that I can't face explaining all the code right now, but feel free to view the page source to have a wee look at the process. I'll update this post with detailed instructions in the next few days!
 

As you may have noticed, Google have recently added a terrain map layer to their mapping applications. In order to add this layer to embedded mapping and also to have it as a layer option (like on maps.google.co.uk), a few changes need to be implemented.



To start with, you need to make sure your javascript link has the most recent version set. This is the same string that contains your google map key. Just before 'key=' you should see 'v=' - this needs to be set to 'v=2.x' to allow all new code in version 2 as it progresses, including the addition of a terrain layer:

 <script src="http://maps.google.com/maps?
  file=api&amp;v=2.x&amp;key=YOURKEYHERE" 
  type="text/javascript">
 </script>
 

Next, when you set up your map, include the following lines of code. These set up the new terrain layer, the layer button and add the old 'hydrid' layer as an option of the 'satellite' button:

 map.addMapType(G_PHYSICAL_MAP);
 var hierarchy = new GHierarchicalMapTypeControl();
 hierarchy.addRelationship(G_SATELLITE_MAP, 
 G_HYBRID_MAP, 
 null, true); map.addControl(hierarchy);\n";
 map.setCenter(new GLatLng(LAT, LONG), ZOOMLEVEL,
 G_PHYSICAL_MAP);
 

We've added the terrain layer on our UK Webcam Map - It loads as the default map layer...take a look and see what you think!
 

Although PHP is gradually taking over where database-driven websites are concerned [link: PHP Overtaking Perl], there are still may reasons to use perl. It is faster for one thing and has simpler complex functions than php [link: PHP in contrast to Perl].

I'm not advocating either language, especially as what language one uses is often down to experience and tradition, more than anything else. What I will show here is how perl can be used to perform a function normally easier to perform in PHP: creating content in an HTML document from a database.

In this simple case, I am going to show how to set up a changing hyperlink that links from an HTML page. In PHP, the html would be created (as a .php file) and the link retrieved from the database as the page writes. HTML pages can contain database-driven Perl content using iframes, but this isn't the best method for a simple hyperlink.

The following code is currently in use on the Beats! Design webpages and can be seen at the bottom of every page. the image below shows the bottom-right of each page, where a little square containing musical notes can be seen. This is our 'hot link' - a particular website that has recently gained out attention...which we wanted to change easily (for all pages) using a simple database form:



The way we have used Perl to make this link database-driven is to link to a Perl file with a 0 second redirect. The Perl file calls up the database to get the latest 'hot link' and redirects instantly to this page. This way, no iframes are needed and the link can be changed once and instantly applied to all pages.

The perl file calls up the database and retrieves the link, then sets this to a variable ($url) and this is then replaced in the following script. This script sets up a very basic HTML page to redirect instantly to this link:

 <html><head><title>Redirecting...</title>
  <meta http-equiv="Content-Type" content="text
  /html;charset=iso-8859-1">
    <style type="text/css">
     <!--
     body {background-color: #000000;}
     -->
    </style></head>
  <meta http-equiv="REFRESH" content="0;url=$url">
 <body></body></html>
 

So that should explain how Perl can still be used for jobs more naturally done in PHP - and don't forget to click our 'hot link' from time to time to see an interesting website!
 

One of the greatest omissions from the Google Maps API / Documentation is the ability to draw circles onto maps.

Despite talk of a GPolyCircle, so far nothing has appeared. So in the meantime, use the following script example to get a nice circle drawn onto your google map, simply by selecting the location of its center and it's diameter in kilometres. Styles can also be changed, to alter the width and colour of the line.

In the following map, a number of circle examples are shown, varying in colour (green, red, blue), purpose (simple circles and targets) and thickness:



This script is quite simple, but care needs to be taken to set it up correctly. All the code should go in the function load() section of the Google Maps JavaScript on you page (see this page's source for an idea).

 function mapCircle(lat,lng,radius)
   {
    var points = [];
      x = lat;
      y = lng;
      r = radius;
      r2 = radius*(1.74);
       for (var i = 0; i < 600; i++) {
        x1 = x+r*Math.cos(2*Math.PI*i/599);
        y1 = y+r2*Math.sin(2*Math.PI*i/599);
        points.push(new GLatLng(x1,y1));
       }
     return points;
    }
 

This should be followed immediately by the code to create the line of the circle. This code should be repeated for every circle you want to display:

 var diameter = 6; //circle diameter in kms
 var radius = diameter/220; //ignore
 map.addOverlay(new GPolyline(

 //mapCircle(lat, long, ignore,), colour, width, ignore;
 mapCircle(55.9557,-3.1884,radius), "#666699",2.8,0.8));
 

That's pretty much it. However, to make sure the lines draw correctly in IE, be sure to replace your <html> tag with the following:

 <html xmlns="http://www.w3.org/1999/xhtml" 
 xmlns:v="urn:schemas-microsoft-com:vml">
 

 

If you create a basic HTML page, then you will find the automatic margins are places around the contents of the document body.

If you start a table or image from the first line of HTML code, there will be a small gap displayed between this image and the top of the page as margins are automatically added by most browsers.

However, if you look at the top of this webpage, you will see that the graphics start from the very first line of the page. This is evident where the strings holding up the trumpet meet the top of the page.

This applies to the left, right and bottom margins as well, although this is less obvious here. The code is really simple to get rid of margins in all main browsers - simply copy and paste this code into the <head> section of your document.

 <style type="text/css">
   v:* {behavior:url(#default#VML);}
   html, body {width: 100%; height: 100%}
   body {margin-top: 0px; margin-right: 0px;
         margin-left: 0px; margin-bottom: 0px}
 </style>
 

 

This is a little JavaScript tutorial exmplaining a simple technique to allow image rollovers with a fade effect. This works by creating two images, the main image (see 'IMAGE' in script) and a rollover image (see 'IMAGE_OVER in script).

The script then fades between these images using a dark colour fader:



You can download the image rollover script here.

Either save this and link to it on your ftp server, or replace SOURCE with
http://www.beatsdesign.co.uk/Scripts/JSFX_FadingRollovers.js

The first code block below should go into the <head> section of your html document. In this instance, we are only applying this to one image, so this needs to be given a NAME (when using multiple images, just make different names for each). Then replace 'IMAGE_OVER' with your rollover image source:

 <script language=JavaScript SRC="SOURCE" type="text/
  javascript">
 </script>
  <script language="JavaScript">
   FadeInStep=10;
   FadeOutStep=5;
   JSFX.Rollover("NAME", "IMAGE_OVER");
  </script>
 

Then, create a table within the <body> section of your html document. The important concept here is that the main image ('IMAGE') must be the background of the table cell it is in - and therefore the cable cell has to be the same size of the image.

The script below shows a table set up with one cell. For multiple images, repeat <tr> (new row) and <td> (new column) tags where necessary.

Make sure the 'NAME' is the same as for the rollover image set up earlier:

 <table cellspacing="0" cellpadding="0" border="0">
  <tr>
   <td background="Images/IMAGE">
    <A HREF="TARGET" target="_bottom"         
     onMouseOver="JSFX.fadeIn('NAME')" 
     onMouseOut="JSFX.fadeOut('NAME')">
    <img name="NAME" class="imgFader"
      src="IMAGE" height="HEIGHT" 
      width="WIDTH" border="0">
    </A>
   </td>
  </tr>
 </table>

That's it! Please remember to replace all the references in the above code ('NAME', 'IMAGE', 'IMAGE_OVER', 'SOURCE') with the relevant data, as described above.
 

I recently stumbled across a guy who makes images via scripting languages - creating random computer-generated images from organic input forms and symbols.

These techniques have only recently been easily implemented via graphics programs. As he states:

"I was already pretty comfortable with languages like Perl and Python and JavaScript and DHTML, so suddenly I had this combination of vector-based design tool and programming environment. And everything fell into place."

Click here to read his profile on Apple Pro.