Help with layers and behaviors

S

swash

I'm trying to make a simple image gallery where you roll over the thumbnails
and the larger picture shows on the same page like it's done on this page.

http://www.anaffairtoremember.com/showcase/andrews-chow/index.html

I know it's done with layer and behaviors but I can't figure out how to set
it up. I've never worked with layers and can't find any detailed info on it.
I'm assuming that you lay the thumbnais out in the first layer like the a
table but I cant figure out how to get the bigger images to show when rolling
over each thumbnail.

Thanks
 
S

swash

Thanks. That is some good information. I still don't know the basics of how
to set the page up to look like the one I posted.
 
M

Murray

I can guarantee you it was done in DW -

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html><!-- InstanceBegin template="/Templates/maintemplate.dwt"
codeOutsideHTMLIsLocked="false" -->

And most likely in DW6, since that is the only version that wrote a broken
HTML4.01 Transitional doctype.

The code on the page is pretty straightforward. It's simple disjoint
(remote) image swaps on each thumb. While not optimal, this works.
 
T

Trevor L.

swash said:
Hi. Yes I'm just interested in having a image gallery that behaves
like this one. I would say I am fair in frontpage. I'm pretty good
at catching on and self teaching though. I did edit page with
frontpage to get a better look at the code. I'm just not familiar
with these layers. Is there a way to do it without layers?
Click to expand...

As one who has taken good advice from Murray, I would agree with what he
wrote.

But I can see you want some specific information. Murray himself has written
a good test page showing larger images displaying when thumbnials are moused
over.

I will see if I can find it and get back to you.

You will need to know how to enter code in FrontPage - using the Code or
HTML view (depending on your version of FP). This is accessed via a tab at
the bottom of the screen.
 
E

E. T. Culling

I think he also REALLY needs the java scripts.
Trevor L. said:
As one who has taken good advice from Murray, I would agree with what he
wrote.

But I can see you want some specific information. Murray himself has
written a good test page showing larger images displaying when thumbnials
are moused over.

I will see if I can find it and get back to you.

You will need to know how to enter code in FrontPage - using the Code or
HTML view (depending on your version of FP). This is accessed via a tab at
the bottom of the screen.
Click to expand...
 
T

Trevor L.

E. T. Culling said:
I think he also REALLY needs the java scripts.
Click to expand...

Thanks Eleanor.
I posted my reply as a "please hold" while I had a lunch break.

Swash,
The site you referred to uses layers and mouseovers and some Javascript
functions.

Here is a fairly simple piece of code (basically Murray's with a small
change to remove the image on mouseout) which I think will do what you want.
It also uses layers and mouseovers, but the functions are a bit simpler.

You need to provide the images. This code assumes they are
images/1.jpg
images/2.jpg
images/3.jpg
images/1.jpg

Change these to what you want and amend the code accordingly.

You may also want to change the borders on 'layer1'. I leave that up to you.

CODE FOLLOWS
<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 type="text/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: 30px;
font-family: trebuchet,verdana,arial,sans-serif;
font-size: 14px; font-color: black; background: #FFC;
border: 8px green inset; padding: 15px;">
<!-- <img src = "images/1.jpg";> -->
Watch this space
</div>
<p><a href=""
onmouseover="FP_setLayerText('layer1',
'&lt;img src = &quot;images/1.jpg&quot;&gt;')"
onmouseout="FP_setLayerText('layer1','Watch this space')">
<img border="0" src="images/1.jpg" width="100" height="100">
</a></p>
<p><a href=""
onmouseover="FP_setLayerText('layer1',
'&lt;img src = &quot;images/2.jpg&quot;&gt;')"
onmouseout="FP_setLayerText('layer1','Watch this space')">
<img border="0" src="images/2.jpg" width="100" height="100">
</a></p>
<p><a href=""
onmouseover="FP_setLayerText('layer1',
'&lt;img src = &quot;images/3.jpg&quot;&gt;')"
onmouseout="FP_setLayerText('layer1','Watch this space')">
<img border="0" src="images/3.jpg" width="100" height="100">
</a></p>
<p><a href=""
onmouseover="FP_setLayerText('layer1',
'&lt;img src = &quot;images/4.jpg&quot;&gt;')"
onmouseout="FP_setLayerText('layer1','Watch this space')">
<img border="0" src="images/4.jpg" width="100" height="100">
</a></p>
</body>
</html>
 
M

Murray

Just so, Trevor. Nice paraphrase. How was lunch? 8)

--
Murray
--------------
MVP FrontPage


Trevor L. said:
E. T. Culling said:
I think he also REALLY needs the java scripts.
Click to expand...

