How to Create a Full Screen Image Map

It’s easy to create an image map, right?
But, what you do when you want your background to be a full screen slideshow?
And you need to set some images above it.


Well, I always say my clients that programmers are like God, everything is possible.
(with time, money, and no IE, of course!)
So, I have to do it and this is the solution I found.

Step 1:
Get jQuery (can be done here: http://jquery.com).
Now a days you use it to everything, we can’t live without it.

Step 2:
If you Google it, you will find some scripts that will help you define a full screen background.
I used supersized, that can be download here:
http://www.buildinternet.com/project/supersized/

Why supersized?
Supersized sets the background as full screen and acts like a slideshow.

Step 2.2:
Important options.
Set “autoplay: 0”, the image only changes on button click.
Set “horizontal_center: 1”, to set the image at the center of the browser.
Set a title in a descending order.

I set a title to know what hotspots I need to show.

[js]
jQuery(function($){

$.supersized({

autoplay: 0, //Only plays on button click
horizontal_center: 1, //Defines the image at the center

// Functionality
slide_interval: 3000, // Length between transitions
// 0-None, 1-Fade, 2-Slide Top, 3-Slide Right,
// 4-Slide Bottom, 5-Slide Left, 6-Carousel Right, 7-Carousel Left
transition: 1,
transition_speed: 3000, // Speed of transition

// Components
// Individual links for each slide
//(Options: false, ‘number’, ‘name’, ‘blank’)
slide_links: ‘blank’,

// Slideshow Images
slides: [
{image: ‘images/backgrounds/Frato-795531.jpg’, title: ‘hotspots_14’, thumb: ‘images/thumb/ambi_795531.jpg’},
{image: ‘images/backgrounds/Frato-794891.jpg’, title: ‘hotspots_13’, thumb: ‘images/thumb/ambi_794891.jpg’}
],

// Theme Options
progress_bar: 0, // Timer for each slide
mouse_scrub: 0

});

});
[/js]

You can see more options on the plugin page.

Optinal Step 2.3:
As you can see, I set some thumbnails with mouse event.
To do this, you need to set the “thumb:” options of the supersized configurations.

Then you set the HTML.
[html]
<div id=”thumb-tray-wrapper”>
<div id=”thumb-back”></div>
<div id=”thumb-tray” class=”load-item”></div>
<div id=”thumb-forward”></div>
</div>
[/html]

And the css. I set it on the supersized.shutter.css

[css]
#thumb-tray-wrapper{width:452px; height:60px; position:absolute;
text-align:center; bottom:58px!important;
left:50%; z-index:3000; padding:0 0 0 32px; margin:0 0 0 -250px;}

#thumb-tray{overflow:hidden; width:427px; height:59px; padding:0;}

ul#thumb-list{width:1500px !important; display:inline-block;
list-style:none; position:relative; left:0px; padding:0 0px;}

ul#thumb-list li{list-style:none; background:none; display:inline;
width:91px; height:46px; overflow:hidden; float:left;
margin:7px 7px; padding:0; display:block !important;}

#thumb-back{left:0;
background:url(‘../img/btn_play.png’) no-repeat 0 0;}

#thumb-forward{right:0;
background:url(‘../img/btn_play.png’) no-repeat 100% 0;}
[/css]

Step 3:
You need to do some changes in supersized.shutter.js.

Befone any image transition, we hide the hotspots, so the user don’t see it moving.

