hello fellow listers :)
after a long battle i finally managed to get my inline images + layer
switching idea done and with no glitches in nn4/6 and msie... the only
remaining little thing about the code is image swapping - well, ugh,
it's not very convenient.
if you have a little time, take a look. maybe you know a simple
solution to my problem (see below, right after the source).
here comes the source:
------------------------------
<html>
<head>
<title>dynapi 2 layers/images</title>
<script language="Javascript" src="j/dynapi.js"></script>
<script language="Javascript">
DynAPI.setLibraryPath('j/lib/')
DynAPI.include('dynapi.api.*')
DynAPI.include('dynapi.event.*')
DynAPI.include('dynapi.ext.inline.js')
DynAPI.include('dynapi.gui.loadpanel.js');
DynAPI.include('dynapi.gui.dynimage.js');
</script>
<script language="Javascript">
DynAPI.onLoad=function()
{
m1 = DynImage.getImage('i/m-bar.gif');
m1_ = DynImage.getImage('i/m-bar_.gif');
layerone=this.document.getAll()['layer1']
layerone.setVisible(false)
layertwo=this.document.getAll()['layer2']
layertwo.setVisible(false)
main=this.document.getAll()['maindiv']
main.setVisible(true)
layerthree=new LoadPanel(); //create main panel
layerthree.setHTML("no file");
layerthree.setSize(77,200)
layerthree.setBgColor('green');
layerthree.moveTo(311,18); //slide most of it off the screen
layerthree.setVisible(true)
DynAPI.document.addChild(layerthree);
}
function setone()
{
DynAPI.document.getAll()['layer1'].setVisible(true)
DynAPI.document.getAll()['layer2'].setVisible(false)
}
function settwo()
{
DynAPI.document.getAll()['layer1'].setVisible(false)
DynAPI.document.getAll()['layer2'].setVisible(true)
}
function loadthree()
{
layerthree.setURL('external.html')
}
</script>
</head>
<body bgcolor="#ffffff" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<div id="layer1" style="position:absolute; left:7px; top:226px; width:129px;
height:181px; z-index:1; background: #006699; layer-background-color: #006699">
<table width=129 height=181 border=0 cellpadding=0 cellspacing=0>
<tr>
<td width=129 height=181>
<a href="javascript:alert('clicked')"
onmouseover="layerone.doc.images['imaaj2'].src='i/m-bar_.gif'"
onmouseout="layerone.doc.images['imaaj2'].src='i/m-bar.gif'"><img src="i/m-bar.gif"
border=0 name=imaaj2></a></td>
</tr>
</table></div>
<div id="layer2" style="position:absolute; left:155px; top:227px; width:129px;
height:181px; z-index:2; background: #CC0099; layer-background-color: #CC0099">
<table width=129 height=181 border=0 cellpadding=0 cellspacing=0>
<tr>
<td width=129 height=181> </td>
</tr>
</table>
</div>
<div id="maindiv" style="position:absolute">
<table width="300" border="0" cellspacing="0" cellpadding="0" height="200"
name="table1">
<tr>
<td bgcolor="#FFFF99" align="center" valign="middle">
<a href="javascript:setone()">one</a><br>
<a href="javascript:settwo()">two</a><br>
<a href="javascript:loadthree()">three</a><br><br>
<a href="javascript:alert('clicked')"
onmouseover="main.doc.images['imaaj1'].src='i/m-bar_.gif'"
onmouseout="main.doc.images['imaaj1'].src='i/m-bar.gif'"><img src="i/m-bar.gif"
border=0 name=imaaj1></a></td>
</tr>
</table>
</div>
</body>
</html>
------------------------------
now take a closer look at this piece:
<a href="javascript:alert('clicked')"
onmouseover="main.doc.images['imaaj1'].src='i/m-bar_.gif'"
onmouseout="main.doc.images['imaaj1'].src='i/m-bar.gif'"><img src="i/m-bar.gif"
border=0 name=imaaj1></a>
yes it's inline image with imageswapping added on
onmouseover/onmouseout events. as you can see, i swap them with
images.src - rather long statement. now, at the beginning of my code i
load these images with DynImage.getImage. is there any convenient way
to reference these images not by a long doc.images.src but by a short
name ? (for the given example they are m1 and m1_, respectively).
regards.
peace,
x.
http://xmypoe.com
_______________________________________________
Dynapi-Help mailing list
[EMAIL PROTECTED]
http://lists.sourceforge.net/lists/listinfo/dynapi-help
