I decided today would be a good day to start my interactive map! I was working through a tutorial, so I figured it would be a nice relaxing and constructive way to spend my day and do some work.

The tutorial I was using was this:

Making an Interactive Picture with jQuery « Build Internet

Here is the image I will be using to be my map. I made this on photoshop and my photoshop skills aren’t great, but it does the job!

map

Following the tutorial and making changes where necessary, this is the code and css for what I came up with:

<div id=”map”>

This is where I placed the image of the map.

<img class=”imgsize” src=”images/map.jpg” alt=”interactive map”>

Each one of the following 6 divs are the same, except by id. Each div contains a button (images/more.png) which will be the base for the hover functions. The span section shows what will be seen when you hover over, and this is made possible using the javascript below all of this html. I edited it slightly by adding (font-style=”background-color:white;”) so that the text that came after would have a white backdrop and therefore be visible. This was repeated 6 times, once for each aspect of the map I was highlighting.

Each one has this picture in it to define what the more button will look like:

more

<div class=”more” id=”goldseat”> <!– id refers to specific item –>
<a href=”#”><img src=”images/more.png” alt=”more”/></a> <!–defines button image, don’t change link –>
<span><font style=”background-color:white;”>GLD1</font></span> <!– The caption for the button –>
<span style=”white-space: pre;”> </span>
</div>

<div class=”more” id=”goldseat2″> <!– id refers to specific item –>
<a href=”#”><img src=”images/more.png” alt=”more”/></a> <!–defines button image, don’t change link –>
<span><font style=”background-color:white;”>GLD2</font></span> <!– The caption for the button –>
<span style=”white-space: pre;”> </span>
</div>

<div class=”more” id=”grandstand”> <!– id refers to specific item –>
<a href=”#”><img src=”images/more.png” alt=”more”/></a> <!–defines button image, don’t change link –>
<span><font style=”background-color:white;”>EGS</font></span> <!– The caption for the button –>
<span style=”white-space: pre;”> </span>
</div>

<div class=”more” id=”grandstand2″> <!– id refers to specific item –>
<a href=”#”><img src=”images/more.png” alt=”more”/></a> <!–defines button image, don’t change link –>
<span><font style=”background-color:white;”>WGS</font></span> <!– The caption for the button –>
<span style=”white-space: pre;”> </span>
</div>

<div class=”more” id=”economyseat”> <!– id refers to specific item –>
<a href=”#”><img src=”images/more.png” alt=”more”/></a> <!–defines button image, don’t change link –>
<span><font style=”background-color:white;”>ECO1</font></span> <!– The caption for the button –>
<span style=”white-space: pre;”> </span>
</div>

<div class=”more” id=”economyseat2″> <!– id refers to specific item –>
<a href=”#”><img src=”images/more.png” alt=”more”/></a> <!–defines button image, don’t change link –>
<span><font style=”background-color:white;”>ECO2</font></span> <!– The caption for the button –>
<span style=”white-space: pre;”> </span>
</div>

The next lines of code explain the box that comes up when you click any of the buttons on the map. Each div above had to have a corresponding div below to show what would come up individually for each button.

<div id=”infobox”>

This is the image for the close function which I borrowed from the demo:

close

<span class=”close”><a href=”#”><img src=”images/close.png” alt=”close”/></a></span>

<br/>

I named each of the following divs in accordance to what they were representing. This simply consists of a title, and 4 list items for crowd capacity, senior ticket prices, adult ticket prices and junior ticket prices. I repeated this format for every div, gradually getting cheaper in price for the smaller capacity stands.

<div id=”gs1_info”>
<br/>
<p><br/>
GOLDSTAND 1</p>
<br/>
<ul>
<li>Capacity: 20000</li>
<li>Senior: £45</li>
<li>Adult: £50</li>
<li>Junior(12 and under): £35</li>
</div>

<div id=”gs2_info”>
<br/>
<p><br/>
GOLDSTAND 2</p>
<br/>
<ul>
<li>Capacity: 20000</li>
<li>Senior: £45</li>
<li>Adult: £50</li>
<li>Junior(12 and under): £35</li>
</div>

<div id=”gst1_info”>
<br/>
<p><br/>
GRANDSTAND 1</p>
<br/>
<ul>
<li>Capacity: 15000</li>
<li>Senior: £35</li>
<li>Adult: £40</li>
<li>Junior(12 and under): £30</li>
</div>

