Rollover img

T

Trevor L.

Manny said:
Hi,

Help

I was vesting a web site called screen savers and put my mouseover a
photo and loved the effect of the mouseover. How can I do this In
FrontPage 2003 would you be so kind as to instruct me on how to
accomplish this effect hears is the web take a look?
http://www.g4tv.com/screensavers/index.html

My email:
[email protected] or
[email protected]

Thank you,

Manny
Click to expand...

Strange.

I looked at the code and this is what is there for the cell
<td><a
href="http://www.g4tv.com/screensavers/features/51371/The_Phenomenal_Phenomenon_of_The_Phenomenauts.html">
<img align="left" alt="phenomenauts"
src="http://media.g4tv.com/images/imageDB2/312/31200_S.jpg"
class="blackborder" width="90" height="68"></a></td>

There must be a a onmouseover="" which
1. displays the larger image in a <div>
2. moves the <div> with the cursor.

But I must be missing something - I can't see a mouseover anywhere !!

Courtesy of Murray here is code to do the first
<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: 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;')">
<img border="0" src="images/1.jpg" width="100" height="100">
</a></p>
</body>
</html>

This places the image in a fixed <div> - see the tag <div id="layer1">

What you need as well is code that forces the <div> to follow the cursor. I
have some code that does that with a tooltip - a <div> which is 100px wide -
but I would need to put them together and I can't quite do that instantly.

Perhaps someone else can find where the code that does this is on the site
you listed.
 
M

Manny

HI Trevor L.

This is what I have so far I will be working on this today I will need some
help on this one. Take a look at what I have

