Posts by Arumugam

    I need a hotspot like this website http://tmap.nimbusinteractive.com/altis/ in this website go to interior menu .


    this is my working link http://hns.in/krpano/krpano.html

    in this if i click the hotspot near Sheet i want to change the color of all head resist.

    I create this view using Cube

    This is my xml

    <!-- dynamically generated xml file (by the editor plugin) -->
    <krpano version="1.18.5">

    <progress showload="none" showwait="none" />

    <display flash10="on" movequality="high" stillquality="high" movequality10="high" stillquality10="high" details="36" fps="60"/>
    <view fovtype="MFOV" fov="84" fovmin="45" fovmax="84" limitview="range" vlookatmin="-90" vlookatmax="+90" fisheye="0.75" fisheyefovlink="3"/>

    <image>
    <left url="images/interior_l.jpg" />
    <front url="images/interior_f.jpg" />
    <right url="images/interior_r.jpg" />
    <back url="images/interior_b.jpg" />
    <up url="images/interior_u.jpg" />
    <down url="images/interior_d.jpg" />
    </image>

    <control keycodesin="" keycodesout="" />

    <contextmenu fullscreen="true">
    </contextmenu>

    <plugin name="n0" url="plugins/editor.swf" keep="false" align="bottom" x="0" y="16" />

    <hotspot name="hs1" url="home-Service-041.png"
    ath="22.593199" atv="8.167536" width="34" height="34"
    onclick="tween(hotspot[steering].alpha,1.0);tween(hotspot[sheet_2].alpha,1.0);" onout="tween(hotspot[steering].alpha,0.0);tween(hotspot[steering].alpha,0.0);" ondown.touch="onover();" onup.touch="onout();"
    />
    <hotspot name="steering" url="hotspot.png"
    alpha="0.0"
    ath="0.0" atv="0.0" distorted="true" rx="0" ry="0" rz="0" ath="0" atv="0" edge="lefttop" ox="99.192" oy="94.70" width="264.811" height="272.446"
    />

    <hotspot name="hs3" url="home-Service-041.png"
    ath="0.744616" atv="35.4174" width="34" height="34"
    onclick="tween(hotspot[Gearknob].alpha,1.0);" onout="tween(hotspot[Gearknob].alpha,0.0);" ondown.touch="onover();" onup.touch="onout();"
    />
    <hotspot name="Gearknob" url="hotspot_3.png"
    alpha="0.0"
    ath="0.0" atv="0.0" distorted="true" rx="0" ry="0" rz="0" ath="0" atv="0" edge="lefttop" ox="-7.630" oy="289.048" width="51.166" height="44.434"
    />

    <hotspot name="changesheet" url="home-Service-041.png" ath="206.977097" atv="11.359236" width="34" height="34" onclick="js(changesheet());"/>
    <hotspot name="hotspot_4" visible="false" url="hotspot_4.png" alpha="0.0" ath="0.0" zorder="1" atv="0.0" distorted="true" rx="0" ry="0" rz="0" ath="180" atv="0" edge="lefttop" ox="-217.235" oy="-90.215" width="717.235" height="113.105" />
    <hotspot name="hotspot_5" visible="false" url="hotspot_5.png" alpha="0.0" zorder="1" ath="0.0" atv="0.0" distorted="true" rx="0" ry="0" rz="0" ath="-90" atv="0" edge="lefttop" ox="-500" oy="-116.696" width="788.599" height="254.039" />
    <hotspot name="hotspot_7" visible="false" url="hotspot_7.png" alpha="0.0" zorder="1" ath="0.0" atv="0.0" distorted="true" rx="0" ry="0" rz="0" ath="90" atv="0" edge="lefttop" ox="-410.682" oy="-213.644" width="390.484" height="498.204" />

    <hotspot name="hotspot_4_change" visible="false" url="hotspot_4 - Copy.png" alpha="0.0" ath="0.0" zorder="1" atv="0.0" distorted="true" rx="0" ry="0" rz="0" ath="180" atv="0" edge="lefttop" ox="-217.235" oy="-90.215" width="717.235" height="113.105" />
    <hotspot name="hotspot_5_change" visible="false" url="hotspot_5 - Copy.png" alpha="0.0" zorder="1" ath="0.0" atv="0.0" distorted="true" rx="0" ry="0" rz="0" ath="-90" atv="0" edge="lefttop" ox="-500" oy="-116.696" width="788.599" height="254.039" />
    <hotspot name="hotspot_7_change" visible="false" url="hotspot_7 - Copy.png" alpha="0.0" zorder="1" ath="0.0" atv="0.0" distorted="true" rx="0" ry="0" rz="0" ath="90" atv="0" edge="lefttop" ox="-410.682" oy="-213.644" width="390.484" height="498.204" />

    <hotspot name="hs5" url="home-Service-041.png"
    ath="-16.957505" atv="17.945473" width="34" height="34"
    onclick="tween(hotspot[dash].alpha,1.0);" onout="tween(hotspot[dash].alpha,0.0);" ondown.touch="onover();" onup.touch="onout();"
    />
    <hotspot name="dash" url="hotspot_2.png"
    alpha="0.0"
    ath="0.0" atv="0.0" distorted="true" rx="0" ry="0" rz="0" ath="0" atv="0" edge="lefttop" ox="-500" oy="172.351" width="600.089" height="62.387"
    />
    </krpano>


    If i click the hotspot name - changesheet .

    I called js onclick="js(changesheet());"

    and

    my js file is . if i click the hostspot there is no response

    var krpanoObj;

    interior_choose = {};

    function krpanoReady(krpano) {
    krpanoObj = krpano;
    }

    function loadPano(xmlfile) {
    alert("hai");
    var viewer = createPanoViewer({
    //swf: window.location.origin +"/interior/js/krpano_1_16_5.swf",
    swf: "krpano.swf",
    id: "krpanoSWFObject",
    target: "pano",
    onready: krpanoReady,
    html5: "auto",
    });
    viewer.addVariable("xml", "krpano.xml");
    viewer.passQueryParameters();
    viewer.addParam("wmode", "opaque");
    viewer.embed("pano"); //removepano("pano");
    }


    var isClickWorking = false;

    var redLineHtml = '<span style="color:red;">---------</span>';

    var frontConsole = ['standard', 'sport', 'wood'];
    var consoleNumberClick = 1;

    var dvd = ['default', 'f_radio_standard', 'f_radio_wood', 'f_classicdvd_wood', 'f_avx_wood', 'f_avn_wood'];
    var dvdNumberClick = 1;

    var chrome = ['default', 'chrome'];
    var chromeNumberClick = 1;

    var historyStatement = '';

    function runKrpano(statement) {

    krpanoObj.call(statement);

    if (historyStatement !== '') {

    historyStatement = historyStatement.replace(/visible/g, 'zorder');
    historyStatement = historyStatement.replace(/true/g, 1);
    krpanoObj.call(historyStatement);

    var zorder = statement.replace(/visible/g, 'zorder');
    zorder = zorder.replace(/true/g, 2);
    krpanoObj.call(zorder);

    }

    historyStatement = statement;
    }

    var historyDoorStatement = '';
    function runKrpanoDoorHandle(statement) {

    krpanoObj.call(statement);

    if (historyDoorStatement !== '') {

    historyDoorStatement = historyDoorStatement.replace(/visible/g, 'zorder');
    historyDoorStatement = historyDoorStatement.replace(/true/g, 1);
    krpanoObj.call(historyDoorStatement);

    var zorder = statement.replace(/visible/g, 'zorder');
    zorder = zorder.replace(/true/g, 2);
    krpanoObj.call(zorder);

    }

    historyDoorStatement = statement;
    }


    function showPath() {
    var dvdSelected = dvd[(dvdNumberClick === 0) ? 0 : dvdNumberClick - 1]
    var chromeSelected = chrome[(chromeNumberClick === 0) ? 0 : chromeNumberClick - 1];
    var consoleSelected = frontConsole[(consoleNumberClick === 0) ? 0 : consoleNumberClick - 1];

    if (chromeSelected === 'default') {
    chromeSelected = '';
    } else {
    chromeSelected = '_chrome';
    }

    if (dvdSelected === 'default') {
    dvdSelected = chromeSelected;
    } else {
    dvdSelected = '_dvd' + chromeSelected + dvdSelected;
    }

    var url = "front_console_" + consoleSelected + dvdSelected;
    $('.path').html(url);
    return url;
    }


    function addDebug(msg) {
    var $p = $('<p/>', {
    html: msg
    }).appendTo('.debug');
    }


    function showPattern() {
    //$('.pattern').fadeIn(500);
    }

    function hidePattern() {
    // $('.pattern').fadeOut(500);
    }
    var sheetName = [];
    sheetName[0] = [
    'hotspot_4',
    'hotspot_5',
    'hotspot_7',
    ];

    sheetName[1] = [
    'hotspot_4_change',
    'hotspot_5_change',
    'hotspot_7_change',
    ];
    var sheetIndex = 0;
    var sheetCount = 1;

    function changesheet() {
    var cmd = '';

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

    cmd = '';

    for (j = 0; j < sheetName.length; j++) {
    cmd += 'set(hotspot[' + sheetName[i][j] + '].visible, false);';
    }
    // console.log(cmd);
    krpanoObj.call(cmd);
    }

    sheetIndex++;
    cmd = '';
    for (i = 0; i < sheetName[sheetIndex].length; i++) {
    cmd += 'set(hotspot[' + sheetName[sheetIndex][i] + '].visible, true);';
    }

    krpanoObj.call(cmd);

    if ((handDoorCount++ % 2) !== 0) {
    showPart(107);
    }
    else {
    clearChoose(107);
    }

    if (sheetIndex === sheetName.length - 1) {
    sheetIndex = -1;
    }
    }


    function isMobile() {
    v = false;

    if (navigator.userAgent.match(/Android/i) || navigator.userAgent.match(/webOS/i) || navigator.userAgent.match(/iPhone/i) || navigator.userAgent.match(/iPad/i) || navigator.userAgent.match(/iPod/i) || navigator.userAgent.match(/BlackBerry/i) || navigator.userAgent.match(/Windows Phone/i) || navigator.userAgent.match(/Opera Mini/i) || navigator.userAgent.match(/IEMobile/i)) {
    v = true;
    }

    return v;
    }


    $(document).ready(function() {

    $('#btn-getvalue').click(function() {
    console.log(interior_choose);
    });
    });

    I am very sorry for that i posted here. I don't know how to open a new one. how to post a new one. Very sorry for that.
    I clear tell about my question

    I need a hotspot like this website http://tmap.nimbusinteractive.com/altis/ in this website go to interior menu .


    this is my working link http://hns.in/krpano/krpano.html

    in this if i click the hotspot near Sheet i want to change the color of all head resist.

    I create this view using Cube

    This is my xml

    <!-- dynamically generated xml file (by the editor plugin) -->
    <krpano version="1.18.5">

    <progress showload="none" showwait="none" />

    <display flash10="on" movequality="high" stillquality="high" movequality10="high" stillquality10="high" details="36" fps="60"/>
    <view fovtype="MFOV" fov="84" fovmin="45" fovmax="84" limitview="range" vlookatmin="-90" vlookatmax="+90" fisheye="0.75" fisheyefovlink="3"/>

    <image>
    <left url="images/interior_l.jpg" />
    <front url="images/interior_f.jpg" />
    <right url="images/interior_r.jpg" />
    <back url="images/interior_b.jpg" />
    <up url="images/interior_u.jpg" />
    <down url="images/interior_d.jpg" />
    </image>

    <control keycodesin="" keycodesout="" />

    <contextmenu fullscreen="true">
    </contextmenu>

    <plugin name="n0" url="plugins/editor.swf" keep="false" align="bottom" x="0" y="16" />

    <hotspot name="hs1" url="home-Service-041.png"
    ath="22.593199" atv="8.167536" width="34" height="34"
    onclick="tween(hotspot[steering].alpha,1.0);tween(hotspot[sheet_2].alpha,1.0);" onout="tween(hotspot[steering].alpha,0.0);tween(hotspot[steering].alpha,0.0);" ondown.touch="onover();" onup.touch="onout();"
    />
    <hotspot name="steering" url="hotspot.png"
    alpha="0.0"
    ath="0.0" atv="0.0" distorted="true" rx="0" ry="0" rz="0" ath="0" atv="0" edge="lefttop" ox="99.192" oy="94.70" width="264.811" height="272.446"
    />

    <hotspot name="hs3" url="home-Service-041.png"
    ath="0.744616" atv="35.4174" width="34" height="34"
    onclick="tween(hotspot[Gearknob].alpha,1.0);" onout="tween(hotspot[Gearknob].alpha,0.0);" ondown.touch="onover();" onup.touch="onout();"
    />
    <hotspot name="Gearknob" url="hotspot_3.png"
    alpha="0.0"
    ath="0.0" atv="0.0" distorted="true" rx="0" ry="0" rz="0" ath="0" atv="0" edge="lefttop" ox="-7.630" oy="289.048" width="51.166" height="44.434"
    />

    <hotspot name="changesheet" url="home-Service-041.png" ath="206.977097" atv="11.359236" width="34" height="34" onclick="js(changesheet());"/>
    <hotspot name="hotspot_4" visible="false" url="hotspot_4.png" alpha="0.0" ath="0.0" zorder="1" atv="0.0" distorted="true" rx="0" ry="0" rz="0" ath="180" atv="0" edge="lefttop" ox="-217.235" oy="-90.215" width="717.235" height="113.105" />
    <hotspot name="hotspot_5" visible="false" url="hotspot_5.png" alpha="0.0" zorder="1" ath="0.0" atv="0.0" distorted="true" rx="0" ry="0" rz="0" ath="-90" atv="0" edge="lefttop" ox="-500" oy="-116.696" width="788.599" height="254.039" />
    <hotspot name="hotspot_7" visible="false" url="hotspot_7.png" alpha="0.0" zorder="1" ath="0.0" atv="0.0" distorted="true" rx="0" ry="0" rz="0" ath="90" atv="0" edge="lefttop" ox="-410.682" oy="-213.644" width="390.484" height="498.204" />

    <hotspot name="hotspot_4_change" visible="false" url="hotspot_4 - Copy.png" alpha="0.0" ath="0.0" zorder="1" atv="0.0" distorted="true" rx="0" ry="0" rz="0" ath="180" atv="0" edge="lefttop" ox="-217.235" oy="-90.215" width="717.235" height="113.105" />
    <hotspot name="hotspot_5_change" visible="false" url="hotspot_5 - Copy.png" alpha="0.0" zorder="1" ath="0.0" atv="0.0" distorted="true" rx="0" ry="0" rz="0" ath="-90" atv="0" edge="lefttop" ox="-500" oy="-116.696" width="788.599" height="254.039" />
    <hotspot name="hotspot_7_change" visible="false" url="hotspot_7 - Copy.png" alpha="0.0" zorder="1" ath="0.0" atv="0.0" distorted="true" rx="0" ry="0" rz="0" ath="90" atv="0" edge="lefttop" ox="-410.682" oy="-213.644" width="390.484" height="498.204" />

    <hotspot name="hs5" url="home-Service-041.png"
    ath="-16.957505" atv="17.945473" width="34" height="34"
    onclick="tween(hotspot[dash].alpha,1.0);" onout="tween(hotspot[dash].alpha,0.0);" ondown.touch="onover();" onup.touch="onout();"
    />
    <hotspot name="dash" url="hotspot_2.png"
    alpha="0.0"
    ath="0.0" atv="0.0" distorted="true" rx="0" ry="0" rz="0" ath="0" atv="0" edge="lefttop" ox="-500" oy="172.351" width="600.089" height="62.387"
    />
    </krpano>


    If i click the hotspot name - changesheet .

    I called js onclick="js(changesheet());"

    and

    my js file is . if i click the hostspot there is no response

    var krpanoObj;

    interior_choose = {};

    function krpanoReady(krpano) {
    krpanoObj = krpano;
    }

    function loadPano(xmlfile) {
    alert("hai");
    var viewer = createPanoViewer({
    //swf: window.location.origin +"/interior/js/krpano_1_16_5.swf",
    swf: "krpano.swf",
    id: "krpanoSWFObject",
    target: "pano",
    onready: krpanoReady,
    html5: "auto",
    });
    viewer.addVariable("xml", "krpano.xml");
    viewer.passQueryParameters();
    viewer.addParam("wmode", "opaque");
    viewer.embed("pano"); //removepano("pano");
    }


    var isClickWorking = false;

    var redLineHtml = '<span style="color:red;">---------</span>';

    var frontConsole = ['standard', 'sport', 'wood'];
    var consoleNumberClick = 1;

    var dvd = ['default', 'f_radio_standard', 'f_radio_wood', 'f_classicdvd_wood', 'f_avx_wood', 'f_avn_wood'];
    var dvdNumberClick = 1;

    var chrome = ['default', 'chrome'];
    var chromeNumberClick = 1;

    var historyStatement = '';

    function runKrpano(statement) {

    krpanoObj.call(statement);

    if (historyStatement !== '') {

    historyStatement = historyStatement.replace(/visible/g, 'zorder');
    historyStatement = historyStatement.replace(/true/g, 1);
    krpanoObj.call(historyStatement);

    var zorder = statement.replace(/visible/g, 'zorder');
    zorder = zorder.replace(/true/g, 2);
    krpanoObj.call(zorder);

    }

    historyStatement = statement;
    }

    var historyDoorStatement = '';
    function runKrpanoDoorHandle(statement) {

    krpanoObj.call(statement);

    if (historyDoorStatement !== '') {

    historyDoorStatement = historyDoorStatement.replace(/visible/g, 'zorder');
    historyDoorStatement = historyDoorStatement.replace(/true/g, 1);
    krpanoObj.call(historyDoorStatement);

    var zorder = statement.replace(/visible/g, 'zorder');
    zorder = zorder.replace(/true/g, 2);
    krpanoObj.call(zorder);

    }

    historyDoorStatement = statement;
    }


    function showPath() {
    var dvdSelected = dvd[(dvdNumberClick === 0) ? 0 : dvdNumberClick - 1]
    var chromeSelected = chrome[(chromeNumberClick === 0) ? 0 : chromeNumberClick - 1];
    var consoleSelected = frontConsole[(consoleNumberClick === 0) ? 0 : consoleNumberClick - 1];

    if (chromeSelected === 'default') {
    chromeSelected = '';
    } else {
    chromeSelected = '_chrome';
    }

    if (dvdSelected === 'default') {
    dvdSelected = chromeSelected;
    } else {
    dvdSelected = '_dvd' + chromeSelected + dvdSelected;
    }

    var url = "front_console_" + consoleSelected + dvdSelected;
    $('.path').html(url);
    return url;
    }


    function addDebug(msg) {
    var $p = $('<p/>', {
    html: msg
    }).appendTo('.debug');
    }


    function showPattern() {
    //$('.pattern').fadeIn(500);
    }

    function hidePattern() {
    // $('.pattern').fadeOut(500);
    }
    var sheetName = [];
    sheetName[0] = [
    'hotspot_4',
    'hotspot_5',
    'hotspot_7',
    ];

    sheetName[1] = [
    'hotspot_4_change',
    'hotspot_5_change',
    'hotspot_7_change',
    ];
    var sheetIndex = 0;
    var sheetCount = 1;

    function changesheet() {
    var cmd = '';

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

    cmd = '';

    for (j = 0; j < sheetName[i].length; j++) {
    cmd += 'set(hotspot[' + sheetName[i][j] + '].visible, false);';
    }
    // console.log(cmd);
    krpanoObj.call(cmd);
    }

    sheetIndex++;
    cmd = '';
    for (i = 0; i < sheetName[sheetIndex].length; i++) {
    cmd += 'set(hotspot[' + sheetName[sheetIndex][i] + '].visible, true);';
    }

    krpanoObj.call(cmd);

    if ((handDoorCount++ % 2) !== 0) {
    showPart(107);
    }
    else {
    clearChoose(107);
    }

    if (sheetIndex === sheetName.length - 1) {
    sheetIndex = -1;
    }
    }


    function isMobile() {
    v = false;

    if (navigator.userAgent.match(/Android/i) || navigator.userAgent.match(/webOS/i) || navigator.userAgent.match(/iPhone/i) || navigator.userAgent.match(/iPad/i) || navigator.userAgent.match(/iPod/i) || navigator.userAgent.match(/BlackBerry/i) || navigator.userAgent.match(/Windows Phone/i) || navigator.userAgent.match(/Opera Mini/i) || navigator.userAgent.match(/IEMobile/i)) {
    v = true;
    }

    return v;
    }


    $(document).ready(function() {

    $('#btn-getvalue').click(function() {
    console.log(interior_choose);
    });
    });

    hai

    This is my coding

    <!-- dynamically generated xml file (by the editor plugin) -->
    <krpano version="1.18.5">

    <progress showload="none" showwait="none" />

    <display movequality10="BEST" stillquality10="BEST" />

    <view limitfov="false" stereographic="true" />

    <image>
    <left url="images/interior_l.jpg" />
    <front url="images/interior_f.jpg" />
    <right url="images/interior_r.jpg" />
    <back url="images/interior_b.jpg" />
    <up url="images/interior_u.jpg" />
    <down url="images/interior_d.jpg" />
    </image>

    <control keycodesin="" keycodesout="" />

    <contextmenu fullscreen="true">
    </contextmenu>

    <plugin name="n0" url="plugins/editor.swf" keep="false" align="bottom" x="0" y="16" />

    <hotspot name="hs1" url="home-Service-041.png"
    ath="22.593199" atv="8.167536" width="34" height="34" onout="tween(hotspot[steering].alpha,0.0);"
    onclick="tween(hotspot[steering].alpha,1.0);"
    />
    <hotspot name="steering" url="hotspot.png"
    alpha="0.0"
    ath="0.0" atv="0.0" distorted="true" rx="0" ry="0" rz="0" ath="0" atv="0" edge="lefttop" ox="99.192" oy="94.70" width="264.811" height="272.446"
    />

    <hotspot name="hs3" url="home-Service-041.png"
    ath="0.744616" atv="35.4174" width="34" height="34"
    onclick="tween(hotspot[Gearknob].alpha,1.0);" onout="tween(hotspot[Gearknob].alpha,0.0);" ondown.touch="onover();" onup.touch="onout();"
    />
    <hotspot name="Gearknob" url="hotspot_3.png"
    alpha="0.0"
    ath="0.0" atv="0.0" distorted="true" rx="0" ry="0" rz="0" ath="0" atv="0" edge="lefttop" ox="-7.630" oy="289.048" width="51.166" height="44.434"
    />

    <hotspot name="hs4" url="home-Service-041.png"
    ath="206.977097" atv="11.359236" width="34" height="34"
    onclick="tween(hotspot[sheet].alpha,1.0);" onout="tween(hotspot[sheet].alpha,0.0);" ondown.touch="onover();" onup.touch="onout();"
    />
    <hotspot name="sheet" url="hotspot_4.png"
    alpha="0.0"
    ath="0.0" atv="0.0" distorted="true" rx="0" ry="0" rz="0" ath="180" atv="0" edge="lefttop" ox="-217.235" oy="-90.215" width="717.235" height="113.105"
    />
    <hotspot name="sheet" url="hotspot_5.png"
    alpha="0.0"
    ath="0.0" atv="0.0" distorted="true" rx="0" ry="0" rz="0" ath="-90" atv="0" edge="lefttop" ox="-500" oy="-116.696" width="788.599" height="254.039"
    />


    <hotspot name="hs5" url="home-Service-041.png"
    ath="-16.957505" atv="17.945473" width="34" height="34"
    onclick="tween(hotspot[dash].alpha,1.0);" onout="tween(hotspot[dash].alpha,0.0);" ondown.touch="onover();" onup.touch="onout();"
    />
    <hotspot name="dash" url="hotspot_2.png"
    alpha="0.0"
    ath="0.0" atv="0.0" distorted="true" rx="0" ry="0" rz="0" ath="0" atv="0" edge="lefttop" ox="-500" oy="172.351" width="600.089" height="62.387"
    />



    </krpano>

    I want to display two images at a time onclick one hotspot. http://www.toyota.co.th/makemycar/altis/ like this website

    Here if i click hotspot - hs4 i want to display two images but these images are in separate cube. Please suggest me some solutions


    <hotspot name="hs4" url="home-Service-041.png"
    ath="206.977097" atv="11.359236" width="34" height="34"
    onclick="tween(hotspot[sheet].alpha,1.0);" onout="tween(hotspot[sheet].alpha,0.0);" ondown.touch="onover();" onup.touch="onout();"
    />
    <hotspot name="sheet" url="hotspot_4.png"
    alpha="0.0"
    ath="0.0" atv="0.0" distorted="true" rx="0" ry="0" rz="0" ath="180" atv="0" edge="lefttop" ox="-217.235" oy="-90.215" width="717.235" height="113.105"
    />
    <hotspot name="sheet" url="hotspot_5.png"
    alpha="0.0"
    ath="0.0" atv="0.0" distorted="true" rx="0" ry="0" rz="0" ath="-90" atv="0" edge="lefttop" ox="-500" oy="-116.696" width="788.599" height="254.039"
    />

    <!-- dynamically generated xml file (by the editor plugin) -->
    <krpano version="1.18.5">

    <progress showload="none" showwait="none" />

    <display movequality10="BEST" stillquality10="BEST" />

    <view limitfov="false" stereographic="true" />

    <image>
    <left url="images/interior_l.jpg" />
    <front url="images/interior_f.jpg" />
    <right url="images/interior_r.jpg" />
    <back url="images/interior_b.jpg" />
    <up url="images/interior_u.jpg" />
    <down url="images/interior_d.jpg" />
    </image>

    <control keycodesin="" keycodesout="" />

    <contextmenu fullscreen="true">
    </contextmenu>

    <plugin name="n0" url="plugins/editor.swf" keep="false" align="bottom" x="0" y="16" />

    <hotspot name="car" url="hotspot.png"
    alpha="0.0"
    ath="0.0" atv="0.0" distorted="true" rx="0" ry="0" rz="0" ath="0" atv="0" edge="lefttop" ox="99.192" oy="94.70" width="264.811" height="272.446"
    onover="tween(alpha,1.0);"
    onout="tween(alpha,0.0);"
    />

    <hotspot name="hs1" capture="false" zorder="2" alpha="0" onclick="tween(hotspot[car].alpha,1.0);" onout="tween(hotspot[car].alpha,0.0);" ondown.touch="onover();" onup.touch="onout();">
    >
    <point ath="11.433681" atv="22.169917" />
    <point ath="11.765017" atv="18.829234" />
    <point ath="13.55327" atv="15.374293" />
    <point ath="16.06359" atv="12.454018" />
    <point ath="18.942598" atv="10.989644" />
    <point ath="22.319177" atv="9.700223" />
    <point ath="27.239909" atv="10.037516" />
    <point ath="30.635586" atv="11.761362" />
    <point ath="32.840404" atv="13.744079" />
    <point ath="34.700327" atv="16.157505" />
    <point ath="35.557603" atv="18.76717" />
    <point ath="36.100035" atv="23.665224" />
    <point ath="34.700327" atv="27.61391" />
    <point ath="32.591832" atv="30.075088" />
    <point ath="30.117236" atv="31.769263" />
    <point ath="24.782563" atv="33.325419" />
    <point ath="19.563311" atv="32.855463" />
    <point ath="15.091573" atv="31.151082" />
    <point ath="12.101152" atv="27.033531" />
    <point ath="12.101152" atv="27.033531" />
    </hotspot>

    <hotspot name="hotspot_1" url="hotspot_2.png"
    alpha="0.0"
    ath="0.0" atv="0.0" distorted="true" rx="0" ry="0" rz="0" ath="0" atv="0" edge="lefttop" ox="-500" oy="172.351" width="600.089" height="62.387"
    onover="tween(alpha,1.0);"
    onout="tween(alpha,0.0);"
    />

    <hotspot name="hs2" capture="false" zorder="2" alpha="0" onover="tween(hotspot[hotspot_1].alpha,1.0);" onout="tween(hotspot[hotspot_1].alpha,0.0);" ondown.touch="onover();" onup.touch="onout();"
    >
    <point ath="-45.470811" atv="15.391708" />
    <point ath="-44.974528" atv="15.991863" />
    <point ath="-43.860782" atv="16.989501" />
    <point ath="-42.755789" atv="17.56374" />
    <point ath="-41.380037" atv="18.091131" />
    <point ath="-39.985016" atv="17.928058" />
    <point ath="-37.797702" atv="17.820442" />
    <point ath="-36.575419" atv="17.328964" />
    <point ath="-34.435977" atv="17.308531" />
    <point ath="-33.26751" atv="17.292875" />
    <point ath="-31.088584" atv="17.967416" />
    <point ath="-26.872102" atv="19.199171" />
    <point ath="-23.207172" atv="19.937705" />
    <point ath="-18.568107" atv="20.96885" />
    <point ath="-14.20959" atv="22.334235" />
    <point ath="-10.592965" atv="23.710154" />
    <point ath="-9.313533" atv="24.294726" />
    <point ath="-6.87684" atv="24.814239" />
    <point ath="-5.173671" atv="25.009595" />
    <point ath="-1.062971" atv="25.188088" />
    <point ath="5.985321" atv="25.160663" />
    <point ath="7.831367" atv="25.094823" />
    <point ath="10.920146" atv="24.045965" />
    <point ath="11.170096" atv="21.738125" />
    <point ath="8.111357" atv="21.602442" />
    <point ath="-0.352118" atv="21.695816" />
    <point ath="-9.46778" atv="21.150658" />
    <point ath="-15.97216" atv="20.122679" />
    <point ath="-25.043428" atv="18.68617" />
    <point ath="-30.36272" atv="17.087626" />
    <point ath="-33.861222" atv="16.198404" />
    <point ath="-35.394685" atv="16.453977" />
    <point ath="-39.392284" atv="16.519733" />
    <point ath="-40.99393" atv="16.211808" />
    <point ath="-42.875735" atv="14.192274" />
    <point ath="-42.834413" atv="14.205573" />
    </hotspot>

    <hotspot name="hotspot_2" url="hotspot_3.png"
    alpha="0.0"
    ath="0.0" atv="0.0" distorted="true" rx="0" ry="0" rz="0" ath="0" atv="0" edge="lefttop" ox="-7.630" oy="289.048" width="51.166" height="44.434"
    onover="tween(alpha,1.0);"
    onout="tween(alpha,0.0);"
    />

    <hotspot name="hs3" capture="false" zorder="2" alpha="0" onover="tween(hotspot[hotspot_2].alpha,1.0);" onout="tween(hotspot[hotspot_2].alpha,0.0);" ondown.touch="onover();" onup.touch="onout();"
    >
    <point ath="-0.819291" atv="32.385154" />
    <point ath="0.0" atv="30.248431" />
    <point ath="2.917862" atv="29.865693" />
    <point ath="5.008631" atv="30.327188" />
    <point ath="4.787858" atv="31.95849" />
    <point ath="4.083953" atv="32.401086" />
    <point ath="2.806943" atv="32.602128" />
    <point ath="1.866281" atv="33.360267" />
    <point ath="0.696411" atv="33.778505" />
    <point ath="-0.708114" atv="33.539232" />
    </hotspot>

    <hotspot name="hotspot_4" url="hotspot_4.png"
    alpha="0.0"
    ath="0.0" atv="0.0" distorted="true" rx="0" ry="0" rz="0" ath="180" atv="0" edge="lefttop" ox="-217.235" oy="-90.215" width="717.235" height="113.105"
    onover="tween(alpha,1.0);"
    onout="tween(alpha,0.0);"
    />

    <hotspot name="hs5" capture="false" zorder="2" alpha="0" onover="tween(hotspot[hotspot_4].alpha,1.0);" onout="tween(hotspot[hotspot_4].alpha,0.0);" ondown.touch="onover();" onup.touch="onout();"
    >
    <point ath="177.071134" atv="1.751764" />
    <point ath="176.999895" atv="-0.260468" />
    <point ath="177.62329" atv="-1.84388" />
    <point ath="179.06812" atv="-3.928368" />
    <point ath="-177.782368" atv="-3.94749" />
    <point ath="-175.843455" atv="-3.32542" />
    <point ath="-174.923829" atv="-2.047436" />
    <point ath="-174.617349" atv="0.119084" />
    <point ath="-174.509301" atv="1.969077" />
    <point ath="-178.714305" atv="2.160494" />
    </hotspot>

    <hotspot name="hs4" capture="false" zorder="2" alpha="0" onover="tween(hotspot[hotspot_4].alpha,1.0);" onout="tween(hotspot[hotspot_4].alpha,0.0);" ondown.touch="onover();" onup.touch="onout();"
    >
    <point ath="158.051727" atv="1.7443" />
    <point ath="157.325818" atv="0.87418" />
    <point ath="156.688016" atv="-1.705727" />
    <point ath="156.907391" atv="-4.31969" />
    <point ath="157.709973" atv="-7.052353" />
    <point ath="158.829721" atv="-7.922569" />
    <point ath="160.796606" atv="-8.341617" />
    <point ath="163.188827" atv="-8.571263" />
    <point ath="165.562659" atv="-8.708957" />
    <point ath="167.812463" atv="-8.137664" />
    <point ath="169.248356" atv="-7.574078" />
    <point ath="170.414182" atv="-5.340325" />
    <point ath="170.90386" atv="-3.996173" />
    <point ath="171.252063" atv="-1.257337" />
    <point ath="171.210819" atv="0.769128" />
    <point ath="170.909625" atv="1.62272" />
    <point ath="170.909625" atv="1.62272" />
    <point ath="167.241926" atv="1.68068" />
    </hotspot>
    <hotspot name="hs6" capture="false" zorder="2" alpha="0" onover="tween(hotspot[hotspot_4].alpha,1.0);" onout="tween(hotspot[hotspot_4].alpha,0.0);" ondown.touch="onover();" onup.touch="onout();"
    >
    <point ath="-163.2746" atv="1.647416" />
    <point ath="-163.2746" atv="1.647416" />
    <point ath="-162.709818" atv="-0.071034" />
    <point ath="-162.538744" atv="-2.360985" />
    <point ath="-161.109125" atv="-3.759568" />
    <point ath="-158.800321" atv="-3.721143" />
    <point ath="-156.065949" atv="-3.587112" />
    <point ath="-155.469141" atv="-2.112848" />
    <point ath="-154.755386" atv="0.66189" />
    <point ath="-155.079787" atv="2.238424" />
    <point ath="-159.524263" atv="2.292091" />
    </hotspot>
    <hotspot name="hs7" capture="false" zorder="2" alpha="0" onover="tween(hotspot[hotspot_4].alpha,1.0);" onout="tween(hotspot[hotspot_4].alpha,0.0);" ondown.touch="onover();" onup.touch="onout();"
    >
    <point ath="-145.666782" atv="0.872134" />
    <point ath="-145.666782" atv="0.872134" />
    <point ath="-145.461715" atv="-2.112851" />
    <point ath="-144.706247" atv="-5.11344" />
    <point ath="-142.82535" atv="-7.160761" />
    <point ath="-139.436186" atv="-7.757046" />
    <point ath="-135.877968" atv="-7.285168" />
    <point ath="-134.117207" atv="-6.236215" />
    <point ath="-133.281893" atv="-4.309679" />
    <point ath="-133.289741" atv="-0.482186" />
    <point ath="-134.129223" atv="1.207607" />
    <point ath="-137.764312" atv="2.225597" />
    <point ath="-144.724617" atv="1.803099" />
    </hotspot>

    <hotspot name="hotspot_5" url="hotspot_5.png"
    alpha="0.0"
    ath="0.0" atv="0.0" distorted="true" rx="0" ry="0" rz="0" ath="-90" atv="0" edge="lefttop" ox="-500" oy="-116.696" width="788.599" height="254.039"
    onover="tween(alpha,1.0);"
    onout="tween(alpha,0.0);"
    />

    <hotspot name="hs8" capture="false" zorder="2" alpha="0" onover="tween(hotspot[hotspot_5].alpha,1.0);" onout="tween(hotspot[hotspot_5].alpha,0.0);" ondown.touch="onover();" onup.touch="onout();"
    >
    <point ath="-71.389913" atv="14.242007" />
    <point ath="-73.157008" atv="14.10206" />
    <point ath="-75.167144" atv="13.564463" />
    <point ath="-77.522285" atv="10.793353" />
    <point ath="-79.155312" atv="7.261824" />
    <point ath="-78.305368" atv="2.328479" />
    <point ath="-76.79706" atv="-1.949873" />
    <point ath="-75.411751" atv="-5.395214" />
    <point ath="-74.158278" atv="-8.530481" />
    <point ath="-72.939743" atv="-9.959162" />
    <point ath="-71.850804" atv="-10.554272" />
    <point ath="-69.150355" atv="-11.906185" />
    <point ath="-65.733255" atv="-12.183558" />
    <point ath="-63.324033" atv="-11.641559" />
    <point ath="-62.067855" atv="-9.406504" />
    <point ath="-60.950317" atv="-5.815135" />
    <point ath="-60.141509" atv="-2.052627" />
    <point ath="-60.114452" atv="0.411018" />
    <point ath="-60.128813" atv="4.868931" />
    <point ath="-60.236772" atv="7.472639" />
    <point ath="-60.953097" atv="10.383235" />
    <point ath="-61.790485" atv="11.626362" />
    <point ath="-63.579543" atv="12.954776" />
    <point ath="-67.632757" atv="14.145307" />
    </hotspot>

    <hotspot name="hs9" capture="false" zorder="2" alpha="0" onover="tween(hotspot[hotspot_5].alpha,1.0);" onout="tween(hotspot[hotspot_5].alpha,0.0);" ondown.touch="onover();" onup.touch="onout();"
    >
    <point ath="-143.516415" atv="-6.528562" />
    <point ath="-144.451428" atv="-5.328948" />
    <point ath="-145.229447" atv="-3.654662" />
    <point ath="-145.790717" atv="-1.277308" />
    <point ath="-145.931535" atv="0.63981" />
    <point ath="-145.256715" atv="1.573223" />
    <point ath="-144.395142" atv="1.514715" />
    <point ath="-142.786845" atv="1.636881" />
    <point ath="-139.691701" atv="1.712345" />
    <point ath="-136.619905" atv="1.882322" />
    <point ath="-134.545084" atv="1.343105" />
    <point ath="-133.575319" atv="-0.428056" />
    <point ath="-132.936247" atv="-3.423817" />
    <point ath="-133.825632" atv="-6.046596" />
    <point ath="-135.961469" atv="-7.341101" />
    <point ath="-139.990956" atv="-7.606331" />
    <point ath="-141.673137" atv="-7.426884" />
    </hotspot>

    </krpano>

    I want to show two images by clicking one hotspot. here i used cube for 360 view. Please suggest me some examples. I want hotspot like this website http://www.toyota.co.th/makemycar/yaris/