Isometric interactive interior guide

Isometric interactive interior guide

21 135010
Isometric interactive interior guide

Isometric interactive interior guide

During browsing internet, I have noticed new interesting thing – it looked like isometric guide. Today I will show you how you can create something similar. We will create isometric interactive interior guide with CSS3 and jQuery.


Here are samples and downloadable package:

Live Demo
download in package

Ok, download the example files and lets start coding !


Step 1. HTML

As usual, we start with the HTML. Here is full html code of our guide page. You can see here main scene (container object), six labels on this scene (with some description), and empty dialog element.

index.html

<!DOCTYPE html>
<html lang="en" >
    <head>
        <meta charset="utf-8" />
        <title>Isometric interactive interior guide with CSS3 and jQuery | Script Tutorials</title>
        <link href="css/layout.css" type="text/css" rel="stylesheet">
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script>
        <script src="js/main.js"></script>
    </head>
    <body>
        <header>
            <h2>Isometric interactive interior guide</h2>
            <a href="https://www.script-tutorials.com/isometric-interactive-interior-guide/" class="stuts">Back to original tutorial on <span>Script Tutorials</span></a>
        </header>
        <div class="container">
            <div class="labels">
                <a id="label1" class="label" href="#">sofa
                    <p>A sofa, is an item of furniture designed to seat more than one person, and providing support for the back and arms.</p>
                    <span />
                </a>
                <a id="label2" class="label" href="#">television
                    <p>Television (TV) is a telecommunication medium for transmitting and receiving moving images that can be monochrome (black-and-white) or colored, with or without accompanying sound.</p>
                    <span />
                </a>
                <a id="label3" class="label" href="#">chest
                    <p>In many video games, especially role-playing video games, treasure chests contain various items, currency, and sometimes monsters.</p>
                    <span />
                </a>
                <a id="label4" class="label" href="#">workplace
                    <p>A virtual workplace is a workplace that is not located in any one physical space.</p>
                    <span />
                </a>
                <a id="label5" class="label" href="#">entrance
                    <p>A door is a movable structure used to open and close off an entrance, typically consisting of a panel that swings on hinges or that slides or rotates inside of a space.</p>
                    <span />
                </a>
                <a id="label6" class="label" href="#">safe room
                    <p>A safe room or panic room is a fortified room which is installed in a private residence or business to provide a safe shelter, or hiding place, for the inhabitants in the event of a break-in, home invasion, tornado, or other threat.</p>
                    <span />
                </a>
            </div>
            <div class="dialog">
                <p></p>
                <a class="close">X</a>
            </div>
        </div>
    </body>
</html>

Step 2. CSS

Now – CSS styles. Which I have separated into two parts: common page styles and styles of our main scene.

css/layout.css