Thanks Eleanor.
I posted my reply as a "please hold" while I had a lunch break.

Swash,
The site you referred to uses layers and mouseovers and some Javascript
functions.

Here is a fairly simple piece of code (basically Murray's with a small
change to remove the image on mouseout) which I think will do what you
want.
It also uses layers and mouseovers, but the functions are a bit simpler.

You need to provide the images. This code assumes they are
images/1.jpg
images/2.jpg
images/3.jpg
images/1.jpg

Change these to what you want and amend the code accordingly.

You may also want to change the borders on 'layer1'. I leave that up to
you.

CODE FOLLOWS
<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 type="text/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: 30px;
font-family: trebuchet,verdana,arial,sans-serif;
font-size: 14px; font-color: black; background: #FFC;
border: 8px green inset; padding: 15px;">
<!-- <img src = "images/1.jpg";> -->
Watch this space
</div>
<p><a href=""
onmouseover="FP_setLayerText('layer1',
'&lt;img src = &quot;images/1.jpg&quot;&gt;')"
onmouseout="FP_setLayerText('layer1','Watch this space')">
<img border="0" src="images/1.jpg" width="100" height="100">
</a></p>
<p><a href=""
onmouseover="FP_setLayerText('layer1',
'&lt;img src = &quot;images/2.jpg&quot;&gt;')"
onmouseout="FP_setLayerText('layer1','Watch this space')">
<img border="0" src="images/2.jpg" width="100" height="100">
</a></p>
<p><a href=""
onmouseover="FP_setLayerText('layer1',
'&lt;img src = &quot;images/3.jpg&quot;&gt;')"
onmouseout="FP_setLayerText('layer1','Watch this space')">
<img border="0" src="images/3.jpg" width="100" height="100">
</a></p>
<p><a href=""
onmouseover="FP_setLayerText('layer1',
'&lt;img src = &quot;images/4.jpg&quot;&gt;')"
onmouseout="FP_setLayerText('layer1','Watch this space')">
<img border="0" src="images/4.jpg" width="100" height="100">
</a></p>
</body>
</html>
Click to expand...
 
R

Rob Giordano \(Crash\)

What's a lunch break?



| Just so, Trevor. Nice paraphrase. How was lunch? 8)
|
| --
| Murray
| --------------
| MVP FrontPage
|
|
| | > E. T. Culling wrote:
| >> I think he also REALLY needs the java scripts.
| >
| > Thanks Eleanor.
| > I posted my reply as a "please hold" while I had a lunch break.
| >
| > Swash,
| > The site you referred to uses layers and mouseovers and some Javascript
| > functions.
| >
| > Here is a fairly simple piece of code (basically Murray's with a small
| > change to remove the image on mouseout) which I think will do what you
| > want.
| > It also uses layers and mouseovers, but the functions are a bit simpler.
| >
| > You need to provide the images. This code assumes they are
| > images/1.jpg
| > images/2.jpg
| > images/3.jpg
| > images/1.jpg
| >
| > Change these to what you want and amend the code accordingly.
| >
| > You may also want to change the borders on 'layer1'. I leave that up to
| > you.
| >
| > CODE FOLLOWS
| > <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 type="text/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: 30px;
| > font-family: trebuchet,verdana,arial,sans-serif;
| > font-size: 14px; font-color: black; background: #FFC;
| > border: 8px green inset; padding: 15px;">
| > <!-- <img src = "images/1.jpg";> -->
| > Watch this space
| > </div>
| > <p><a href=""
| > onmouseover="FP_setLayerText('layer1',
| > '&lt;img src = &quot;images/1.jpg&quot;&gt;')"
| > onmouseout="FP_setLayerText('layer1','Watch this space')">
| > <img border="0" src="images/1.jpg" width="100" height="100">
| > </a></p>
| > <p><a href=""
| > onmouseover="FP_setLayerText('layer1',
| > '&lt;img src = &quot;images/2.jpg&quot;&gt;')"
| > onmouseout="FP_setLayerText('layer1','Watch this space')">
| > <img border="0" src="images/2.jpg" width="100" height="100">
| > </a></p>
| > <p><a href=""
| > onmouseover="FP_setLayerText('layer1',
| > '&lt;img src = &quot;images/3.jpg&quot;&gt;')"
| > onmouseout="FP_setLayerText('layer1','Watch this space')">
| > <img border="0" src="images/3.jpg" width="100" height="100">
| > </a></p>
| > <p><a href=""
| > onmouseover="FP_setLayerText('layer1',
| > '&lt;img src = &quot;images/4.jpg&quot;&gt;')"
| > onmouseout="FP_setLayerText('layer1','Watch this space')">
| > <img border="0" src="images/4.jpg" width="100" height="100">
| > </a></p>
| > </body>
| > </html>
| > --
| > Cheers,
| > Trevor L.
| > Website: http://tandcl.homemail.com.au
| >
|
|
 