<div id=”gst2_info”>
<br/>
<p><br/>
GRANDSTAND 2</p>
<br>
<ul>
<li>Capacity: 15000</li>
<li>Senior: £35</li>
<li>Adult: £40</li>
<li>Junior(12 and under): £30</li>
</div>

<div id=”eco1_info”>
<br/>
<p><br/>
ECONOMY 1</p>
<br/>
<ul>
<li>Capacity: 10000</li>
<li>Senior: £25</li>
<li>Adult: £30</li>
<li>Junior(12 and under): £15</li>
</div>

<div id=”eco2_info”>
<br/>
<p><br/>
ECONOMY 2</p>
<br/>
<ul>
<li>Capacity: 10000</li>
<li>Senior: £25</li>
<li>Adult: £30</li>
<li>Junior(12 and under): £15</li>
</div>

</div>

This is the script that accompanies the html. I had to change the id functions in the last few lines of code so that it linked in with the divs I had already created. Being quite illiterate when it comes to javascript, I can’t really explain in detail what it all does specifically, but what I can say is that the code below is responsible for all of the animations and functionality to do with the interactive aspects of the map. 

<script>
//Blur Links (Prevents Outline)
$(‘a’).click(function() {
this.blur();
});
//Hide all item descriptions in the info box
$(“#infobox > div”).css(“display”, “none”);
//Call in the info box
$(“.more a”).click(function(){
$(“#infobox”).animate({bottom: ‘233px’ }, 300);
$(“#fade_bg”).fadeIn();
return false;
});
//Expand more info button on hover
$(“.more”).hover(function(){
$(this).stop().animate({width: ‘225px’ }, 200).css({‘z-index’ : ’10’});
}, function () {
$(this).stop().animate({width: ’50px’ }, 200).css({‘z-index’ : ‘1’});
});
//Show description for selected item

Although I don’t know much about javascript. I can tell you that the next few lines mean that when you click the more button on any of the divs, the javascript forces the infobox to show up, and then will follow on to explain how when you click the close button on the infobox, the box will disappear.

$(“#goldseat a”).click(function(){
$(“#gs1_info”).show();
});
$(“#goldseat2 a”).click(function(){
$(“#gs2_info”).show();
});
$(“#grandstand a”).click(function(){
$(“#gst1_info”).show();
});
$(“#grandstand2 a”).click(function(){
$(“#gst2_info”).show();
});
$(“#economyseat a”).click(function(){
$(“#eco1_info”).show();
});
$(“#economyseat2 a”).click(function(){
$(“#eco2_info”).show();
});

I also know that this part is supposed to make the background go dim, but no matter how many times I corrected and changed the code, I could not get this feature to work, even though it was working when I first finished the map! Crazy code – this still remains a mystery as to why it’s ‘broken’.

//Remove background, info box and hide all descriptions
$(“#fade_bg, .close”).click(function(){
$(“#fade_bg”).fadeOut();
$(“#infobox”).animate({bottom: ‘-200px’ }, 300, function() {
$(“#infobox > div”).css(“display”, “none”);
});
return false;
});
</script>

Here is the CSS:

#map{
position:relative;

In the tutorial, the picture they used is I think 700px wide. I think this may be why the background dim script doesnt work, as there is nothing else different really. I used a backround colour and a url image together, linking the image at the start of this post to the background of the map div. I set overflow to hidden so that nothing would escape the container and look messy. I did have to alter the text I was using for the more span function as the text was too long on the right side of the map to fit in. I’ve also set the margin-bottom to 30px to keep anything below this at least 30px below the map. This is a feature i’ve used and will keep using to separate my divs.

width:960px;
height:auto;
margin:0 auto;
background:#FFF
url(‘images/map.jpg’);
overflow:hidden;
margin-bottom:30px;
display:block;
}

This is the css for the more button you see on the map. It sets it as 50x50px, as well as for some reason adding the background image as well. 

.more{
position:absolute;
width:50px;
height:50px;
background:url(‘more.png’);
padding:5px;
text-align:left;
overflow:hidden;
}

This is the css for the box that comes open when you click the more button. The javascript controls the animation, but the dimensions and font-family is controlled here. I decided to leave the text as it was because it separated the info box from the rest of the page, a function that would have been aided had the background dim worked properly.

.more span{
position:absolute;
left:60px;
width:160px;
padding:15px 0 0 5px;
color:#000;
font:bold 1em Lucida Grande, Arial, sans-serif;
text-shadow:#000 1px 1px 0px;
}

The infobox that pops up when the more button is clicked is positioned absolutely so that it can be positioned using the controls here. The margin in conjuction with the bottombottom and left functions position the box in the middle when it pops up.

#infobox{
position:absolute;

– When I validated this css, it tried to explain to me that ‘bottombottom’ was not a valid attribute. However, using just ‘bottom’ did not work as it simply sat inside the div at the bottom despite being told to sit -200px below. I’ve checked bottombottom works across all browsers, and even IE understands it so it must be right!!! I can only think that it is supposed to mean ‘underneath’ as in the bottom of the bottom.
bottombottom:-200px;
left:480px;
height:200px;
width:300px;
z-index:20;
margin:0 0 -100px -150px;
background:#FFF;

There is also a border radius of 5px on each corner for aesthetic effect.
-webkit-border-radius:5px;
-moz-border-radius:5px;
border-radius:5px;
}

This css keeps the font styles the same for visited and not yet visited information. 

#infobox a, #infobox a:visited{ 

font:italic 16px Georgia, serif;
color:#555;
text-decoration:none;
}

