Overlaying text

  • Thread starter Thread starter Guest
  • Start date Start date
G

Guest

Is it possible to overlay text boxes in Frontpage. I have 3 sets of
accommodation details that I want to include on my site but I want to overlay
them in the same area on the site with some form of access tab so that
customers can view the details one at a time. An example of what I am trying
to achieve can be seen in the new Yahoo Home Page .... where there are 3 tabs
.... one for sport, one for news and one for entertainment ... by clicking on
the relevant tab it brings up information on that subject in the same box on
the site.
 
Jon

Thanks for your help .... your site is doing exactly what I want mine to do
.... however I am not a technical person so not able to write actual code. Is
there a simple way of achieving the result in design mode of Frontpage or do
I have to write the code?
 
Upton said:
Jon

Thanks for your help .... your site is doing exactly what I want mine
to do ... however I am not a technical person so not able to write
actual code. Is there a simple way of achieving the result in design
mode of Frontpage or do I have to write the code?
Click to expand...

No, not really. You have to paste the code into FP in Code or HTML view.

I tried to duplicate what Jon's site does, but instead I came up with this, which is an adaptation of code by Murray (from this NG).

It uses buttons, not tabs, but you may be able to adapt this. It uses images from my site so it works, but you can substitute text
for the images. (Post back if you have any problem doing this.)

<html>
<head>
<meta http-equiv="Content-Language" content="en-us">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Slideshow Demo</title>
<script language="JavaScript">
<!--
function FP_setLayerText(id,txt)
{//v1.0
var el = FP_getObjectByID(id)
if(el.innerHTML)
el.innerHTML = txt
}
function FP_getObjectByID(id,o)
{// v1.0
var c, el, els, f, m, n
if(!o) o = document

if(o.getElementById)
el = o.getElementById(id)
else if(o.layers)
c = o.layers
else if(o.all)
el = o.all[id]

if(el)
return el

if(o.id==id || o.name==id)
return o

if(o.childNodes)
c = o.childNodes
if(c)
for(n = 0; n < c.length; n++)
{ el = FP_getObjectByID(id,c[n])
if(el)
return el }

f = o.forms
if(f)
for(n = 0; n < f.length; n++)
{ els = f[n].elements
for(m = 0; m < els.length; m++)
{ el = FP_getObjectByID(id,els[n])
if(el)
return el }
}
return null
}
// -->
</script>
</head>

<body>
<div id="layer1"
style="position: absolute; width: 400px; height: 400px;
z-index: 1; left: 200px; top: 100px;
font-family: trebuchet,verdana,arial,sans-serif;
font-size: 14px; font-color: black; background: #FFC;
border: 8px green inset; padding: 15px;">
Watch this space
</div>

<input type= "button" value="Show Image 1"
onclick="FP_setLayerText('layer1'
,'&lt;img src = &quot;http://tandcl.homemail.com.au/images/06-02-14-michelle.jpg&quot;&gt;')">
<input type= "button" value="Show Image 2"
onclick="FP_setLayerText('layer1',
'&lt;img src = &quot;http://tandcl.homemail.com.au/images/Trevor and Carole 05-12-13.jpg&quot;&gt;')">
</body>
</html>
 
Trevor

Thanks for the advice and code ... I will have a play around with it to see
if I can get it to work as part of our site ... will let you know if I am
successful. Thanks again

Trevor L. said:
Upton said:
Jon

Thanks for your help .... your site is doing exactly what I want mine
to do ... however I am not a technical person so not able to write
actual code. Is there a simple way of achieving the result in design
mode of Frontpage or do I have to write the code?
Click to expand...

No, not really. You have to paste the code into FP in Code or HTML view.

I tried to duplicate what Jon's site does, but instead I came up with this, which is an adaptation of code by Murray (from this NG).

It uses buttons, not tabs, but you may be able to adapt this. It uses images from my site so it works, but you can substitute text
for the images. (Post back if you have any problem doing this.)