S

swash

Thanks to all 3 of you. This works just like I needed. I never would have
gotten that script right. You all are the best. One more question, How can
I format the text that says 'Watch this space'? I know that I can format the
first one
<div id="layer1"
style="position: absolute; width: 400px; height: 400px;
z-index: 1; left: 200px; top: 30px;
font-family: trebuchet,verdana,arial,sans-serif;
font-size: 14px; font-color: black; background: #FFC;
border: 8px green inset; padding: 15px;">
<!-- <img src = "images/1.jpg";> -->
Watch this space
</div>
Click to expand...

But how can I fomat the ones that are located int the mouseover event like
this one:
onmouseout="FP_setLayerText('layer1','Watch this space')">


I don't actually see the text in design view and I tried doing something
directly with the code but it wasn't right because I got an error.

Thanks again



Trevor L. said:
E. T. Culling said:
I think he also REALLY needs the java scripts.
Click to expand...

Thanks Eleanor.
I posted my reply as a "please hold" while I had a lunch break.

Swash,
The site you referred to uses layers and mouseovers and some Javascript
functions.

Here is a fairly simple piece of code (basically Murray's with a small
change to remove the image on mouseout) which I think will do what you want.
It also uses layers and mouseovers, but the functions are a bit simpler.

You need to provide the images. This code assumes they are
images/1.jpg
images/2.jpg
images/3.jpg
images/1.jpg

Change these to what you want and amend the code accordingly.

You may also want to change the borders on 'layer1'. I leave that up to you.

CODE FOLLOWS
<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 type="text/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: 30px;
font-family: trebuchet,verdana,arial,sans-serif;
font-size: 14px; font-color: black; background: #FFC;
border: 8px green inset; padding: 15px;">
<!-- <img src = "images/1.jpg";> -->
Watch this space
</div>
<p><a href=""
onmouseover="FP_setLayerText('layer1',
'<img src = "images/1.jpg">')"
onmouseout="FP_setLayerText('layer1','Watch this space')">
<img border="0" src="images/1.jpg" width="100" height="100">
</a></p>
<p><a href=""
onmouseover="FP_setLayerText('layer1',
'<img src = "images/2.jpg">')"
onmouseout="FP_setLayerText('layer1','Watch this space')">
<img border="0" src="images/2.jpg" width="100" height="100">
</a></p>
<p><a href=""
onmouseover="FP_setLayerText('layer1',
'<img src = "images/3.jpg">')"
onmouseout="FP_setLayerText('layer1','Watch this space')">
<img border="0" src="images/3.jpg" width="100" height="100">
</a></p>
<p><a href=""
onmouseover="FP_setLayerText('layer1',
'<img src = "images/4.jpg">')"
onmouseout="FP_setLayerText('layer1','Watch this space')">
<img border="0" src="images/4.jpg" width="100" height="100">
</a></p>
</body>
</html>
Click to expand...
 
M

Murray

#layer1 { color:green; font-weight:bold; font-size:large; }

--
Murray
--------------
MVP FrontPage


swash said:
Thanks to all 3 of you. This works just like I needed. I never would
have
gotten that script right. You all are the best. One more question, How
can
I format the text that says 'Watch this space'? I know that I can format
the
first one
<div id="layer1"
style="position: absolute; width: 400px; height: 400px;
z-index: 1; left: 200px; top: 30px;
font-family: trebuchet,verdana,arial,sans-serif;
font-size: 14px; font-color: black; background: #FFC;
border: 8px green inset; padding: 15px;">
<!-- <img src = "images/1.jpg";> -->
Watch this space
</div>
Click to expand...

But how can I fomat the ones that are located int the mouseover event like
this one:
onmouseout="FP_setLayerText('layer1','Watch this space')">


I don't actually see the text in design view and I tried doing something
directly with the code but it wasn't right because I got an error.

Thanks again



Trevor L. said:
E. T. Culling said:
I think he also REALLY needs the java scripts.
Click to expand...

Thanks Eleanor.
I posted my reply as a "please hold" while I had a lunch break.

Swash,
The site you referred to uses layers and mouseovers and some Javascript
functions.

Here is a fairly simple piece of code (basically Murray's with a small
change to remove the image on mouseout) which I think will do what you
want.
It also uses layers and mouseovers, but the functions are a bit simpler.