/* page layout styles */
*{
    margin:0;
    padding:0;
}
body {
    background-color:#fefffa;
    color:#fff;
    font:14px/1.3 Arial,sans-serif;
}
header {
    background-color:#212121;
    box-shadow: 0 -1px 2px #111111;
    display:block;
    height:70px;
    position:relative;
    width:100%;
    z-index:100;
}
header h2{
    font-size: 22px;
    font-weight: normal;
    left: 40%;
    margin-left: -300px;
    padding: 22px 0;
    position: absolute;
    width: 1000px;
}
header a.stuts,a.stuts:visited{
    border: none;
    color: #FCFCFC;
    font-size: 14px;
    left: 50%;
    line-height: 31px;
    margin: 23px 0 0 110px;
    position: absolute;
    text-decoration: none;
    top: 0;
}
header .stuts span {
    font-size:22px;
    font-weight:bold;
    margin-left:5px;
}
/* demo */
.container {
    background: url("../images/scene.jpg") no-repeat scroll center top transparent;
    color: #000000;
    height: 535px;
    margin: 20px auto;
    overflow: hidden;
    position: relative;
    width: 1030px;
}
.dialog {
    background-color: rgba(163, 154, 77, 0.9);
    color: #FFFFFF;
    display: none;
    height: 140px;
    left: 343px;
    line-height: 24px;
    padding: 100px 30px;
    position: absolute;
    text-align: center;
    top: 97px;
    width: 280px;
    z-index: 10;
    -moz-border-radius: 170px;
    -ms-border-radius: 170px;
    -o-border-radius: 170px;
    -webkit-border-radius: 170px;
    border-radius: 170px;
}
.dialog .close {
    background-color: #65683b;
    cursor: pointer;
    font-size: 22px;
    font-weight: bold;
    height: 36px;
    line-height: 36px;
    position: absolute;
    right: 10px;
    top: 60px;
    width: 36px;
    -moz-border-radius: 18px;
    -ms-border-radius: 18px;
    -o-border-radius: 18px;
    -webkit-border-radius: 18px;
    border-radius: 18px;
}
.labels p {
    display: none;
}
.labels a {
    background-color: rgba(203, 189, 58, 0.8);
    color: #FFFFFF;
    display: none;
    height: 50px;
    padding: 30px 0 0;
    position: absolute !important;
    text-align: center;
    text-decoration: none;
    width: 80px;
    -moz-border-radius: 40px;
    -ms-border-radius: 40px;
    -o-border-radius: 40px;
    -webkit-border-radius: 40px;
    border-radius: 40px;
}
.labels > a {
    background-color: rgba(203, 189, 58, 0.8);
    -moz-transition: .3s;
    -ms-transition: .3s;
    -o-transition: .3s;
    -webkit-transition: .3s;
    transition: .3s;
}
.labels a:hover {
    background-color: rgba(128, 128, 128, 0.8);
}
.labels a span {
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 15px solid rgba(203, 189, 58, 0.8);
    bottom: -14px;
    height: 0;
    left: 30px;
    position: absolute;
    width: 0;
    -moz-transition: .3s;
    -ms-transition: .3s;
    -o-transition: .3s;
    -webkit-transition: .3s;
    transition: .3s;
}
.labels a:hover span {
    border-top: 15px solid rgba(128, 128, 128, 0.8);
}
#label1 {
    left: 720px;
    top: 215px;
}
#label2 {
    left: 495px;
    top: 290px;
}
#label3 {
    left: 450px;
    top: 115px;
}
#label4 {
    left: 270px;
    top: 170px;
}
#label5 {
    left: 570px;
    top: 65px;
}
#label6 {
    left: 275px;
    top: 30px;
}

Step 3. JS

And now – our jQuery code:

js/main.js

jQuery(function(){
    // initialize of labels
    $('.labels a#label1').fadeIn(100).effect('bounce', { times:3 }, 300, function() {
        $('.labels a#label2').fadeIn(100).effect('bounce', { times:3 }, 300, function() {
            $('.labels a#label3').fadeIn(100).effect('bounce', { times:3 }, 300, function() {
                $('.labels a#label4').fadeIn(100).effect('bounce', { times:3 }, 300, function() {
                    $('.labels a#label5').fadeIn(100).effect('bounce', { times:3 }, 300, function() {
                        $('.labels a#label6').fadeIn(100).effect('bounce', { times:3 }, 300);
                    });
                });
            });
        });
    });
    // dialog close
    $('.dialog .close').click(function() {
        $(this).parent().fadeOut(500);
        return false;
    });
    // display dialog on click by labels
    $('.labels a').click(function() {
        $('.dialog p').html( $(this).find('p').html() ).parent().fadeIn(500);
        return false;
    });
    // close dialog on click outside
    $('.container').click(function() {
        $('.dialog').fadeOut(500);
    });
});

Here are just a few event handlers of our scene objects.


Live Demo
download in package

Conclusion

I will happy if our material will useful for you, and can bring you some inspiration. Don’t forget telling thanks and leaving a comment. :) Good luck!