<html>
<head>
<meta http-equiv="Content-Language" content="en-us">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Slideshow Demo</title>
<script language="JavaScript">
<!--
function FP_setLayerText(id,txt)
{//v1.0
var el = FP_getObjectByID(id)
if(el.innerHTML)
el.innerHTML = txt
}
function FP_getObjectByID(id,o)
{// v1.0
var c, el, els, f, m, n
if(!o) o = document

if(o.getElementById)
el = o.getElementById(id)
else if(o.layers)
c = o.layers
else if(o.all)
el = o.all[id]

if(el)
return el

if(o.id==id || o.name==id)
return o

if(o.childNodes)
c = o.childNodes
if(c)
for(n = 0; n < c.length; n++)
{ el = FP_getObjectByID(id,c[n])
if(el)
return el }

f = o.forms
if(f)
for(n = 0; n < f.length; n++)
{ els = f[n].elements
for(m = 0; m < els.length; m++)
{ el = FP_getObjectByID(id,els[n])
if(el)
return el }
}
return null
}
// -->
</script>
</head>

<body>
<div id="layer1"
style="position: absolute; width: 400px; height: 400px;
z-index: 1; left: 200px; top: 100px;
font-family: trebuchet,verdana,arial,sans-serif;
font-size: 14px; font-color: black; background: #FFC;
border: 8px green inset; padding: 15px;">
Watch this space
</div>

<input type= "button" value="Show Image 1"
onclick="FP_setLayerText('layer1'
,'<img src = "http://tandcl.homemail.com.au/images/06-02-14-michelle.jpg">')">
<input type= "button" value="Show Image 2"
onclick="FP_setLayerText('layer1',
'<img src = "http://tandcl.homemail.com.au/images/Trevor and Carole 05-12-13.jpg">')">
</body>
</html>
--
Cheers,
Trevor L.
[ Microsoft MVP - FrontPage ]
MVPS Website: http://trevorl.mvps.org/
Click to expand...
 
Hi Trevor,
The problem with that is it uses layers which may not be appropriate for
many sites. To do it like I did first you need some divs to hold the links
then some js to switch, I've put up an example here which is basically the
code from my site without the ajax stuff.
http://www.heresyourbook.com/TabsTest.htm

all the css and js is on page so it should be straight forward enough to
follow.

PS. I hadn't heard you were an MVP - congratulations :-)


--
Cheers,
Jon
Microsoft MVP

Trevor L. said:
Upton said:
Jon

Thanks for your help .... your site is doing exactly what I want mine
to do ... however I am not a technical person so not able to write
actual code. Is there a simple way of achieving the result in design
mode of Frontpage or do I have to write the code?
Click to expand...

No, not really. You have to paste the code into FP in Code or HTML view.

I tried to duplicate what Jon's site does, but instead I came up with
this, which is an adaptation of code by Murray (from this NG).

It uses buttons, not tabs, but you may be able to adapt this. It uses
images from my site so it works, but you can substitute text for the
images. (Post back if you have any problem doing this.)

<html>
<head>
<meta http-equiv="Content-Language" content="en-us">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Slideshow Demo</title>
<script language="JavaScript">
<!--
function FP_setLayerText(id,txt)
{//v1.0
var el = FP_getObjectByID(id)
if(el.innerHTML)
el.innerHTML = txt
}
function FP_getObjectByID(id,o)
{// v1.0
var c, el, els, f, m, n
if(!o) o = document

if(o.getElementById)
el = o.getElementById(id)
else if(o.layers)
c = o.layers
else if(o.all)
el = o.all[id]

if(el)
return el

if(o.id==id || o.name==id)
return o

if(o.childNodes)
c = o.childNodes
if(c)
for(n = 0; n < c.length; n++)
{ el = FP_getObjectByID(id,c[n])
if(el)
return el }

f = o.forms
if(f)
for(n = 0; n < f.length; n++)
{ els = f[n].elements
for(m = 0; m < els.length; m++)
{ el = FP_getObjectByID(id,els[n])
if(el)
return el }
}
return null
}
// -->
</script>
</head>

<body>
<div id="layer1"
style="position: absolute; width: 400px; height: 400px;
z-index: 1; left: 200px; top: 100px;
font-family: trebuchet,verdana,arial,sans-serif;
font-size: 14px; font-color: black; background: #FFC;
border: 8px green inset; padding: 15px;">
Watch this space
</div>