You need to provide the images. This code assumes they are
images/1.jpg
images/2.jpg
images/3.jpg
images/1.jpg

Change these to what you want and amend the code accordingly.

You may also want to change the borders on 'layer1'. I leave that up to
you.

CODE FOLLOWS
<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 type="text/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: 30px;
font-family: trebuchet,verdana,arial,sans-serif;
font-size: 14px; font-color: black; background: #FFC;
border: 8px green inset; padding: 15px;">
<!-- <img src = "images/1.jpg";> -->
Watch this space
</div>
<p><a href=""
onmouseover="FP_setLayerText('layer1',
'<img src = "images/1.jpg">')"
onmouseout="FP_setLayerText('layer1','Watch this space')">
<img border="0" src="images/1.jpg" width="100" height="100">
</a></p>
<p><a href=""
onmouseover="FP_setLayerText('layer1',
'<img src = "images/2.jpg">')"
onmouseout="FP_setLayerText('layer1','Watch this space')">
<img border="0" src="images/2.jpg" width="100" height="100">
</a></p>
<p><a href=""
onmouseover="FP_setLayerText('layer1',
'<img src = "images/3.jpg">')"
onmouseout="FP_setLayerText('layer1','Watch this space')">
<img border="0" src="images/3.jpg" width="100" height="100">
</a></p>
<p><a href=""
onmouseover="FP_setLayerText('layer1',
'<img src = "images/4.jpg">')"
onmouseout="FP_setLayerText('layer1','Watch this space')">
<img border="0" src="images/4.jpg" width="100" height="100">
</a></p>
</body>
</html>
Click to expand...
Click to expand...
 
S

swash

where should i put this in the code?

Murray said:
#layer1 { color:green; font-weight:bold; font-size:large; }

--
Murray
--------------
MVP FrontPage


swash said:
Thanks to all 3 of you. This works just like I needed. I never would
have
gotten that script right. You all are the best. One more question, How
can
I format the text that says 'Watch this space'? I know that I can format
the
first one
<div id="layer1"
style="position: absolute; width: 400px; height: 400px;
z-index: 1; left: 200px; top: 30px;
font-family: trebuchet,verdana,arial,sans-serif;
font-size: 14px; font-color: black; background: #FFC;
border: 8px green inset; padding: 15px;">
<!-- <img src = "images/1.jpg";> -->
Watch this space
</div>
Click to expand...

But how can I fomat the ones that are located int the mouseover event like
this one:
onmouseout="FP_setLayerText('layer1','Watch this space')">


I don't actually see the text in design view and I tried doing something
directly with the code but it wasn't right because I got an error.

Thanks again



Trevor L. said:
E. T. Culling wrote:
I think he also REALLY needs the java scripts.

Thanks Eleanor.
I posted my reply as a "please hold" while I had a lunch break.

Swash,
The site you referred to uses layers and mouseovers and some Javascript
functions.

Here is a fairly simple piece of code (basically Murray's with a small
change to remove the image on mouseout) which I think will do what you
want.
It also uses layers and mouseovers, but the functions are a bit simpler.

You need to provide the images. This code assumes they are
images/1.jpg
images/2.jpg
images/3.jpg
images/1.jpg

Change these to what you want and amend the code accordingly.

You may also want to change the borders on 'layer1'. I leave that up to
you.

CODE FOLLOWS
<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 type="text/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: 30px;
font-family: trebuchet,verdana,arial,sans-serif;
font-size: 14px; font-color: black; background: #FFC;
border: 8px green inset; padding: 15px;">
<!-- <img src = "images/1.jpg";> -->
Watch this space
</div>
<p><a href=""
onmouseover="FP_setLayerText('layer1',
'<img src = "images/1.jpg">')"
onmouseout="FP_setLayerText('layer1','Watch this space')">
<img border="0" src="images/1.jpg" width="100" height="100">
</a></p>
<p><a href=""
onmouseover="FP_setLayerText('layer1',
'<img src = "images/2.jpg">')"
onmouseout="FP_setLayerText('layer1','Watch this space')">
<img border="0" src="images/2.jpg" width="100" height="100">
</a></p>
<p><a href=""
onmouseover="FP_setLayerText('layer1',
'<img src = "images/3.jpg">')"
onmouseout="FP_setLayerText('layer1','Watch this space')">
<img border="0" src="images/3.jpg" width="100" height="100">
</a></p>
<p><a href=""
onmouseover="FP_setLayerText('layer1',
'<img src = "images/4.jpg">')"
onmouseout="FP_setLayerText('layer1','Watch this space')">
<img border="0" src="images/4.jpg" width="100" height="100">
</a></p>
</body>
</html>
Click to expand...
Click to expand...
Click to expand...
 
