|
| |
|
|
Larry M.
Posts: 2723
Joined: 2/20/2003
From: Greenville, South Carolina, USA
Status: offline
 |
How Did They Do That? - 8/27/2005 15:05:49
Hi Everyone,
Good web site designer's site specializing in a vertical market (Real Estate) here: http://www.carolinaregional.com/ , which was designed in FrontPage. (Please click through to "Portfolio")
Two effects I like are (1) the rotating dissolving banner section and (2) the thumbnails loading into a larger image area in the body section. How did they do these?
The FrontPage Banner Ad component may be work for (1) but is there a script or add-in that's better? As to (2) ???
Any suggestion for a FrontPage function and/or script and/or add-in would be very much appreciated!!
< Message edited by Larry M. -- 8/27/2005 16:45:21 >
_____________________________
Larry M.
Indecision is the Key to Flexibility.
|
|
|
|
Larry M.
Posts: 2723
Joined: 2/20/2003
From: Greenville, South Carolina, USA
Status: offline
|
RE: How Did They Do Tat? - 8/27/2005 16:44:35
Womble,
I won't be working in frames or includes for this project but do have Swish and will investigate IFrames which I've never used.
Thanks!
Anyone have any thoughts on the Thumbnails to larger image in a common location question?
_____________________________
Larry M.
Indecision is the Key to Flexibility.
| |
|
|
|
dpf
Posts: 7121
Joined: 11/12/2003
From: India-napolis
Status: offline
|
RE: How Did They Do Tat? - 8/27/2005 17:09:05
quote:
Anyone have any thoughts on the Thumbnails to larger image in a common location question? Larry - there are lots of javascripts that will do that. fairly simple
_____________________________
Dan
| |
|
|
|
horseatingweeds
Posts: 54
Joined: 3/17/2005
Status: offline
|
RE: How Did They Do Tat? - 8/27/2005 20:10:00
quote:
Larry - there are lots of javascripts that will do that. fairly simple
One day I will be a web master and on this forum I wil say, "bla bla bla, hobide-hoee hebedy gee, it's very simple"
Currently, however, I am strugling to make a journey from the blind but blissfull world of WYSIWYG to the land of CSS.
Does anyone else feel that Front Page and CSS were never meant to be in the same tool belt?
| |
|
|
|
caz
Posts: 3520
Joined: 10/10/2001
From: Somewhere south of Chester, UK
Status: offline
|
RE: How Did They Do Tat? - 8/28/2005 5:33:30
Image swap in that site:
<script Language="JavaScript">
<!--
img=new Array()
img[0]=new Image()
img[0].src="portfolio/port_1_lrg.gif"
img[1]=new Image()
img[1].src="port_1_lrg.gif"
function changeImage(imgName,imgNum) {
document.images[imgName].src=img[imgNum].src
}
//-->
</script>
../portfolio.htm
One of 10 frames in that frameset, no doctypes and around 250 warnings.
You can do this with css and validate, see this Stu Nicholls' example,
photo gallery
Something else he's done in the playground,
CSS playground
_____________________________
Do not meddle in the affairs of cats, for they are subtle and will dance, or more on your keyboard.
Cheshire cat. www.doracat.co.uk
I remember when it took less than 4hrs to fly across the Atlantic.
| |
|
|
|
dpf
Posts: 7121
Joined: 11/12/2003
From: India-napolis
Status: offline
|
RE: How Did They Do Tat? - 8/28/2005 9:03:19
quote:
One day I will be a web master and on this forum I wil say, "bla bla bla, hobide-hoee hebedy gee, it's very simple" was that a dig?
horseweeds - maybe I am just in a bad mood but that really irks me. I wasnt answering your question, was I? I was answering Larrys and he knows me well enough to know that if my response is too brief, all he has to do is ask for expansion. you should know that also as I have helped you on a number of occasions.
< Message edited by dpf -- 8/28/2005 11:36:10 >
_____________________________
Dan
| |
|
|
|
dpf
Posts: 7121
Joined: 11/12/2003
From: India-napolis
Status: offline
|
RE: How Did They Do Tat? - 8/28/2005 11:04:26
Larry the example caz gave, while lengthy, is a wonderful introduction to doing it with css. if you want to do it with javascript, here is how (simple)
1. use the wysiwyg to build the table with the thumbnails in place and the large cell where the images changes will go - be sure to give a name and id to that square (can be done in fp). for the sake of argument, lets say the name you gave was name="center".
2. as always with mouseovers, you want to preload the images so that when you mouseover, they are already in cache and browser doesnt have to request from server thus ruining the illusion. to build preload, put a script in the head section:
<script language="javascript" type="text/javascript">
<!--
//for each image that will be displayed when mouseover, //add these two lines giving the image a unique name
var img1= new Image(); //img1 is the unique name
img1.src="actualimage.jpg"; //here you are saying that the source of img1 is some file - dont forget the semi colons! you do this for each of the large images that gets mouseovered - dont need to do it for the thumbnails
now add one more for the image that is to be replaced
img centerimg();
centerimg.src = picturename.jpg;
when you have all the images listed with 2 lines and unique names, close the script:
-->
</script>
3. now, in the html for each thumbnail, add this mouseover code:
<a href=""
onMouseOver='document.center.src=img1.src'
onMouseOut='document.center.src=centerimg.src'><img
src="thumb1.gif"></a>
lets look at this code. you place the image thumb1.gif in the cell with the wysiwyg and the code looked like this:
<img src="thumb1.gif">
in order to get the mouseover to work, we have to add and anchor < href="" and the mouseover calls. it is using dot syntax to describe where to perform the action and document.center refers to the image that you named center - so it is saying "on mouseover change the image - not the one here but one in another place"
see how that works?
_____________________________
Dan
| |
|
|
|
Larry M.
Posts: 2723
Joined: 2/20/2003
From: Greenville, South Carolina, USA
Status: offline
|
RE: How Did They Do Tat? - 8/28/2005 11:31:27
quote:
see how that works?
Dan,
Not yet, but I'll sure give it a try after I take a smart pill. If I "dumb out", hope it will be OK if I PM you for electronic resuscitation.
_____________________________
Larry M.
Indecision is the Key to Flexibility.
| |
|
|
|
dpf
Posts: 7121
Joined: 11/12/2003
From: India-napolis
Status: offline
|
RE: How Did They Do Tat? - 8/28/2005 11:34:14
quote:
Is that a dig nope - the word wonderful was your clue - I am going to study that one.
_____________________________
Dan
| |
|
|
|
dpf
Posts: 7121
Joined: 11/12/2003
From: India-napolis
Status: offline
|
RE: How Did They Do Tat? - 8/28/2005 11:36:55
not a problem larry
_____________________________
Dan
| |
|
|
|
dpf
Posts: 7121
Joined: 11/12/2003
From: India-napolis
Status: offline
|
RE: How Did They Do Tat? - 8/28/2005 11:46:42
quote:
Presumably Dan you could ditch the table in your example and do the positioning with css using divs instead of table cells if you were using xhtml/css?
womble: yes, the javascript isnt dependant upon the table - you can use it with css layout although you may have to use getElementById instead of document.etc. my rust is showing............
_____________________________
Dan
| |
|
|
|
dpf
Posts: 7121
Joined: 11/12/2003
From: India-napolis
Status: offline
|
RE: How Did They Do Tat? - 8/28/2005 12:24:38
one more tip larry - make a new page in front page and just place two images. one thumbnail and one center and then try this out with just that simple layout and get it to work before you tackle a full page.
_____________________________
Dan
| |
|
|
|
caz
Posts: 3520
Joined: 10/10/2001
From: Somewhere south of Chester, UK
Status: offline
|
RE: How Did They Do Tat? - 8/28/2005 12:43:58
quote:
maybe I am just in a bad mood
Again? I hope that it passes soon.
_____________________________
Do not meddle in the affairs of cats, for they are subtle and will dance, or more on your keyboard.
Cheshire cat. www.doracat.co.uk
I remember when it took less than 4hrs to fly across the Atlantic.
| |
|
|
|
Larry M.
Posts: 2723
Joined: 2/20/2003
From: Greenville, South Carolina, USA
Status: offline
|
RE: How Did They Do Tat? - 8/28/2005 12:59:25
Dan, Carol & Womble,
It occurs to me that the FrontPage Component Photo Gallery does just what I want except the format has thumbnails in a horizontal strip above the large picture which is centered by default.
See www.easleychamber.org/photo-tour.htm for example. (Yes, that's yours truly in the first large picture)
Any chance of modifying that code to select where (and what sizes) thumbnails and the large picture go? Sure would be a lot simpler if it could be done this way.
Comments?
_____________________________
Larry M.
Indecision is the Key to Flexibility.
| |
|
|
|
caz
Posts: 3520
Joined: 10/10/2001
From: Somewhere south of Chester, UK
Status: offline
|
RE: How Did They Do Tat? - 8/28/2005 13:20:56
Sorry Larry, but I pass on that one - I don't have a screen wide enough to display it (1280x1024).
Firefox WebDev toolbar report: 2 errors / 457 warnings
For a nice screen show app I have used Web Album Generator which is standards compliant using CSS, but doesn't display the main image the way you want. You can change the position of the thumbnails if you wish. See one in use here
Maybe the others will be able to fix the FP one.
_____________________________
Do not meddle in the affairs of cats, for they are subtle and will dance, or more on your keyboard.
Cheshire cat. www.doracat.co.uk
I remember when it took less than 4hrs to fly across the Atlantic.
| |
|
|
|
dpf
Posts: 7121
Joined: 11/12/2003
From: India-napolis
Status: offline
|
RE: How Did They Do Tat? - 8/28/2005 13:30:06
quote:
Again? I hope that it passes soon. it will pass..<smile> thank you
_____________________________
Dan
| |
|
|
|
Kerrith
Posts: 30
Joined: 5/20/2006
From: Pahoa, Big Isle, Hawaii
Status: offline
|
RE: How Did They Do That? - 5/21/2006 7:02:38
Hi DPF,
I'm not sure how to make the anchor.
Here's what I have.
Small image = Kerrys.jpg to be replaced when moused over by large image = Kerryl.jpg
<script language="javascript" type="text/javascript">
var img1= new Image();
img1.src="images/kerryl.jpg";
img centerimg();
centerimg.src = images/kerrys.jpg;
</script>
<body>
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td width="108">
<a href=""
onMouseOver='document.center.src=img1.src'
onMouseOut='document.center.src=centerimg.src'><img
src="images/kerrys.jpg"></a>
</td>
<td>
<a name="centerimg.src"></a>
</td>
</tr>
</table>
Here's the test page javapopup
Here's the css page css
Tip please?
Thanks,
Kerry
< Message edited by Kerrith -- 5/21/2006 16:51:16 >
| |
|
 New Messages |
 No New Messages |
 Hot Topic w/ New Messages |
 Hot Topic w/o New Messages |
 Locked w/ New Messages |
 Locked w/o New Messages |
|
Post New Thread
Reply to Message
Post New Poll
Submit Vote
Delete My Own Post
Delete My Own Thread
Rate Posts
|
|
|
Printable Version 
