EntropySink
Technical & Scientific => Programming => Topic started by: Betazep on February 06, 2013, 10:37:03 PM
-
So Visio has an export to webpage function that basically creates a boatload of JS and HTML files. Before doing the export, one can set a hyperlink on an object... and the hyperlink will open from the exported/saved webpage. The hyperlinks I am using go to an img/ directory to show various screenshots related to the process that the person is clicking on. My visio is basically a flow chart with hyperlinks to images on each of the process items. Even though I get the hyperlinks to open in a different window, it is not very clean because basically the person has to open an image... then close the tab... open the next image... then close the tab... etc. I also did a link to the image with a POST like quality http://url.html?image=MyImage1.jpg That allows me to use an HTML page to load each image which is only slightly better than just letting the browser render the image directly. (at least then I can have a background)
Lightbox (http://"http://lokeshdhakar.com/projects/lightbox2/") does EXACTLY what I want to do on this exported visio webpage... but the many files of Javascript that Visio spits out have been too difficult for me to decipher and figure out how to even manually place the link to the stylesheet, the two script lines... and most importantly the rel="lightbox[group]" and title="blahblah" switches in the (a href= /). (parens used on purpose there for descriptive purposes)
If any of you more-experienced-web-guys have Visio 2007, do you think you can create a Flowchart and add one process box. Select the process box (object) Insert/Hypertext and add a generic URL.... Save the file as Webpage which will create folders and all the files to render the webpage.... and tell me how I can force the page to render the hyperlink with those two lightbox switches in them? Basically reverse engineer the Visio webpage build files which contain several .js files and .xml files to build out the page dynamically. :(
Any help would be super appreciated. I spent three hours on this today with nothing good coming out of it other than I can definitely build my own html pages with lightbox.
I googled the hell out of it as well... and only found this.
http://social.technet.microsoft.com/Forums/en-US/visiogeneral/thread/dab71178-4cd4-47d8-aa6d-12195ee17c45/
Basically useless and stating basically the same problem I am having with no resolution.
-
Something tells me it's not that straight forward. You're probably going to need to generate the files and modify it afterwards.
-
That is what I am saying. The generated files are relatively complicated. PM me your email and I can send a zip file of the export as a quick example. Maybe you can tell me where the URL link can be edited to add in those keys in a working way.
-
Actually. I am certain that the object link resides in one HTM file for the page.... it has this code.
<html xmlns:v="urn:schemas-microsoft-com:vml"
xmlns="http://www.w3.org/TR/REC-html40">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<meta name="vs_targetSchema" content="http://schemas.microsoft.com/intellisense/ie5"/>
<link rel="stylesheet" type="text/css" href="visio.css"/>
<title>Drawing2</title>
<style type="text/css">
v\:* { behavior: url(#default#VML); }
</style>
<script src="vml_1.js" type="text/jscript" language="jscript"></script>
<script type="text/jscript" language="jscript">
var pageID = 0;
var viewMgr = null;
if (parent.g_FirstPageToLoad != null && parent.g_FirstPageToLoad.length > 0)
{
if (parent.g_FileList[parent.g_CurPageIndex].PageID != pageID)
{
location.replace(parent.g_FileList[parent.g_CurPageIndex].PriImage);
}
parent.g_FirstPageToLoad = null;
}
function getPNZ()
{
var rawHTML = VMLDiv.innerHTML;
var strReturn = ""
strReturn = rawHTML.slice( rawHTML.indexOf( '<v:group' ), rawHTML.indexOf( "</v:shape>" ) );
strReturn += "</v:shape></v:group>\n";
return strReturn;
}
function load()
{
viewMgr = new parent.CViewMgr("ConvertedImage", "arrowDiv");
viewMgr.put_Location = ViewMgrSetVMLLocation;
viewMgr.visBBoxLeft = 2.435833;
viewMgr.visBBoxRight = 6.126667;
viewMgr.visBBoxBottom = 4.232708;
viewMgr.visBBoxTop = 7.001667;
viewMgr.Zoom = VMLZoomChange;
viewMgr.setView= VMLSetView;
viewMgr.SupportsDetails = true;
viewMgr.SupportsSearch = true;
parent.viewMgr = viewMgr;
fit();
}
function unload()
{
viewMgr = null;
parent.viewMgr = null;
}
function fit()
{
if(parent.frmToolbar)
{
if (parent.g_WidgetsLoaded)
{
var zoom100 = parent.frmToolbar.document.all('a100');
if (zoom100)
{
parent.viewMgr.PostZoomProcessing = PostZoomProcessing;
zoom100.click();
}
else
{
parent.viewMgr.PostZoomProcessing = PostZoomProcessing;
viewMgr.Zoom(100);
}
}
else
{
window.setTimeout("fit()", 500);
}
}
else
{
parent.viewMgr.PostZoomProcessing = PostZoomProcessing;
viewMgr.Zoom(100);
}
}
function PostZoomProcessing (newZoomLevel)
{
parent.viewMgr.PostZoomProcessing = null;
var pageIndex = parent.PageIndexFromID (pageID);
parent.viewMgr.getPNZ = getPNZ;
parent.CurPageUpdate (pageIndex);
}
var isUpLevel = parent.isUpLevel;
var OnShapeClick = parent.OnShapeClick;
var OnShapeKey = parent.OnShapeKey;
var UpdateTooltip = parent.UpdateTooltip;
var clickMenu = parent.clickMenu;
var toggleMenuDiv = parent.toggleMenuDiv;
var toggleMenuLink = parent.toggleMenuLink;
var GoToPage = parent.GoToPage;
window.onload = load;
window.onunload = unload;
document.onclick = clickMenu;
</script>
</head>
<body style="MARGIN:10px" onresize="VMLOnResize();" onscroll="VMLOnScroll();">
<div id="arrowdiv" style="position:absolute;top:0;left:0;visibility:hidden;z-index:5">
<img id="arrowgif" alt="Shows the location of the selected shape" src="arrow.gif"/>
</div>
<div id="menu1" onclick="clickMenu()" class="hlMenu">
</div>
<div id="VMLDiv" >
<v:group id="ConvertedImage" style="width:5.331728in;height:4.000000in;position:absolute;visibility=hidden;" coordSize="2666,2000" coordOrigin="-1000,-1000" >
<v:shapetype
id="VISSHAPE"
target="_parent"
coordsize="2666,2000"
coordorigin="-1000,-1000"
stroked="f"
strokecolor="red"
filled="t"
>
<v:fill opacity="0.0"/>
</v:shapetype>
<v:shape style="top:-1000.0;left:-1000.0;width:2665.9;height:2000.0;position:absolute" coordSize="2666,2000" coordOrigin="-1000,-1000" >
<v:imagedata src="vml_1.emz"/>
</v:shape>
<v:shape type="#VISSHAPE" origHref="Agentportal.jpg" style="cursor: pointer;" tabindex="1" title="Hello World" origTitle="Hello World" style="top:-1000;left:-1000;width:2666;height:2000;position:absolute" path=" m -988,988 l 1653,988 l 1653,-988 l -988,-988 l -988,988xe" onmouseover="UpdateTooltip(this,0,1)" onclick="OnShapeClick(0,1)" onfocus="UpdateTooltip(this,0,1);" onkeyup="OnShapeKey(0,1)"/>
</v:group>
</div>
</body>
</html>
-
This is the object that contains the link (called origHref="Agentportal.jpg")
<v:shape type="#VISSHAPE" origHref="Agentportal.jpg" style="cursor: pointer;" tabindex="1" title="Hello World" origTitle="Hello
World" style="top:-1000;left:-1000;width:2666;height:2000;position:absolute" path=" m -988,988 l 1653,988 l 1653,-988 l -988,
-988 l -988,988xe" onmouseover="UpdateTooltip(this,0,1)" onclick="OnShapeClick(0,1)" onfocus="UpdateTooltip(this,0,1);"
onkeyup="OnShapeKey(0,1)"/>
This is definitely not in the (a href="AgentPortal.jpg") format where I could just add in --> rel="lightbox[group]" <--
e.g. <a href="AgentPortal.jpg" rel="lightbox[Mygroup1]" title="The Agent Portal">
-
/me goes and cries in a corner after reading that crap
-
Yeah... I gave up on this. Found an alternative.