M

Murray

<style type="text/css">
#layer1 { color:green; font-weight:bold; font-size:large; }
</style>
</head>

Like that....

--
Murray
--------------
MVP FrontPage


swash said:
where should i put this in the code?

Murray said:
#layer1 { color:green; font-weight:bold; font-size:large; }

--
Murray
--------------
MVP FrontPage


swash said:
Thanks to all 3 of you. This works just like I needed. I never would
have
gotten that script right. You all are the best. One more question,
How
can
I format the text that says 'Watch this space'? I know that I can
format
the
first one
<div id="layer1"
style="position: absolute; width: 400px; height: 400px;
z-index: 1; left: 200px; top: 30px;
font-family: trebuchet,verdana,arial,sans-serif;
font-size: 14px; font-color: black; background: #FFC;
border: 8px green inset; padding: 15px;">
<!-- <img src = "images/1.jpg";> -->
Watch this space
</div>

But how can I fomat the ones that are located int the mouseover event
like
this one:
onmouseout="FP_setLayerText('layer1','Watch this space')">


I don't actually see the text in design view and I tried doing
something
directly with the code but it wasn't right because I got an error.

Thanks again



:

E. T. Culling wrote:
I think he also REALLY needs the java scripts.

Thanks Eleanor.
I posted my reply as a "please hold" while I had a lunch break.

Swash,
The site you referred to uses layers and mouseovers and some
Javascript
functions.

Here is a fairly simple piece of code (basically Murray's with a small
change to remove the image on mouseout) which I think will do what you
want.
It also uses layers and mouseovers, but the functions are a bit
simpler.

You need to provide the images. This code assumes they are
images/1.jpg
images/2.jpg
images/3.jpg
images/1.jpg

Change these to what you want and amend the code accordingly.

You may also want to change the borders on 'layer1'. I leave that up
to
you.

CODE FOLLOWS
<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 type="text/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: 30px;
font-family: trebuchet,verdana,arial,sans-serif;
font-size: 14px; font-color: black; background: #FFC;
border: 8px green inset; padding: 15px;">
<!-- <img src = "images/1.jpg";> -->
Watch this space
</div>
<p><a href=""
onmouseover="FP_setLayerText('layer1',
'<img src = "images/1.jpg">')"
onmouseout="FP_setLayerText('layer1','Watch this space')">
<img border="0" src="images/1.jpg" width="100" height="100">
</a></p>
<p><a href=""
onmouseover="FP_setLayerText('layer1',
'<img src = "images/2.jpg">')"
onmouseout="FP_setLayerText('layer1','Watch this space')">
<img border="0" src="images/2.jpg" width="100" height="100">
</a></p>
<p><a href=""
onmouseover="FP_setLayerText('layer1',
'<img src = "images/3.jpg">')"
onmouseout="FP_setLayerText('layer1','Watch this space')">
<img border="0" src="images/3.jpg" width="100" height="100">
</a></p>
<p><a href=""
onmouseover="FP_setLayerText('layer1',
'<img src = "images/4.jpg">')"
onmouseout="FP_setLayerText('layer1','Watch this space')">
<img border="0" src="images/4.jpg" width="100" height="100">
</a></p>
</body>
</html>
Click to expand...
Click to expand...
Click to expand...
 
S

swash

I can't get it. Is this supposed to before, after or instead of

style="position: absolute; width: 400px; height: 400px;

Or somewhere else. Sorry.

Murray said:
<style type="text/css">
#layer1 { color:green; font-weight:bold; font-size:large; }
</style>
</head>

Like that....

--
Murray
--------------
MVP FrontPage


swash said:
where should i put this in the code?

Murray said:
#layer1 { color:green; font-weight:bold; font-size:large; }

--
Murray
--------------
MVP FrontPage


Thanks to all 3 of you. This works just like I needed. I never would
have
gotten that script right. You all are the best. One more question,
How
can
I format the text that says 'Watch this space'? I know that I can
format
the
first one
<div id="layer1"
style="position: absolute; width: 400px; height: 400px;
z-index: 1; left: 200px; top: 30px;
font-family: trebuchet,verdana,arial,sans-serif;
font-size: 14px; font-color: black; background: #FFC;
border: 8px green inset; padding: 15px;">
<!-- <img src = "images/1.jpg";> -->
Watch this space
</div>

But how can I fomat the ones that are located int the mouseover event
like
this one:
onmouseout="FP_setLayerText('layer1','Watch this space')">


I don't actually see the text in design view and I tried doing
something
directly with the code but it wasn't right because I got an error.

Thanks again