[js]
supersized.shutter.js
beforeAnimation : function(direction){

if(api.options.progress_bar && !vars.is_paused)
$(vars.progress_bar).stop().animate({left : -$(window).width()}, 0 );

/* Update Fields
—————————-*/
// Update slide caption
if ($(vars.slide_caption).length) {
(api.getField(‘title’))
? $(vars.slide_caption).html(api.getField(‘title’))
: $(vars.slide_caption).html(”);
}

// Update slide number
if(vars.slide_current.length) {

$(vars.slide_current).html(vars.current_slide + 1);

/* ADD THIS CODE */
$(“.image_map”).css(“display”, “none”);
$(“.image_map”).css(“visibility”, “hidden”);
/* END ADD THIS CODE */

}
[/js]

Step 4
This step is where the magic happens.

What I do is to get the width, height, top and left of the image.
Then, I calculate the center of the image.
Transform the negative numbers to positive.
Move all the hotspots to the center of the image.
Then get the distance from the center defined in percentage in the html link, like «top=”1%”» and «left=”28%”».

To calculate the distance, I set the percentage from the center and calculate that percentage in pixels.
Example:
Image width = 400px
Image height = 400px
Image center vertical = Image width/2 = 200px
Image center horizontal = Image height/2 = 200px

Horizontal Percentage Distance from center = 20%
Horizontal Distance from center in pixels = Image width – Percentage Distance = 400px-20% = 80px

So, the hotspots is positioned 80px from the center.

After that, you need to see if the hotspot is position to the left or to the right.
To the left you set a negative percentage, to the right, you set it positive.

At this point all the hotspots are at the center of the image.
Then you position all the hotpots assigning the calculated value to the margin.

Example:
Horizontal Distance from center in pixels = 80px
Margin-left: -80px

You get the current image title to know what hotspots to show and it is good to go.

Step 4.1:
Set up the hotspots.
As I said above, I define the top and the left.
The id corresponds to the title of the image.

[html]
<div id=”hotspots_13″ class=”image_map”>
<a href=”popup.html” class=”link1″ top=”1%” left=”28%” title=”Product” alt=”Product”></a>
<a href=”popup.html” class=”link2″ top=”-8%” left=”13%” title=”Product” alt=”Product”></a>
<a href=”popup.html” class=”link3″ top=”-10%” left=”-11%” title=”Product” alt=”Product”></a>
<a href=”popup.html” class=”link4″ top=”-24%” left=”-7%” title=”Product” alt=”Product”></a>
<a href=”popup.html” class=”link5″ top=”1%” left=”1%” title=”Product” alt=”Product”></a>
<a href=”popup.html” class=”link6″ top=”17%” left=”8%” title=”Product” alt=”Product”></a>
<a href=”popup.html” class=”link7″ top=”-33%” left=”24%” title=”Product” alt=”Product”></a>
<a href=”popup.html” class=”link8″ top=”8%” left=”-25%” title=”Product” alt=”Product”></a>
</div>
[/html]

Set the hotspots absolute and hidden for default.

[css]
body, html{margin:0; padding:0; overflow:hidden;}

.image_map{width:100%; height:100%; z-index:2000; position:absolute;
display:none;}

.image_map a{position:absolute; z-index:9000; width:20px; height:20px;
background:url(‘../images/icons/icon_yellow.png’) center center no-repeat;}
[/css]

Step 4.2
Still in the supersized.shutter.js file.
After the image transition you calculate the sizes, positions, move and show the right hotspots.

[js]
supersized.shutter.js
/* After Slide Transition
—————————-*/
afterAnimation : function() {

// Start progress bar
if(api.options.progress_bar && !vars.is_paused)
theme.progressBar();

/* ADD THIS CODE */

var imageId = “#supersized .activeslide img”;

//Image style
var style = $(imageId).attr(“style”);
var partsArray = style.split(‘:’);

var w = 0; //width
var h = 0; //height
var t = 0; //top
var l = 0; //left

var temp = 0;
var partsStyle = style.split(‘ ‘); // Split style string

for(var i=0; i<partsStyle.length; i++) {

temp = parseInt(partsStyle[i+1]);

if(partsStyle[i]==”width:”) w = temp;
else if(partsStyle[i]==”height:”) h = temp;
else if(partsStyle[i]==”top:”) t = temp;
else if(partsStyle[i]==”left:”) l = temp;

}

// Calculate center
var dif_w = Math.round(w / 2);
var dif_h = Math.round(h / 2);

// Negative to positive
var newL = Math.abs(l);
var newDifW = dif_w – newL;

var newT = Math.abs(t);
var newDifH = dif_h – newT;

// Move to center
$(‘.image_map a’).css(‘left’, function(i, v){return newDifW+”px”;});
$(‘.image_map a’).css(‘top’, function(i, v){return newDifH+”px”;});

// Get top and left
$(‘.image_map a’).css(‘margin-top’, function(i, v) {

// Get percentage top from html link
var marginTop = $(this).attr(‘top’);

var newMTP = Math.abs(parseInt(marginTop));

var newMT = h * (newMTP / 100);

if(parseInt(marginTop) > 0) return newMT+”px”;
else return “-“+newMT+”px”;

});

$(‘.image_map a’).css(‘margin-left’, function(i, v) {

var marginLeft = $(this).attr(‘left’);

var newMLP = Math.abs(parseInt(marginLeft));

var newML = w * (newMLP / 100);

if(parseInt(marginLeft) > 0) return newML+”px”;
else return “-“+newML+”px”;

});

// Show hotspots from current image
var next_map = “#” + api.getField(‘title’);
$(next_map).css(“display”, “inline”);
$(next_map).css(“visibility”, “visible”);
/* END ADD THIS CODE */

},
[/js]

You need to set the value with a function, so you will set it for each hotspot and not the same value for all.
Like this: $(‘.image_map a’).css(‘margin-top’, function(i, v) {});

Step 5:
When the browser is resized the hotspots are hidden and the “show hotspots” button changes.
So, when the user clicks to show the hotspots, they are positioned to the right place.

[js]
$(window).resize(function() {
$(‘#show’).html(“show hotspots”);
$(‘#show’).addClass(“show”);
$(‘#show’).removeClass(“hide”);
$(“.image_map”).css(“display”, “none”);
$(“.image_map”).css(“visibility”, “visible”);
});
[/js]

Step 5.2:
Set a button to show or hide the hotspots.
[js]
$(‘#show’).click(function() {
var state = $(this).attr(‘class’);
if(state==”show”) {
repositionHotspots(); //function that position the hotspots
$(this).html(“hide hotspots”);
$(this).addClass(“hide”);
$(this).removeClass(“show”);
//What hotpots will be show next
//api.getField(‘title’) comes with supersized
var next_map = “#” + api.getField(‘title’);
$(next_map).css(“display”, “inline”);
$(next_map).css(“visibility”, “visible”);
} else {
$(this).html(“show hotspots”);
$(this).addClass(“show”);
$(this).removeClass(“hide”);
$(“.image_map”).css(“display”, “none”);
$(“.image_map”).css(“visibility”, “hidden”);
}
});
[/js]

Opticional Steps:

This steps were made so the user have a better experience when surfing the website.

Show a tooltip with the name of the product.
From here: http://docs.jquery.com/Plugins/Tooltip
[js]
$(‘.image_map a’).tooltip({
track: true,
delay: 0,
showURL: false,
showBody: ” – “,
fade: 250
});
[/js]

Open a colorbox popup when click on the hotspot.
From here: http://colorpowered.com/colorbox
[js]
$(“.image_map a”).colorbox({
iframe:true,
scrolling:false,
innerWidth:”750px”,
innerHeight:”450px”
});
[/js]

You don’t need to follow all this steps.
Just download it.

VIEW DEMO
DOWNLOAD SOURCE

Share Post :

11 Comments

  • Ferne Waldie
    11 de Março de 2012 at 22:27 

    Great post, you have pointed out some great details , I likewise conceive this s a very good website.

  • Jacques Nansteel
    22 de Março de 2012 at 23:06 

    You are my aspiration, I own few blogs and rarely run out from brand :). “Never mistake motion for action.” by Ernest Hemingway.

  • Mark
    26 de Março de 2012 at 16:56 

    Great piece of code, just what I need. Can you tell me how to enable the hotspots when the page is loaded?
    Do not want to use the button. Do you I do this?

    Hope to hear from you, thanks!
    Gr,
    Mark

    • admin
      26 de Março de 2012 at 20:15 

      Thanks.

      It’s very easy.
      You just need to add this piece of code.

      [js]
      <script type="text/javascript">
      $(window).load(function() {
      //function that position the hotspots
      repositionHotspots();
      //What hotpots will be show next
      //api.getField(‘title’) comes with supersized
      var next_map = "#" + api.getField(‘title’);
      $(next_map).css("display", "inline");
      $(next_map).css("visibility", "visible");
      });
      </script>
      [/js]

      Good work,
      Joel Rocha

  • Mark
    27 de Março de 2012 at 9:24 

    Hi Joel,

    I’ve tried this, but it just does not work. Don’t understand why. Has it something to do with the jQuery.event.add(window, “load”, repositionHotspots); ? Is it possible to send me an example of how it should work?

    Thanks for your time,
    Gr,
    Mark

    • admin
      27 de Março de 2012 at 10:15 

      I send you an example of how it should work.
      I just add the code to reposition_hotspots.js and hide the button box.
      Hope it helps.

      Thanks,
      Joel Rocha

  • Vito Swickheimer
    5 de Abril de 2012 at 4:07 

    You got a very wonderful website, Gladiola I noticed it through yahoo.

  • Kreditrechner Autofinanzierung
    5 de Abril de 2012 at 13:56 

    You can certainly see your expertise within the article you write.
    The world hopes for even more passionate writers such as
    you who are not afraid to mention how they believe.
    At all times follow your heart.

  • shawn manolas
    10 de Abril de 2012 at 21:33 

    Awesome looking website. I recently built mine and I was looking for some design ideas and you gave me a few. Can I ask you whether you developed the website by youself?

  • Dominique Miranda
    10 de Abril de 2012 at 23:30 

    I like this web site very much, Its a rattling nice berth to read and find information.

  • melissa
    16 de Maio de 2012 at 2:26 

    Thanks for this tutorial!

    This is exactly what I need to do, however I need to achieve the same goal within wordpress. Any ideas how I could adapt this for wp?

Hey! comments are closed.