|
| |
|
|
Larry M.
Posts: 2906
Joined: 2/20/2003
From: Greenville, South Carolina, USA
Status: offline
 |
Neat Design Effect - How Did They Do It? - 12/9/2004 7:17:08
Hello Everyone,
Very nice effect on this page: http://www.libertychamberofcommerce.com/Community.htm when you click link on right panel and corresponding graphic/text/hyperlink opens on the left panel. Looks like it may have all been done in Flash.
I have SwishMax, not Macromedia. Anyone know how I can duplicate this effect in SM or any other way?
Thanks!
_____________________________
Larry M.
"Veni, Vidi, Velcro"
(I came; I saw; I stuck around)
|
|
|
|
Giomanach
Posts: 6136
Joined: 11/19/2003
From: England
Status: offline
|
RE: Neat Design Effect - How Did They Do It? - 12/9/2004 7:34:37
Larry
It is FLASH, but similar effect can be done with JS...is a tad slower than that, but same effect is given, I can post coding and example if you want?
_____________________________
| |
|
|
|
Reflect
Posts: 4769
From: USA
Status: offline
|
RE: Neat Design Effect - How Did They Do It? - 12/9/2004 8:17:19
Larry,
Isn't Flash nice when used with taste? Dan is correct. Prior to Flash I did this with JS. If I remember right I found it over at HotScripts.
Take care,
_____________________________
| |
|
|
|
Larry M.
Posts: 2906
Joined: 2/20/2003
From: Greenville, South Carolina, USA
Status: offline
|
RE: Neat Design Effect - How Did They Do It? - 12/9/2004 10:24:15
quote:
It is FLASH, but similar effect can be done with JS...is a tad slower than that, but same effect is given, I can post coding and example if you want?
Dan,
Yes, please. Since I'm not a coder, it would be nice of you to indicate by text color or bold what elements of the code I need to change to make it "customized".
Thanks!
_____________________________
Larry M.
"Veni, Vidi, Velcro"
(I came; I saw; I stuck around)
| |
|
|
|
Larry M.
Posts: 2906
Joined: 2/20/2003
From: Greenville, South Carolina, USA
Status: offline
|
RE: Neat Design Effect - How Did They Do It? - 12/9/2004 10:35:13
quote:
Isn't Flash nice when used with taste?
Reflect,
Good observation. Yes, this is tasteful, clean and fast loading, even on dial-up. Puzzling thing is nowhere on the site does the development company take credit - I certainly would. Pretty slick stuff for a little, out-of-the-way town between Easley and Clemson, South Carolina.
Anyone have any idea how I can use SwishMax for this or do I just go with script (or cough-up $$ for Macromedia)?
_____________________________
Larry M.
"Veni, Vidi, Velcro"
(I came; I saw; I stuck around)
| |
|
|
|
dpf
Posts: 7126
Joined: 11/12/2003
From: India-napolis
Status: offline
|
RE: Neat Design Effect - How Did They Do It? - 12/9/2004 11:30:42
quote:
it would be nice of you to indicate by text color or bold what elements of the code I need to change to make it "customized".
Larry: in your graphics software, create 3 - 20x20 gif's
1. green and call it greenleft.gif
2. red and call it redcenter.gif
3. blue and call it bluecenter.gif
place the 3 gifs in a folder with this code and open it in your browser.. the mouseover at one location (greenleft) changes the image - not there but at another location
<HTML>
<HEAD>
<TITLE></TITLE>
</HEAD>
<script language="javascript" type="text/javascript">
<!--
var redcenter= new Image();//creates a new Image object
redcenter.src="redcenter.gif";//places gif image into object to preload it
var bluecenter= new Image();//creates a new Image object
bluecenter.src="bluecenter.gif";//places gif image into object to preload it
-->
</script>
<BODY >
<img src="greenleft.gif" onMouseOver='document.center.src=redcenter.src' onMouseOut='document.center.src=bluecenter.src'>Green Image</a>
<p><img src="bluecenter.gif" name="center"><p>
</BODY></HTML>
<edit> forgot- copy /paste this code into notepad and save it as whatevername.html and then open in browser
the key is that the image we want to change was given a name - name="center" we can then refer to it with dot syntax document.center.src the newest DOM doesnt use this method but we wont go there now..lol..this is still well supported and will be for quite awhile. you can add more images, change name..change where it is on the page..the key is the name
< Message edited by dpf -- 12/9/2004 11:36:54 >
_____________________________
Dan
| |
|
|
|
Giomanach
Posts: 6136
Joined: 11/19/2003
From: England
Status: offline
|
RE: Neat Design Effect - How Did They Do It? - 12/9/2004 12:09:26
Larry, External JS file, call is what you will:
//changes an image to another image
function change_img(imgName,imgFile) {
document[imgname].src = imgfile;
return.false;
}
Link to it via the script thingy in the header:
<script type="text/javascript" language="JavaScript" src="file.js"></script>
then have your image like so:
<img src="image.jpg" name="gallery">
Then have the links to chnage it like so:
<a href="image2.jpg" onMouseOver='return change_img("gallery",this.href);'>Link</a>
Edit bits in bold to suit....the two words Gallery must match in both the hyperlink and the img syntax...or it wont work....but you can repeat the link for as many images as you like...:)
<edit>I noticed a boo boo in my JS...</edit>
< Message edited by Giomanach -- 12/9/2004 16:06:23 >
_____________________________
| |
|
|
|
Reflect
Posts: 4769
From: USA
Status: offline
|
RE: Neat Design Effect - How Did They Do It? - 12/9/2004 15:57:11
quote:
Puzzling thing is nowhere on the site does the development company take credit - I certainly would.
Yup, feels like a free lance job on the Flash.
Take care,
Brian
_____________________________
| |
|
|
|
BobbyDouglas
Posts: 5479
Joined: 5/15/2003
From: Arizona
Status: offline
|
RE: Neat Design Effect - How Did They Do It? - 12/9/2004 16:57:20
Swishmax?
All this is, is just a text link that displays a graphic. I haven't worked with swish in awhile, but if you can insert a link, that when click, opens an image, you can do it with swish.
_____________________________
Arizona Web Design - Mr Bobs Web Design in Arizona
The Arizona Web Hosting Challenge
| |
|
|
|
Larry M.
Posts: 2906
Joined: 2/20/2003
From: Greenville, South Carolina, USA
Status: offline
|
RE: Neat Design Effect - How Did They Do It? - 12/10/2004 7:16:09
quote:
<img src="image.jpg" name="gallery">
Then have the links to chnage it like so:
<a href="image2.jpg" onMouseOver='return change_img("gallery",this.href);'>Link</a>
Dan,
I'm getting most of this - I use an external js file to manage banner rotations.
What I don't understand is how this script makes an image/link come up in another table cell - on the Liberty Chamber of Commerce site activating the hyperlink in the right table cell calls up an image/link in the left table cell.
Thanks!
_____________________________
Larry M.
"Veni, Vidi, Velcro"
(I came; I saw; I stuck around)
| |
|
|
|
Larry M.
Posts: 2906
Joined: 2/20/2003
From: Greenville, South Carolina, USA
Status: offline
|
RE: Neat Design Effect - How Did They Do It? - 12/10/2004 7:19:32
quote:
in your graphics software, create 3 - 20x20 gif's
1. green and call it greenleft.gif
2. red and call it redcenter.gif
3. blue and call it bluecenter.gif
place the 3 gifs in a folder with this code and open it in your browser.. the mouseover at one location (greenleft) changes the image - not there but at another location
View Code
Dan,
I'll experiment with this later today or tomorrow and get back to you by PM.
Thanks!
_____________________________
Larry M.
"Veni, Vidi, Velcro"
(I came; I saw; I stuck around)
| |
|
|
|
Larry M.
Posts: 2906
Joined: 2/20/2003
From: Greenville, South Carolina, USA
Status: offline
|
RE: Neat Design Effect - How Did They Do It? - 12/10/2004 7:23:55
quote:
I haven't worked with swish in awhile, but if you can insert a link, that when click, opens an image, you can do it with swish
Bobby,
SwishMax is the latest Swish version. I know you can insert and open a link in Swish, but how do you make it open at another location? In this case, the link is activated in the right table cell and the corresponding image/link opens in the left. Any ideas?
Hopefully with input from you, Dan & Dan I'll get this baby surrounded .
Thanks!
_____________________________
Larry M.
"Veni, Vidi, Velcro"
(I came; I saw; I stuck around)
| |
|
|
|
Giomanach
Posts: 6136
Joined: 11/19/2003
From: England
Status: offline
|
RE: Neat Design Effect - How Did They Do It? - 12/14/2004 16:09:59
quote:
ORIGINAL: Larry M.
quote:
<img src="image.jpg" name="gallery">
Then have the links to chnage it like so:
<a href="image2.jpg" onMouseOver='return change_img("gallery",this.href);'>Link</a>
Dan,
I'm getting most of this - I use an external js file to manage banner rotations.
What I don't understand is how this script makes an image/link come up in another table cell - on the Liberty Chamber of Commerce site activating the hyperlink in the right table cell calls up an image/link in the left table cell.
Thanks!
Larry
JavaScript uses elements of the document, browser window and the user actions to alter and determine the final output.
The script doesn't seem to wanna play...I've had it working before though...I'll play around with it later on...
_____________________________
| |
|
|
|
BobbyDouglas
Posts: 5479
Joined: 5/15/2003
From: Arizona
Status: offline
|
RE: Neat Design Effect - How Did They Do It? - 12/14/2004 16:29:23
SwishMax is the latest Swish version. I know you can insert and open a link in Swish, but how do you make it open at another location? In this case, the link is activated in the right table cell and the corresponding image/link opens in the left. Any ideas?
- I haven't used Swish in a long time.
I think you are thinking about this a bit too much. Take a look at the source code, it isn't a cell, it is just ONE swf file. So this isn't really correct "the link is activated in the right table cell and the corresponding image/link opens in the left"
There is a link on the right, and when it is clicked, it displays an image on the left. Swish is simple, but I thought it could do a few things other than tweens. Basically, you just need to find out how to create a link that displays a picture, you also need to be able to position the picture too.
Does that help?
_____________________________
Arizona Web Design - Mr Bobs Web Design in Arizona
The Arizona Web Hosting Challenge
| |
|
|
|
smoked_apparition
Posts: 7
Joined: 12/22/2004
Status: offline
|
RE: Neat Design Effect - How Did They Do It? - 12/22/2004 2:02:13
what I don't understand is how to make the videos... Do I just copy and image and use like a stretch effect and alot of frames?
| |
|
|
|
dpf
Posts: 7126
Joined: 11/12/2003
From: India-napolis
Status: offline
|
RE: Neat Design Effect - How Did They Do It? - 12/22/2004 7:49:22
quote:
I think you are thinking about this a bit too much. Take a look at the source code, it isn't a cell, it is just ONE swf fileSo this isn't really correct "the link is activated in the right table cell and the corresponding image/link opens in the left well yes and no.... yes it is only one file (swf) in the html but inside the .swf, there is a right panel and a left panel and when you click, no it isnt a hyperlink as in html it is a Flash action script "onClick" command very similar to javascript onclick.
_____________________________
Dan
| |
|
 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 