SIMILAR ARTICLES


21 COMMENTS

  1. Looks great. Why a closing SPAN but no opening SPAN? Also would be nice if you could put block level content in the center circle, lists, other links, etc. Doesn’t work as is though.

  2. OK, HTML 5, SPAN is a self-closed hook. How about the link tag, no closing tag and causes a problem if you want links in the center circle.

    • Hello ND,
      You always can try normal closed SPAN here (instead self-closed case). About links – you can use links here too, but in this case you should turn styles:
      .labels a span
      into:
      .labels > a span
      So, it will use first level A element

  3. Hi Andrew,
    Pl more specific about your code, do not just copy and paste. I am here because i want to learn your code. Thanks

    • Hello Dheeraj,
      Usually I put my comments to the code. Or do you want to see very commented elements? I can of course

  4. Hi Andrew,

    This tooltip interface is great, thanks for building it. A question for you: would it be possible to make it so that the .dialog box opens in a position relative to the tags? I want the tooltip window to move to a different spot according to which pin is being clicked.

    Thanks,
    Ricky

    • Hello Ricky,
      Yes, this is possible of course. but in this case you should:
      * prepare multiple dialogs all over the page (for the every pin)
      * or you should move Dialog element when you click on it.

  5. Hi,
    Thanks for this. You save my life! Question: I tried to insert a link on a text in the circle, like “A sofa, is an item of furniture designed to seat more than one person, and providing support for the back and arms.” but it doesn’t work. Even if I change .labels a span into: .labels > a span like you said on June 9, 2012 2:45 pm.

    Thanks,
    Andre

    • Hello Andre,
      Please contact with me (through the form at the bottom of website), send your result URL, I will try to review your current result.

  6. Hello Andrew,
    awesome work! You save my life. I have only one question. I tried to insert link -read more- in a circle, like: Sofa is an item of furniture … read more. I’ve tied to change .labels a span into: .labels > a span, and many more with no luck.

    Thanks Chris

    • Hello Chris, basically, you can also use ‘onclick’ event handling to forward members to another pages without distortion of existed styles. Something like that:
      <p onclick="window.location.href=’__some_address__’;">example link</p>

  7. Hey,
    thank you for this tooltip. I think the tooltip very nice.
    Is there a way the problem with Internet Explorer to bypass?
    Thank you for your dedication,
    Sina

  8. Hello admin,

    I have got the IE8. I looked for an update for the XP operating system, but the latest version is the IE8.
    The graphic is also displayed, but only the tooltips are not displayed.
    The script stops after the first tooltip and the following tooltips are not executed.
    Is there a code that tells the browser, if IE8 is used, the script will not run? Or is there an other solution for that problem?

    Thank you for your support.
    Sina

    • Now, you can install even IE10, and you don’t need to reinstall whole OS (lol), look: http://windows.microsoft.com/en-us/internet-explorer/downloads/ie-10/worldwide-languages

  9. Hi, is it possible to have a next and previous button on each circular bubble that appears after selecting a small one? If so any tips on how I could do this… thanks

    • Hi Melanie,
      Yes, this is possible, but you will need to :
      1) add your navigation elements for every rounded P element
      2) add custom onclick behavior to them (to toggle to other elements)

  10. Hello Andrew, great tooltip. I’m having trouble getting a link working in the dialog area. I see your note about adding example link, but I’m having trouble getting it to work. Can you detail out exactly what the changes would be to add a read more at the bottom of the dialog area? Many thanks.

    • Hello Kate,
      As I mentioned before, you always can use the ordinary A links, but you have to make corrections for styles (as I answered for ND). If you are not sure how to change CSS, there is another way – to avoid making changes in CSS, and to work only with HTML. In this case you can add links like:
      <button onclick="window.open (‘__your_link__’,’_self’);">Link</button>

Leave a Reply to Dheeraj Cancel reply