:

E. T. Culling wrote:
I think he also REALLY needs the java scripts.

Thanks Eleanor.
I posted my reply as a "please hold" while I had a lunch break.

Swash,
The site you referred to uses layers and mouseovers and some
Javascript
functions.

Here is a fairly simple piece of code (basically Murray's with a small
change to remove the image on mouseout) which I think will do what you
want.
It also uses layers and mouseovers, but the functions are a bit
simpler.

You need to provide the images. This code assumes they are
images/1.jpg
images/2.jpg
images/3.jpg
images/1.jpg

Change these to what you want and amend the code accordingly.

You may also want to change the borders on 'layer1'. I leave that up
to
you.

CODE FOLLOWS
<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 type="text/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: 30px;
font-family: trebuchet,verdana,arial,sans-serif;
font-size: 14px; font-color: black; background: #FFC;
border: 8px green inset; padding: 15px;">
<!-- <img src = "images/1.jpg";> -->
Watch this space
</div>
<p><a href=""
onmouseover="FP_setLayerText('layer1',
'<img src = "images/1.jpg">')"
onmouseout="FP_setLayerText('layer1','Watch this space')">
<img border="0" src="images/1.jpg" width="100" height="100">
</a></p>
<p><a href=""
onmouseover="FP_setLayerText('layer1',
'<img src = "images/2.jpg">')"
onmouseout="FP_setLayerText('layer1','Watch this space')">
<img border="0" src="images/2.jpg" width="100" height="100">
</a></p>
<p><a href=""
onmouseover="FP_setLayerText('layer1',
'<img src = "images/3.jpg">')"
onmouseout="FP_setLayerText('layer1','Watch this space')">
<img border="0" src="images/3.jpg" width="100" height="100">
</a></p>
<p><a href=""
onmouseover="FP_setLayerText('layer1',
'<img src = "images/4.jpg">')"
onmouseout="FP_setLayerText('layer1','Watch this space')">
<img border="0" src="images/4.jpg" width="100" height="100">
</a></p>
</body>
</html>
Click to expand...
Click to expand...
Click to expand...
 
M

Murray

Leave that part of the code alone. Find the </head> tag on the page, and
replace it with what I showed below as my suggestion.

--
Murray
--------------
MVP FrontPage


swash said:
I can't get it. Is this supposed to before, after or instead of

style="position: absolute; width: 400px; height: 400px;

Or somewhere else. Sorry.

Murray said:
<style type="text/css">
#layer1 { color:green; font-weight:bold; font-size:large; }
</style>
</head>

Like that....

--
Murray
--------------
MVP FrontPage


swash said:
where should i put this in the code?

:

#layer1 { color:green; font-weight:bold; font-size:large; }

--
Murray
--------------
MVP FrontPage


Thanks to all 3 of you. This works just like I needed. I never
would
have
gotten that script right. You all are the best. One more question,
How
can
I format the text that says 'Watch this space'? I know that I can
format
the
first one
<div id="layer1"
style="position: absolute; width: 400px; height: 400px;
z-index: 1; left: 200px; top: 30px;
font-family: trebuchet,verdana,arial,sans-serif;
font-size: 14px; font-color: black; background: #FFC;
border: 8px green inset; padding: 15px;">
<!-- <img src = "images/1.jpg";> -->
Watch this space
</div>

But how can I fomat the ones that are located int the mouseover
event
like
this one:
onmouseout="FP_setLayerText('layer1','Watch this space')">


I don't actually see the text in design view and I tried doing
something
directly with the code but it wasn't right because I got an error.

Thanks again



:

E. T. Culling wrote:
I think he also REALLY needs the java scripts.

Thanks Eleanor.
I posted my reply as a "please hold" while I had a lunch break.

Swash,
The site you referred to uses layers and mouseovers and some
Javascript
functions.

Here is a fairly simple piece of code (basically Murray's with a
small
change to remove the image on mouseout) which I think will do what
you
want.
It also uses layers and mouseovers, but the functions are a bit
simpler.

You need to provide the images. This code assumes they are
images/1.jpg
images/2.jpg
images/3.jpg
images/1.jpg

Change these to what you want and amend the code accordingly.

You may also want to change the borders on 'layer1'. I leave that
up
to
you.