<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<meta http-equiv="Content-Language" content="en-us">
<title>Photo Gallery</title>
<style fprolloverstyle>A:hover {color: #FF0000; font-weight: bold}
</style>
<meta name="Microsoft Theme" content="level 1011">
</head>

<body>


<table border="0" cellpadding="0" cellspacing="0" width="830" height="71">
<tr>
<td width="166" align="center"> </td>
<td align="center" height="70" width="664">
<!--webbot bot="Navigation" s-type="banner" s-rendering="graphics"
s-orientation b-include-home b-include-up u-page s-target -->
</td>
</tr>
<tr>
<td colspan="2" style="border-bottom-style: none; border-bottom-width:
medium" height="1">

</td>
</tr>
</table>

<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td style="border-bottom-style: solid; border-bottom-width: 1"
align="right">

<h4>
<!--webbot bot="Timestamp" s-type="REGENERATED" s-format="%m/%d/%y" -->
</h4>
</td>
</tr>
</table>

<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td valign="top" width="75" style="border-left-style:none;
border-left-width:medium; border-right-style:solid; border-right-width:1;
border-top-style:none; border-top-width:medium; border-bottom-style:none;
border-bottom-width:medium">

<!--webbot bot="Navigation" s-orientation="vertical"
s-rendering="graphics" s-type="siblings" b-include-home="TRUE"
b-include-up="FALSE" -->
<p> </p>
</td>
<td valign="top" width="5" style="border-right-style:none;
border-right-width:medium; border-top-style:none; border-top-width:medium;
border-bottom-style:none; border-bottom-width:medium">

</td>
<td valign="top" width="100%" height="100%"
style="border-right-style:none; border-right-width:medium;
border-top-style:none; border-top-width:medium; border-bottom-style:none;
border-bottom-width:medium">

<h3 align="left"><font face="Times New Roman" color="#000000">My Photo
Gallery</font></h3>
<br>
<p>Look at my new online photos filled with pictures from Mount Saint
Helens. And my trip to one of Frank Lioyd Wrights homes. Plus some photos
of a home that I built
in Vancouver WA. </p>
<!--webbot bot="PhotoAlbum" u-include="photogallery/photo26003/real.htm"
clientside tag="BODY" --><v:element onmouseover="window.status='img';return
true"/><v:element onmouseover="expression"><p align="center">
<font face="Times New Roman" color="#800000">
<small>
<!--webbot bot="Navigation" s-orientation="horizontal" s-rendering="html"
s-bar="Bars" s-btn-nml="<A HREF="#URL#" TARGET="#TARGET#"
STYLE="text-decoration: none;">#LABEL#</A>" s-btn-sel="#LABEL#"
s-btn-sep="&nbsp;|&nbsp;" s-type="siblings" b-include-home="TRUE"
b-include-up="FALSE" -->
</small></font></p>
<p><i><small><font color="#663300">This site was last </font>
<font face="Times New Roman" color="#663300">updated
<!--webbot bot="Timestamp" s-type="EDITED" s-format="%m/%d/%y"
--></font><font color="#663300">
</font>
</small></i><font color="#663300"></font></font></p>
</td>
</tr>
</table>


</body>

</html>


Thank you

manny


Trevor L. said:
Manny said:
Hi,

Help

I was vesting a web site called screen savers and put my mouseover a
photo and loved the effect of the mouseover. How can I do this In
FrontPage 2003 would you be so kind as to instruct me on how to
accomplish this effect hears is the web take a look?
http://www.g4tv.com/screensavers/index.html

My email:
[email protected] or
[email protected]

Thank you,

Manny
Click to expand...

Strange.

I looked at the code and this is what is there for the cell
<td><a
href="http://www.g4tv.com/screensavers/features/51371/The_Phenomenal_Phenomenon_of_The_Phenomenauts.html">
<img align="left" alt="phenomenauts"
src="http://media.g4tv.com/images/imageDB2/312/31200_S.jpg"
class="blackborder" width="90" height="68"></a></td>

There must be a a onmouseover="" which
1. displays the larger image in a <div>
2. moves the <div> with the cursor.

But I must be missing something - I can't see a mouseover anywhere !!

Courtesy of Murray here is code to do the first
<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: 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">')">
<img border="0" src="images/1.jpg" width="100" height="100">
</a></p>
</body>
</html>

This places the image in a fixed <div> - see the tag <div id="layer1">

What you need as well is code that forces the <div> to follow the cursor. I
have some code that does that with a tooltip - a <div> which is 100px wide -
but I would need to put them together and I can't quite do that instantly.

Perhaps someone else can find where the code that does this is on the site
you listed.
Click to expand...
 
T

Trevor L.

Manny said:
HI Trevor L.

This is what I have so far I will be working on this today I will
need some help on this one. Take a look at what I have
Click to expand...

Manny,
I had a look at the code.

There seems to be a lot a table cells set up and not much else.

The use of webbots throws me a bit. I am more used to seeing the code that
FP generates (i.e. the HTML).

I do notice a mouseover in this tag
<!--webbot bot="PhotoAlbum" u-include="photogallery/photo26003/real.htm"
clientside tag="BODY" --><v:element onmouseover="window.status='img';return
true"/><v:element onmouseover="expression">

But I am not sure what it will do.

Can you put the code on the web (when it will be HTML) or post the saved
HTML file?

I pasted your code into a file and ran it. There are no mouseover behaviours
at the moment.

I will await further developments.
 
M

Manny

HI Trevor L.

This Is what I have so far Help !!


<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>This is the page</title>
</head>
<body>
<table border="0" cellspacing="0" cellpadding="0" id="fpGalleryTable_3710">
<tr />
<td valign="top">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td colspan="2" height="1" style="border-top-style: solid; border-top-width:
1; border-top-color:black"></td>
<td width="10"><font color="white">
</font></td>
</tr>
<tr>
<td valign="top">
<a target="_blank" href="Mount%20Saint%20Helens.jpg">
<img border="0" vspace="10" hspace="10"
src="Manny%20site3/photogallery/photo26003/Mount%20Saint%20Helens.jpg"
width="66" height="100" title="Mount Saint Helens" /></a>
</td>
<td width="130" height="123" valign="top">
<table width="130" border="0" cellspacing="0" cellpadding="0">
<tr valign="top">
<td height="10"><font color="white">
</font></td>
</tr>
<tr valign="top">
<td>
<B><I><FONT SIZE="2"></FONT></I></B><P><FONT SIZE="2"><I SIZE="2"><B
SIZE="2">Mount Saint Helens</B></I></FONT></P><FONT SIZE="2"><I SIZE="2"><B
SIZE="2"></B></I></FONT></td>
</tr>
<tr valign="top">
<td>
<FONT SIZE="2"></FONT><P><FONT SIZE="2">There She Blows.</FONT></P><FONT
SIZE="2"></FONT></td>
</tr>
</table>
</td>
<td width="10"><font color="white">
</font></td>
</tr>
</table>
</td>
<td valign="top">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td colspan="2" height="1" style="border-top-style: solid; border-top-width:
1; border-top-color:black"></td>
<td width="10"><font color="white">
</font></td>
</tr>
<tr>
<td valign="top">
<a target="_blank" href="Frank%20Lioyd%20Wright%20Driveway.JPG">
<img border="0" vspace="10" hspace="10"
src="Manny%20site3/photogallery/photo26003/Frank%20Lioyd%20Wright%20Driveway.JPG" width="100" height="66" title="Driveway View" /></a>
</td>
<td width="130" height="123" valign="top">
<table width="130" border="0" cellspacing="0" cellpadding="0">
<tr valign="top">
<td height="10"><font color="white">
</font></td>
</tr>
<tr valign="top">
<td>
<B><I><FONT SIZE="2"></FONT></I></B><P><FONT SIZE="2"><I SIZE="2"><B
SIZE="2">Driveway View</B></I></FONT></P><FONT SIZE="2"><I SIZE="2"><B
SIZE="2"></B></I></FONT></td>
</tr>
<tr valign="top">
<td>
<FONT SIZE="2"></FONT><P><FONT SIZE="2">The entrance to one of Frank Lioyd
Wrights houses.</FONT></P><FONT SIZE="2"></FONT></td>
</tr>
</table>
</td>
<td width="10"><font color="white">
</font></td>
</tr>
</table>
</td>
<td valign="top">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td colspan="2" height="1" style="border-top-style: solid; border-top-width:
1; border-top-color:black"></td>
<td width="10"><font color="white">
</font></td>
</tr>
<tr>
<td valign="top">
<a target="_blank"
href="Frank%20Lioyd%20Wright%20Front%20Entrance%20View.JPG">
<img border="0" vspace="10" hspace="10"
src="Manny%20site3/photogallery/photo26003/Frank%20Lioyd%20Wright%20Front%20Entrance%20View.JPG" width="100" height="66" title="The Front Entrance" /></a>
</td>
<td width="130" height="123" valign="top">
<table width="130" border="0" cellspacing="0" cellpadding="0">
<tr valign="top">
<td height="10"><font color="white">
</font></td>
</tr>
<tr valign="top">
<td>
<B><I><FONT SIZE="2"></FONT></I></B><P><FONT SIZE="2"><I SIZE="2"><B
SIZE="2">The Front Entrance</B></I></FONT></P><FONT SIZE="2"><I SIZE="2"><B
SIZE="2"></B></I></FONT></td>
</tr>
<tr valign="top">
<td>
<FONT SIZE="2"></FONT><P><FONT SIZE="2">Come on in and look around, if you
would like to see the interior you have to email me at
[email protected]</FONT></P><FONT SIZE="2">
</FONT><FONT FACE="Times New Roman" SIZE="2"></FONT></td>
</tr>
</table>
</td>
<td width="10"><font color="white">
</font></td>
</tr>
</table>
</td>
<tr />
<td valign="top">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td colspan="2" height="1" style="border-top-style: solid; border-top-width:
1; border-top-color:black"></td>
<td width="10"><font color="white">
</font></td>
</tr>
<tr>
<td valign="top">
<a target="_blank" href="Frank%20Lioyd%20Wright%20Close%20up%20View.JPG">
<img border="0" vspace="10" hspace="10"
src="Manny%20site3/photogallery/photo26003/Frank%20Lioyd%20Wright%20Close%20up%20View.JPG" width="100" height="66" title="Close up View" /></a>
</td>
<td width="130" height="123" valign="top">
<table width="130" border="0" cellspacing="0" cellpadding="0">
<tr valign="top">
<td height="10"><font color="white">
</font></td>
</tr>
<tr valign="top">
<td>
<B><I><FONT SIZE="2"></FONT></I></B><P><FONT SIZE="2"><I SIZE="2"><B
SIZE="2">Close up View</B></I></FONT></P><FONT SIZE="2"><I SIZE="2"><B
SIZE="2"></B></I></FONT></td>
</tr>
<tr valign="top">
<td>
<FONT SIZE="2"></FONT><P><FONT SIZE="2">A up close look at the
entrance.</FONT></P><FONT SIZE="2"></FONT></td>
</tr>
</table>
</td>
<td width="10"><font color="white">
</font></td>
</tr>
</table>
</td>
<td valign="top">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td colspan="2" height="1" style="border-top-style: solid; border-top-width:
1; border-top-color:black"></td>
<td width="10"><font color="white">
</font></td>
</tr>
<tr>
<td valign="top">
<a target="_blank" href="Frank%20Lioyd%20Wright%20Right%20Side%20View.JPG">
<img border="0" vspace="10" hspace="10"
src="Manny%20site3/photogallery/photo26003/Frank%20Lioyd%20Wright%20Right%20Side%20View.JPG" width="100" height="66" title="Right Side View" /></a>
</td>
<td width="130" height="123" valign="top">
<table width="130" border="0" cellspacing="0" cellpadding="0">
<tr valign="top">
<td height="10"><font color="white">
</font></td>
</tr>
<tr valign="top">
<td>
<B><I><FONT SIZE="2"></FONT></I></B><P><FONT SIZE="2"><I SIZE="2"><B
SIZE="2">Right Side View</B></I></FONT></P><FONT SIZE="2"><I SIZE="2"><B
SIZE="2"></B></I></FONT></td>
</tr>
<tr valign="top">
<td>
<FONT SIZE="2"></FONT><P><FONT SIZE="2">And this is the right side of the
house.</FONT></P><FONT SIZE="2"></FONT></td>
</tr>
</table>
</td>
<td width="10"><font color="white">
</font></td>
</tr>
</table>
</td>
<td valign="top">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td colspan="2" height="1" style="border-top-style: solid; border-top-width:
1; border-top-color:black"></td>
<td width="10"><font color="white">
</font></td>
</tr>
<tr>
<td valign="top">
<a target="_blank" href="Frank%20Lioyd%20Wright%20Back%20Side%20View.JPG">
<img border="0" vspace="10" hspace="10"
src="Manny%20site3/photogallery/photo26003/Frank%20Lioyd%20Wright%20Back%20Side%20View.JPG" width="100" height="66" title="Back Side View" /></a>
</td>
<td width="130" height="123" valign="top">
<table width="130" border="0" cellspacing="0" cellpadding="0">
<tr valign="top">
<td height="10"><font color="white">
</font></td>
</tr>
<tr valign="top">
<td>
<B><I><FONT SIZE="2"></FONT></I></B><P><FONT SIZE="2"><I SIZE="2"><B
SIZE="2">Back Side View</B></I></FONT></P><FONT SIZE="2"><I SIZE="2"><B
SIZE="2"></B></I></FONT></td>
</tr>
<tr valign="top">
<td>
<FONT SIZE="2"></FONT><P><FONT SIZE="2">The back yard has a oval shaped
setting area.</FONT></P><FONT SIZE="2"></FONT></td>
</tr>
</table>
</td>
<td width="10"><font color="white">
</font></td>
</tr>
</table>
</td>
<tr />
<td valign="top">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td colspan="2" height="1" style="border-top-style: solid; border-top-width:
1; border-top-color:black"></td>
<td width="10"><font color="white">
</font></td>
</tr>
<tr>
<td valign="top">
<a target="_blank" href="Frank%20Lioyd%20Wright%20Left%20Side%20View.JPG">
<img border="0" vspace="10" hspace="10"
src="Manny%20site3/photogallery/photo26003/Frank%20Lioyd%20Wright%20Left%20Side%20View.JPG" width="100" height="66" title="Left Side View" /></a>
</td>
<td width="130" height="123" valign="top">
<table width="130" border="0" cellspacing="0" cellpadding="0">
<tr valign="top">
<td height="10"><font color="white">
</font></td>
</tr>
<tr valign="top">
<td>
<B><I><FONT SIZE="2"></FONT></I></B><P><FONT SIZE="2"><I SIZE="2"><B
SIZE="2">Left Side View</B></I></FONT></P><FONT SIZE="2"><I SIZE="2"><B
SIZE="2"></B></I></FONT></td>
</tr>
<tr valign="top">
<td>
<FONT SIZE="2"></FONT><P><FONT SIZE="2">Look's good for the left side
lol.</FONT></P><FONT SIZE="2"></FONT></td>
</tr>
</table>
</td>
<td width="10"><font color="white">
</font></td>
</tr>
</table>
</td>
<td valign="top">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td colspan="2" height="1" style="border-top-style: solid; border-top-width:
1; border-top-color:black"></td>
<td width="10"><font color="white">
</font></td>
</tr>
<tr>
<td valign="top">
<a target="_blank" href="Frank%20Lioyd%20Wright%20Front%20Side%20View.JPG">
<img border="0" vspace="10" hspace="10"
src="Manny%20site3/photogallery/photo26003/Frank%20Lioyd%20Wright%20Front%20Side%20View.JPG" width="100" height="66" title="Front Side View" /></a>
</td>
<td width="130" height="123" valign="top">
<table width="130" border="0" cellspacing="0" cellpadding="0">
<tr valign="top">
<td height="10"><font color="white">
</font></td>
</tr>
<tr valign="top">
<td>
<B><I><FONT SIZE="2"></FONT></I></B><P><FONT SIZE="2"><I SIZE="2"><B
SIZE="2">Front Side View</B></I></FONT></P><FONT SIZE="2"><I SIZE="2"><B
SIZE="2"></B></I></FONT></td>
</tr>
<tr valign="top">
<td>
<FONT SIZE="2"></FONT><P><FONT SIZE="2">This view gives you a good at the
roof supports. </FONT></P><FONT SIZE="2"></FONT></td>
</tr>
</table>
</td>
<td width="10"><font color="white">
</font></td>
</tr>
</table>
</td>
<td valign="top">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td colspan="2" height="1" style="border-top-style: solid; border-top-width:
1; border-top-color:black"></td>
<td width="10"><font color="white">
</font></td>
</tr>
<tr>
<td valign="top">
<a target="_blank" href="Nice%20Little%20Deck.JPG">
<img border="0" vspace="10" hspace="10"
src="Manny%20site3/photogallery/photo26003/Nice%20Little%20Deck.JPG"
width="100" height="66" title="Nice Little Deck" /></a>
</td>
<td width="130" height="123" valign="top">
<table width="130" border="0" cellspacing="0" cellpadding="0">
<tr valign="top">
<td height="10"><font color="white">
</font></td>
</tr>
<tr valign="top">
<td>
<B><I><FONT SIZE="2"></FONT></I></B><P><FONT SIZE="2"><I SIZE="2"><B
SIZE="2">Nice Little Deck</B></I></FONT></P><FONT SIZE="2"><I SIZE="2"><B
SIZE="2"></B></I></FONT></td>
</tr>
<tr valign="top">
<td>
<FONT SIZE="2"></FONT><P><FONT SIZE="2">A little deck the owner loves it.
</FONT></P><FONT SIZE="2">
</FONT></td>
</tr>
</table>
</td>
<td width="10"><font color="white">
</font></td>
</tr>
</table>
</td>
<tr />
<td valign="top">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td colspan="2" height="1" style="border-top-style: solid; border-top-width:
1; border-top-color:black"></td>
<td width="10"><font color="white">
</font></td>
</tr>
<tr>
<td valign="top">
<a target="_blank" href="Hard%20at%20Work.JPG">
<img border="0" vspace="10" hspace="10"
src="Manny%20site3/photogallery/photo26003/Hard%20at%20Work.JPG" width="100"
height="66" title="Hard at Work" /></a>
</td>
<td width="130" height="123" valign="top">
<table width="130" border="0" cellspacing="0" cellpadding="0">
<tr valign="top">
<td height="10"><font color="white">
</font></td>
</tr>
<tr valign="top">
<td>
<B><I><FONT SIZE="2"></FONT></I></B><P><FONT SIZE="2"><I SIZE="2"><B
SIZE="2">Hard at Work</B></I></FONT></P><FONT SIZE="2"><I SIZE="2"><B
SIZE="2"></B></I></FONT></td>
</tr>
<tr valign="top">
<td>
<FONT SIZE="2"></FONT><P><FONT SIZE="2">Kiilee is hard at work and she loves
it. </FONT></P><FONT SIZE="2">
</FONT></td>
</tr>
</table>
</td>
<td width="10"><font color="white">
</font></td>
</tr>
</table>
</td>
<td valign="top">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td colspan="2" height="1" style="border-top-style: solid; border-top-width:
1; border-top-color:black"></td>
<td width="10"><font color="white">
</font></td>
</tr>
<tr>
<td valign="top">
<a target="_blank" href="Under%20Construction%201.JPG">
<img border="0" vspace="10" hspace="10"
src="Manny%20site3/photogallery/photo26003/Under%20Construction%201.JPG"
width="100" height="66" title="Under Construction " /></a>
</td>
<td width="130" height="123" valign="top">
<table width="130" border="0" cellspacing="0" cellpadding="0">
<tr valign="top">
<td height="10"><font color="white">
</font></td>
</tr>
<tr valign="top">
<td>
<B><I><FONT SIZE="2"></FONT></I></B><P><FONT SIZE="2"><I SIZE="2"><B
SIZE="2">Under Construction </B></I></FONT></P><FONT SIZE="2"><I SIZE="2"><B
SIZE="2"></B></I></FONT></td>
</tr>
<tr valign="top">
<td>
<FONT SIZE="2"></FONT><P><FONT SIZE="2">A good example of poor truss
design.</FONT></P><FONT SIZE="2">
</FONT></td>
</tr>
</table>
</td>
<td width="10"><font color="white">
</font></td>
</tr>
</table>
</td>
<td valign="top">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td colspan="2" height="1" style="border-top-style: solid; border-top-width:
1; border-top-color:black"></td>
<td width="10"><font color="white">
</font></td>
</tr>
<tr>
<td valign="top">
<a target="_blank" href="Under%20Construction%202.JPG">
<img border="0" vspace="10" hspace="10"
src="Manny%20site3/photogallery/photo26003/Under%20Construction%202.JPG"
width="100" height="66" title="Under Construction" /></a>
</td>
<td width="130" height="123" valign="top">
<table width="130" border="0" cellspacing="0" cellpadding="0">
<tr valign="top">
<td height="10"><font color="white">
</font></td>
</tr>
<tr valign="top">
<td>
<B><I><FONT SIZE="2"></FONT></I></B><P><FONT SIZE="2"><I SIZE="2"><B
SIZE="2">Under Construction</B></I></FONT></P><FONT SIZE="2"><I SIZE="2"><B
SIZE="2"></B></I></FONT></td>
</tr>
<tr valign="top">
<td>
<FONT SIZE="2"></FONT><P><FONT SIZE="2">Are we having fun now ?
</FONT></P><FONT SIZE="2">
</FONT></td>
</tr>
</table>
</td>
<td width="10"><font color="white">
</font></td>
</tr>
</table>
</td>
<tr />
<td valign="top">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td colspan="2" height="1" style="border-top-style: solid; border-top-width:
1; border-top-color:black"></td>
<td width="10"><font color="white">
</font></td>
</tr>
<tr>
<td valign="top">
<a target="_blank" href="Under%20Construction.JPG">
<img border="0" vspace="10" hspace="10"
src="Manny%20site3/photogallery/photo26003/Under%20Construction.JPG"
width="100" height="66" title="Under Construction" /></a>
</td>
<td width="130" height="123" valign="top">
<table width="130" border="0" cellspacing="0" cellpadding="0">
<tr valign="top">
<td height="10"><font color="white">
</font></td>
</tr>
<tr valign="top">
<td>
<B><I><FONT SIZE="2"></FONT></I></B><P><FONT SIZE="2"><I SIZE="2"><B
SIZE="2">Under Construction</B></I></FONT></P><FONT SIZE="2"><I SIZE="2"><B
SIZE="2"></B></I></FONT></td>
</tr>
<tr valign="top">
<td>
<FONT SIZE="2"></FONT><P><FONT SIZE="2">Time to fix the
truss.</FONT></P><FONT SIZE="2"></FONT></td>
</tr>
</table>
</td>
<td width="10"><font color="white">
</font></td>
</tr>
</table>
</td>
<td valign="top">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td colspan="2" height="1" style="border-top-style: solid;
border-top-width: 1; border-top-color:black">
</td>
<td width="10"><font color="white"> </font></td>
</tr>
</table></td>
<td valign="top">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td colspan="2" height="1" style="border-top-style: solid;
border-top-width: 1; border-top-color:black">
</td>
<td width="10"><font color="white"> </font></td>
</tr>
</table></td>

<tr>
<td valign="top">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td colspan="2" height="1" style="border-top-style: solid;
border-top-width: 1; border-top-color:black">
</td>
<td width="10"><font color="white"> </font></td>
</tr>
</table></td>

</tr>

</table>
</body>
</html>
 
T

Trevor L.

Manny said:
HI Trevor L.

This Is what I have so far Help !!
Click to expand...

Manny,
I have copied the code and run it.

It appears to be a lot of nested tables with images I can't display (the
links are to your hard disk or to a site for which I don't have the URL)

There are no image rollovers at present. Is this what you are wanting to do?

At the moment, a typical cell in your code is
<td valign="top">
<a target="_blank" href="Mount%20Saint%20Helens.jpg">
<img border="0" vspace="10" hspace="10"
src="Manny%20site3/photogallery/photo26003/Mount%20Saint%20Helens.jpg"
width="66" height="100" title="Mount Saint Helens" /></a>
</td>

To have a rollover image you need to make it something like the following.
(Note the onmouseover and onmouseout. I also removed the href= destination
as the image will display on the same page. You can leave it in if you want)

<td valign="top">
<a href="#" onmouseover="hideit('layer1');setImage('layer1', '<img src =
\'Mount%20Saint%20Helens.jpg\'>')"
on mouseout="hideit('layer1');" >
<img border="0" vspace="10" hspace="10"
src="Manny%20site3/photogallery/photo26003/Mount%20Saint%20Helens.jpg"
width="66" height="100" title="Mount Saint Helens" /></a>
</td>

where this script is in the <head> section
<script language="JavaScript">
function hideit(id)
{
var e = document.getElementById(id).style
e.display = (e.display != 'block') ? "block" : "none"
}
function setImage(id,txt)
{ document.getElementById(id).innerHTML = txt }
</script>

You then need to position 'layer1'. One thing to try is to absolutely
postion it by placing this at the top of your HTML, after <body>

<div id="layer1"
style="position: absolute; width: 400px; height: 400px;
z-index: 1; left: 200px; top: 30px;
border: solid black 1px; display: none;">
</div>

If this works and you are happy with it, then OK. There are ways to make the
div follow the cursor, but it needs a bit more code.
 
Top