Hey all - am revamping my website stuff and have run into a snag with
getting what I'm after.
I've built the main page with 3 frames: top left allows selection
between types of woodworking; thumbnail pics appear below in a vertical
column; blank frame to the right comprises most of the real estate on
the page. Choosing a thumbnail makes a larger image appear in the large
righthand area.
Problem is that I want the same #333333 background for all three frames
and what happens is that when the thumbnail is chosen, the enlarged pic
appears with a non-333333 background (in my case it's white as that's
the default setting in my browser).
The only way I've been able to figure out how to do this is to make a
seperate html page for each picture that is called up instead of the pic
by itself. Any other ways to do it?
Here's a link to a rough assemblage of the new design:
<http://users.easystreet.com/onlnlowe/newdadathome/dad_frame.html>
(I'll be tweaking the font colors, sizing and placement after I get this
color thing worked out. Also, only the topmost pic is uploaded for
illustration purposes only.)
thanks.
--
Owen Lowe and his Fly-by-Night Copper Company
Offering a shim for the Porter-Cable 557 type 2 fence design.
<http://www.flybynightcoppercompany.com>
<http://www.easystreet.com/~onlnlowe/index.html>
On Thu, 7 Aug 2003 11:57:56 +0100, AJS wrote:
>
> "Fly-by-Night CC" <[email protected]> wrote in message
> news:[email protected]...
>> Hey all - am revamping my website stuff and have run into a snag with
>> getting what I'm after.
>>
>> I've built the main page with 3 frames: top left allows selection
>> between types of woodworking; thumbnail pics appear below in a vertical
>> column; blank frame to the right comprises most of the real estate on
>> the page. Choosing a thumbnail makes a larger image appear in the large
>> righthand area.
>>
>> Problem is that I want the same #333333 background for all three frames
>> and what happens is that when the thumbnail is chosen, the enlarged pic
>> appears with a non-333333 background (in my case it's white as that's
>> the default setting in my browser).
>>
Are you loading just the image into the empty frame on the right? As in,
the src for the frame is "image.jpg" or something like that? Web browsers
will just use their default color in that case. Instead, create an .html
page to go around each image, and alter the background color of those .html
pages.
There are much easier ways of doing this if you want to get into scripting,
but with plain-jane html this is what you've got to do. Let me know if
you'd like some pointers on how to script something like that.
david
--
So, we've got Uday and Qusay. Now, how about the Eapons-way of Ass-may
Estruction-day?
Owen,
What you are looking to do is not possible because your link from the
thumbnail is to a JPG file not an HTML page. The background coding you have
in the other frames is HTML. The achieve the look you want you need to imbed
the image in an HTML page with the background set for the right color.
Depending on your skills or your web editing application you can try
Javascripting (image rollovers) or dynamic pages in ASP, Coldfusion or some
other language. Dreamweaver has a feature called "photo album", where it
will take the pictures you have in a folder and quickly create the HTML
pages for you. The main page will have the thumbnails and when you click on
one it brings up the image in a new window with links to see the next or
previous images.
Sorry I don't have a quick solution but I hope these options helps.
JM
"Fly-by-Night CC" <[email protected]> wrote in message
news:[email protected]...
: Hey all - am revamping my website stuff and have run into a snag with
: getting what I'm after.
:
: I've built the main page with 3 frames: top left allows selection
: between types of woodworking; thumbnail pics appear below in a vertical
: column; blank frame to the right comprises most of the real estate on
: the page. Choosing a thumbnail makes a larger image appear in the large
: righthand area.
:
: Problem is that I want the same #333333 background for all three frames
: and what happens is that when the thumbnail is chosen, the enlarged pic
: appears with a non-333333 background (in my case it's white as that's
: the default setting in my browser).
:
: The only way I've been able to figure out how to do this is to make a
: seperate html page for each picture that is called up instead of the pic
: by itself. Any other ways to do it?
:
: Here's a link to a rough assemblage of the new design:
: <http://users.easystreet.com/onlnlowe/newdadathome/dad_frame.html>
:
: (I'll be tweaking the font colors, sizing and placement after I get this
: color thing worked out. Also, only the topmost pic is uploaded for
: illustration purposes only.)
:
: thanks.
:
: --
: Owen Lowe and his Fly-by-Night Copper Company
: Offering a shim for the Porter-Cable 557 type 2 fence design.
: <http://www.flybynightcoppercompany.com>
: <http://www.easystreet.com/~onlnlowe/index.html>
The problem is you are redirecting the right (main) frame directly to images
as opposed to HTML pages. This is why you never get the opportunity to set
the background and the default of White is used.
The simplest solution, even though it is by far not the most elegant, is to
embed each of your enlarged photos in a simple HTML page where the
background is set to the desired color. Then redirect to each HTML page
respectively instead of the image file. This approach will suffice for a
fairly static and simple website
If your coding skills are beyond beginner then attempt one of Hermit Crab's
suggestions.
Regards
--
______________________
WoodJunkie
"Fly-by-Night CC" <[email protected]> wrote in message
news:[email protected]...
> Hey all - am revamping my website stuff and have run into a snag with
> getting what I'm after.
>
> I've built the main page with 3 frames: top left allows selection
> between types of woodworking; thumbnail pics appear below in a vertical
> column; blank frame to the right comprises most of the real estate on
> the page. Choosing a thumbnail makes a larger image appear in the large
> righthand area.
>
> Problem is that I want the same #333333 background for all three frames
> and what happens is that when the thumbnail is chosen, the enlarged pic
> appears with a non-333333 background (in my case it's white as that's
> the default setting in my browser).
>
> The only way I've been able to figure out how to do this is to make a
> seperate html page for each picture that is called up instead of the pic
> by itself. Any other ways to do it?
>
> Here's a link to a rough assemblage of the new design:
> <http://users.easystreet.com/onlnlowe/newdadathome/dad_frame.html>
>
> (I'll be tweaking the font colors, sizing and placement after I get this
> color thing worked out. Also, only the topmost pic is uploaded for
> illustration purposes only.)
>
> thanks.
>
> --
> Owen Lowe and his Fly-by-Night Copper Company
> Offering a shim for the Porter-Cable 557 type 2 fence design.
> <http://www.flybynightcoppercompany.com>
> <http://www.easystreet.com/~onlnlowe/index.html>
"Fly-by-Night CC" <[email protected]> wrote in message
news:[email protected]...
> In article <[email protected]>,
> "AJS" <[email protected]> wrote:
>
> > Faced the same problem on my webpage.
> > Ended up embedding dynamic page creation within my thumbnail pages
> > have a look at http://www.jsheldrake.com and click the holidays or
> > woodworking button
> > you should be able to view source and figure it out, if not gimme a
shout
>
> Thanks John. Unfortunately, I'm not familiar enough with dynamic stuff
> to figure it out. I think, as others said, the easiest way would be to
> create an html page for each pic. I was just hoping for a tag/attribute
> command to do it.
>
Its pretty simple really, once you know
just 2 bits to include in your html
<SCRIPT LANGUAGE="JavaScript">
<!-- Begin
var pics = new Array();
pics['picture1'] = "picture1.jpg";
function EnlargePics(strKey)
{
document.location = ""
document.open();
dispstring = "<html><head><title>Pictures</title><meta
http-equiv=\"Content-Type\" content=\"text/html;"
dispstring += " charset=iso-8859-1\"><link rel=\"stylesheet\"
type=\"text/css\" href=\"styles.css\" /></head><body>"
dispstring += "Please wait for the Image to load<br>"
dispstring += "<br><table border=\"5\"> <tr> <td>"
dispstring += "<a href=\"javascript:history.go(-1)\"><img
src=\""+pics[strKey]+"\" border=\"0\""
dispstring += "></a></td></tr></table><br>Click image to
return</body></html>"
document.write (dispstring);
}
// End -->
</script>
Insert the above code above your line that says </head>
then just add the following line in your <body> section to display the
thumbnail
<a href="#" onClick="EnlargePics('picture1')"><img src="picture1_s.jpg"
border="0"></a>
what you should end up with is a thumbnail image (picture1_s.jpg) which,
when you click it
will display the full size image (picture1.jpg) centered on a coloured
background and
you just click that full size image to return to your thumbnail page
John
In article <[email protected]>,
"AJS" <[email protected]> wrote:
> Faced the same problem on my webpage.
> Ended up embedding dynamic page creation within my thumbnail pages
> have a look at http://www.jsheldrake.com and click the holidays or
> woodworking button
> you should be able to view source and figure it out, if not gimme a shout
Thanks John. Unfortunately, I'm not familiar enough with dynamic stuff
to figure it out. I think, as others said, the easiest way would be to
create an html page for each pic. I was just hoping for a tag/attribute
command to do it.
--
Owen Lowe and his Fly-by-Night Copper Company
Offering a shim for the Porter-Cable 557 type 2 fence design.
<http://www.flybynightcoppercompany.com>
<http://www.easystreet.com/~onlnlowe/index.html>
In article <[email protected]>,
"John" <[email protected]> wrote:
> What you are looking to do is not possible because your link from the
> thumbnail is to a JPG file not an HTML page. The background coding you have
> in the other frames is HTML. The achieve the look you want you need to imbed
> the image in an HTML page with the background set for the right color.
> Depending on your skills or your web editing application you can try
> Javascripting (image rollovers) or dynamic pages in ASP, Coldfusion or some
> other language. Dreamweaver has a feature called "photo album", where it
> will take the pictures you have in a folder and quickly create the HTML
> pages for you. The main page will have the thumbnails and when you click on
> one it brings up the image in a new window with links to see the next or
> previous images.
>
> Sorry I don't have a quick solution but I hope these options helps.
Thanks John. Since I hand-code my pages and JS confuses me, I was hoping
for a tag/attribute way of doing it - you confirmed my suspicion that
the simplist way of doing it would be to create a separate HTML page for
each pic.
Hermit Crab provided some JS scripting to get me started and I'll see if
maybe I can work my way through that - otherwise I guess it's an HTML
for each pic.
thanks again.
--
Owen Lowe and his Fly-by-Night Copper Company
Offering a shim for the Porter-Cable 557 type 2 fence design.
<http://www.flybynightcoppercompany.com>
<http://www.easystreet.com/~onlnlowe/index.html>
If you elect to use JavaScript (which seems like the simplest solution), you
could try the following:
(1) Create an HTML page for the frame used to hold the enlarged images.
This page should contain a single image which will be used to display the
large images. The initial value of this image could be a logo, or could
simply be a solid color image which matches the background (#333333) and
would therefore be invisible.
(2) Add a JavaScript function (in your thumbnails frame) to update the image
in the other frame.
function changeImage(imageName) {
window.top.frames[1].images[0].src = imageName;
}
(3) Add an event handler to each thumbnail image to handle "click" events.
onclick="changeImage('http://path.to.fullsize.image.com"); return false;
I haven't tested this, so there are no guarantees. Feel free to email me
direct if this doesn't make sense (or if it just plain doesn't work!)..
"John" <[email protected]> wrote in message
news:[email protected]...
> Owen,
>
> What you are looking to do is not possible because your link from the
> thumbnail is to a JPG file not an HTML page. The background coding you
have
> in the other frames is HTML. The achieve the look you want you need to
imbed
> the image in an HTML page with the background set for the right color.
> Depending on your skills or your web editing application you can try
> Javascripting (image rollovers) or dynamic pages in ASP, Coldfusion or
some
> other language. Dreamweaver has a feature called "photo album", where it
> will take the pictures you have in a folder and quickly create the HTML
> pages for you. The main page will have the thumbnails and when you click
on
> one it brings up the image in a new window with links to see the next or
> previous images.
>
> Sorry I don't have a quick solution but I hope these options helps.
>
> JM
>
>
>
> "Fly-by-Night CC" <[email protected]> wrote in message
> news:[email protected]...
> : Hey all - am revamping my website stuff and have run into a snag with
> : getting what I'm after.
> :
> : I've built the main page with 3 frames: top left allows selection
> : between types of woodworking; thumbnail pics appear below in a vertical
> : column; blank frame to the right comprises most of the real estate on
> : the page. Choosing a thumbnail makes a larger image appear in the large
> : righthand area.
> :
> : Problem is that I want the same #333333 background for all three frames
> : and what happens is that when the thumbnail is chosen, the enlarged pic
> : appears with a non-333333 background (in my case it's white as that's
> : the default setting in my browser).
> :
> : The only way I've been able to figure out how to do this is to make a
> : seperate html page for each picture that is called up instead of the pic
> : by itself. Any other ways to do it?
> :
> : Here's a link to a rough assemblage of the new design:
> : <http://users.easystreet.com/onlnlowe/newdadathome/dad_frame.html>
> :
> : (I'll be tweaking the font colors, sizing and placement after I get this
> : color thing worked out. Also, only the topmost pic is uploaded for
> : illustration purposes only.)
> :
> : thanks.
> :
> : --
> : Owen Lowe and his Fly-by-Night Copper Company
> : Offering a shim for the Porter-Cable 557 type 2 fence design.
> : <http://www.flybynightcoppercompany.com>
> : <http://www.easystreet.com/~onlnlowe/index.html>
>
>
>