<input type= "button" value="Show Image 1"
onclick="FP_setLayerText('layer1'
,'&lt;img src =
&quot;http://tandcl.homemail.com.au/images/06-02-14-michelle.jpg&quot;&gt;')">
<input type= "button" value="Show Image 2"
onclick="FP_setLayerText('layer1',
'&lt;img src =
&quot;http://tandcl.homemail.com.au/images/Trevor and Carole
05-12-13.jpg&quot;&gt;')">
</body>
</html>
--
Cheers,
Trevor L.
[ Microsoft MVP - FrontPage ]
MVPS Website: http://trevorl.mvps.org/
Click to expand...
 
Jon

Thanks once again for your help. I have copied the code as I am not sure
when I will get a chance to work on the web-site .... we run a Bed and
Breakfast place ... so we are busy with guests and we are doing a lot of
renovation work on the house .... but will give it a go as soon as I get a
chnace ... but your help has been invaluable ... so thanks again.

Jon Spivey said:
Hi Trevor,
The problem with that is it uses layers which may not be appropriate for
many sites. To do it like I did first you need some divs to hold the links
then some js to switch, I've put up an example here which is basically the
code from my site without the ajax stuff.
http://www.heresyourbook.com/TabsTest.htm

all the css and js is on page so it should be straight forward enough to
follow.

PS. I hadn't heard you were an MVP - congratulations :-)


--
Cheers,
Jon
Microsoft MVP

Trevor L. said:
Upton said:
Jon

Thanks for your help .... your site is doing exactly what I want mine
to do ... however I am not a technical person so not able to write
actual code. Is there a simple way of achieving the result in design
mode of Frontpage or do I have to write the code?
Click to expand...

No, not really. You have to paste the code into FP in Code or HTML view.

I tried to duplicate what Jon's site does, but instead I came up with
this, which is an adaptation of code by Murray (from this NG).

It uses buttons, not tabs, but you may be able to adapt this. It uses
images from my site so it works, but you can substitute text for the
images. (Post back if you have any problem doing this.)

<html>
<head>
<meta http-equiv="Content-Language" content="en-us">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Slideshow Demo</title>
<script language="JavaScript">
<!--
function FP_setLayerText(id,txt)
{//v1.0
var el = FP_getObjectByID(id)
if(el.innerHTML)
el.innerHTML = txt
}
function FP_getObjectByID(id,o)
{// v1.0
var c, el, els, f, m, n
if(!o) o = document

if(o.getElementById)
el = o.getElementById(id)
else if(o.layers)
c = o.layers
else if(o.all)
el = o.all[id]

if(el)
return el

if(o.id==id || o.name==id)
return o

if(o.childNodes)
c = o.childNodes
if(c)
for(n = 0; n < c.length; n++)
{ el = FP_getObjectByID(id,c[n])
if(el)
return el }

f = o.forms
if(f)
for(n = 0; n < f.length; n++)
{ els = f[n].elements
for(m = 0; m < els.length; m++)
{ el = FP_getObjectByID(id,els[n])
if(el)
return el }
}
return null
}
// -->
</script>
</head>

<body>
<div id="layer1"
style="position: absolute; width: 400px; height: 400px;
z-index: 1; left: 200px; top: 100px;
font-family: trebuchet,verdana,arial,sans-serif;
font-size: 14px; font-color: black; background: #FFC;
border: 8px green inset; padding: 15px;">
Watch this space
</div>

<input type= "button" value="Show Image 1"
onclick="FP_setLayerText('layer1'
,'<img src =
"http://tandcl.homemail.com.au/images/06-02-14-michelle.jpg">')">
<input type= "button" value="Show Image 2"
onclick="FP_setLayerText('layer1',
'<img src =
"http://tandcl.homemail.com.au/images/Trevor and Carole
05-12-13.jpg">')">
</body>
</html>
--
Cheers,
Trevor L.
[ Microsoft MVP - FrontPage ]
MVPS Website: http://trevorl.mvps.org/
Click to expand...
Click to expand...
 
Back
Top