#infobox a:hover{
text-decoration:underline;
}

The position of the close button is set at 5px from the topof the infobox, and left and right 0. This centers the button in a similar way that a ‘margin:0, auto’ will, and I think I might have to use this method of positioning again at some point.

span.close{
position:absolute;
left:0;
right:0;
top:5px;
}

This is the css for the fabled dimming background. As you can see it is set to fill the entire map with a dim background that has 50% opacity, but it simply does not want to do anything. This code i’ve left in purely in the hope that at some point it might just start working! It has nothing to do with display:none though if you were wondering, that’s just to hide it when it’s not being used.

#fade_bg{
position:absolute;
z-index:15;
width:100%;
height:100%;
background:url(‘images/dim.png’);
display:none;
}

These css functions correspond with the more divs in the html, and position the more buttons for each one. As an example, the goldseat more button is 28px from the top and 265px from the left. This style is repeated 6 times, once for each button there is.

#goldseat{
top:28px;
left:265px;
}

#goldseat2{
top:28px;
left:477px;
}

#grandstand{
top:145px;
left:105px;
}

#grandstand2{
top:145px;
left:775px;
}

#economyseat{
top:360px;
left:265px;
}

#economyseat2{
top:345px;
left:700px;
}

Whilst constructing my map, I found that there were several issues involving responsiveness. Setting the map to width:100% simply wasn’t enough. I looked for a way to make the positioning of the buttons responsive, but aside from using complicated jquery and messy code, I decided it would be easier to use media queries to aid me, although this did mean making 5 separate maps and 5 sets of css code for things that needed to be resized and/or repositioned.

This is one example of a media query I did. The reason the breakpoints are so odd is because apart from the largest sized map, the map would have to be smaller than the container to allow for further shrinkage, otherwise i’d have do a media query for every pixel! The values denoted in the breakpoints are the values where the map just about reaches the edges of the container. 

@media screen and (max-width: 990px) {

For when the browser shrinks to 990px and below (in this instance), the map width will change to 576px. I did not need to add any of the other attributes, as unless they need to change, they will just be sourced from the current browser size or the next available in a larger media query or the standard css in this case.

#map{
width:576px;
}

I had to change the positioning of the infobox so that it stayed in the center of the map and you could still see and interact with the close button.

#infobox{
bottombottom:-50px;
left:288px;
margin:0 0 -150px -150px;
}

Here the delicate positioning of the more buttons changes in every instance. I had to repeat this and the rest for all of the media queries and breakpoints, so that no matter what the browser size is, the map and the buttons will always be in the right place.

#goldseat{
top:6px;
left:155px;
}

#goldseat2{
top:6px;
left:280px;
}

#grandstand{
top:100px;
left:45px;
}

#grandstand2{
top:100px;
left:455px;
}

#economyseat{
top:200px;
left:120px;
}

#economyseat2{
top:200px;
left:400px;
}

}

Here is an image of the finished map when you hover over a button:

map1

And when you click a button:

map2

Advertisements