CODE FOLLOWS
<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 type="text/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: 30px;
font-family: trebuchet,verdana,arial,sans-serif;
font-size: 14px; font-color: black; background: #FFC;
border: 8px green inset; padding: 15px;">
<!-- <img src = "images/1.jpg";> -->
Watch this space
</div>
<p><a href=""
onmouseover="FP_setLayerText('layer1',
'<img src = "images/1.jpg">')"
onmouseout="FP_setLayerText('layer1','Watch this space')">
<img border="0" src="images/1.jpg" width="100" height="100">
</a></p>
<p><a href=""
onmouseover="FP_setLayerText('layer1',
'<img src = "images/2.jpg">')"
onmouseout="FP_setLayerText('layer1','Watch this space')">
<img border="0" src="images/2.jpg" width="100" height="100">
</a></p>
<p><a href=""
onmouseover="FP_setLayerText('layer1',
'<img src = "images/3.jpg">')"
onmouseout="FP_setLayerText('layer1','Watch this space')">
<img border="0" src="images/3.jpg" width="100" height="100">
</a></p>
<p><a href=""
onmouseover="FP_setLayerText('layer1',
'<img src = "images/4.jpg">')"
onmouseout="FP_setLayerText('layer1','Watch this space')">
<img border="0" src="images/4.jpg" width="100" height="100">
</a></p>
</body>
</html>
Click to expand...
Click to expand...
Click to expand...
 
S

swash

Hats off! Applause! and Many Thanks!!! to you

Murray said:
Leave that part of the code alone. Find the </head> tag on the page, and
replace it with what I showed below as my suggestion.

--
Murray
--------------
MVP FrontPage


swash said:
I can't get it. Is this supposed to before, after or instead of

style="position: absolute; width: 400px; height: 400px;
z-index: 1; left: 200px; top: 30px;
font-family: trebuchet,verdana,arial,sans-serif;
font-size: 14px; font-color: black; background: #FFC;
border: 8px green inset; padding: 15px;">
<!-- <img src = "images/1.jpg";> -->
Watch this space
Click to expand...


Or somewhere else. Sorry.

Murray said:
<style type="text/css">
#layer1 { color:green; font-weight:bold; font-size:large; }
</style>
</head>

Like that....

--
Murray
--------------
MVP FrontPage


where should i put this in the code?

:

#layer1 { color:green; font-weight:bold; font-size:large; }

--
Murray
--------------
MVP FrontPage


Thanks to all 3 of you. This works just like I needed. I never
would
have
gotten that script right. You all are the best. One more question,
How
can
I format the text that says 'Watch this space'? I know that I can
format
the
first one
<div id="layer1"
style="position: absolute; width: 400px; height: 400px;
z-index: 1; left: 200px; top: 30px;
font-family: trebuchet,verdana,arial,sans-serif;
font-size: 14px; font-color: black; background: #FFC;
border: 8px green inset; padding: 15px;">
<!-- <img src = "images/1.jpg";> -->
Watch this space
</div>

But how can I fomat the ones that are located int the mouseover
event
like
this one:
onmouseout="FP_setLayerText('layer1','Watch this space')">


I don't actually see the text in design view and I tried doing
something
directly with the code but it wasn't right because I got an error.

Thanks again



:

E. T. Culling wrote:
I think he also REALLY needs the java scripts.

Thanks Eleanor.
I posted my reply as a "please hold" while I had a lunch break.

Swash,
The site you referred to uses layers and mouseovers and some
Javascript
functions.

Here is a fairly simple piece of code (basically Murray's with a
small
change to remove the image on mouseout) which I think will do what
you
want.
It also uses layers and mouseovers, but the functions are a bit
simpler.

You need to provide the images. This code assumes they are
images/1.jpg
images/2.jpg
images/3.jpg
images/1.jpg

Change these to what you want and amend the code accordingly.

You may also want to change the borders on 'layer1'. I leave that
up
to
you.

CODE FOLLOWS
<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 type="text/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: 30px;
font-family: trebuchet,verdana,arial,sans-serif;
font-size: 14px; font-color: black; background: #FFC;
border: 8px green inset; padding: 15px;">
<!-- <img src = "images/1.jpg";> -->
Watch this space
</div>
<p><a href=""
onmouseover="FP_setLayerText('layer1',
'<img src = "images/1.jpg">')"
onmouseout="FP_setLayerText('layer1','Watch this space')">
<img border="0" src="images/1.jpg" width="100" height="100">
</a></p>
<p><a href=""
onmouseover="FP_setLayerText('layer1',
'<img src = "images/2.jpg">')"
onmouseout="FP_setLayerText('layer1','Watch this space')">
<img border="0" src="images/2.jpg" width="100" height="100">
</a></p>
<p><a href=""
onmouseover="FP_setLayerText('layer1',
'<img src = "images/3.jpg">')"
onmouseout="FP_setLayerText('layer1','Watch this space')">
<img border="0" src="images/3.jpg" width="100" height="100">
</a></p>
<p><a href=""
onmouseover="FP_setLayerText('layer1',
'<img src = "images/4.jpg">')"
onmouseout="FP_setLayerText('layer1','Watch this space')">
<img border="0" src="images/4.jpg" width="100" height="100">
</a></p>
</body>
</html>
Click to expand...
Click to expand...
Click to expand...
 
M

Murray

Yippee!

--
Murray
--------------
MVP FrontPage


swash said:
Hats off! Applause! and Many Thanks!!! to you

Murray said:
Leave that part of the code alone. Find the </head> tag on the page, and
replace it with what I showed below as my suggestion.

--
Murray
--------------
MVP FrontPage


swash said:
I can't get it. Is this supposed to before, after or instead of

style="position: absolute; width: 400px; height: 400px;
z-index: 1; left: 200px; top: 30px;
font-family: trebuchet,verdana,arial,sans-serif;
font-size: 14px; font-color: black; background:
#FFC;
border: 8px green inset; padding: 15px;">
<!-- <img src = "images/1.jpg";> -->
Watch this space


Or somewhere else. Sorry.

:

<style type="text/css">
#layer1 { color:green; font-weight:bold; font-size:large; }
</style>
</head>

Like that....

--
Murray
--------------
MVP FrontPage


where should i put this in the code?

:

#layer1 { color:green; font-weight:bold; font-size:large; }

--
Murray
--------------
MVP FrontPage


Thanks to all 3 of you. This works just like I needed. I never
would
have
gotten that script right. You all are the best. One more
question,
How
can
I format the text that says 'Watch this space'? I know that I
can
format
the
first one
<div id="layer1"
style="position: absolute; width: 400px; height: 400px;
z-index: 1; left: 200px; top: 30px;
font-family: trebuchet,verdana,arial,sans-serif;
font-size: 14px; font-color: black; background:
#FFC;
border: 8px green inset; padding: 15px;">
<!-- <img src = "images/1.jpg";> -->
Watch this space
</div>

But how can I fomat the ones that are located int the mouseover
event
like
this one:
onmouseout="FP_setLayerText('layer1','Watch this space')">


I don't actually see the text in design view and I tried doing
something
directly with the code but it wasn't right because I got an
error.

Thanks again



:

E. T. Culling wrote:
I think he also REALLY needs the java scripts.

Thanks Eleanor.
I posted my reply as a "please hold" while I had a lunch break.

Swash,
The site you referred to uses layers and mouseovers and some
Javascript
functions.

Here is a fairly simple piece of code (basically Murray's with a
small
change to remove the image on mouseout) which I think will do
what
you
want.
It also uses layers and mouseovers, but the functions are a bit
simpler.

You need to provide the images. This code assumes they are
images/1.jpg
images/2.jpg
images/3.jpg
images/1.jpg

Change these to what you want and amend the code accordingly.

You may also want to change the borders on 'layer1'. I leave
that
up
to
you.

CODE FOLLOWS
<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 type="text/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: 30px;
font-family: trebuchet,verdana,arial,sans-serif;
font-size: 14px; font-color: black; background:
#FFC;
border: 8px green inset; padding: 15px;">
<!-- <img src = "images/1.jpg";> -->
Watch this space
</div>
<p><a href=""
onmouseover="FP_setLayerText('layer1',
'<img src = "images/1.jpg">')"
onmouseout="FP_setLayerText('layer1','Watch this space')">
<img border="0" src="images/1.jpg" width="100" height="100">
</a></p>
<p><a href=""
onmouseover="FP_setLayerText('layer1',
'<img src = "images/2.jpg">')"
onmouseout="FP_setLayerText('layer1','Watch this space')">
<img border="0" src="images/2.jpg" width="100" height="100">
</a></p>
<p><a href=""
onmouseover="FP_setLayerText('layer1',
'<img src = "images/3.jpg">')"
onmouseout="FP_setLayerText('layer1','Watch this space')">
<img border="0" src="images/3.jpg" width="100" height="100">
</a></p>
<p><a href=""
onmouseover="FP_setLayerText('layer1',
'<img src = "images/4.jpg">')"
onmouseout="FP_setLayerText('layer1','Watch this space')">
<img border="0" src="images/4.jpg" width="100" height="100">
</a></p>
</body>
</html>
Click to expand...
Click to expand...
Click to expand...
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

Help With Layers 3
Layers and Behaviors for Menus 3
Behavior use problem 0
Tables and Layers 1
Behaviors and layer properties 6
FP2003 Layers and Behaviors 6
Layers/behaviors- Flashing/Flickering Dynamic Menu System 9
DHTML Behaviors 4

Top