HighDots Forums  

Re: How Did They Do That? (Mouseover / JavaScript?)

Macromedia Dreamweaver Macromedia Dreamweaver Discussions (macromedia.dreamweaver)


Discuss Re: How Did They Do That? (Mouseover / JavaScript?) in the Macromedia Dreamweaver forum.



Reply
 
Thread Tools Display Modes
  #1  
Old   
Catherine_B
 
Posts: n/a

Default Re: How Did They Do That? (Mouseover / JavaScript?) - 09-09-2004 , 02:27 PM






Well now, I just saw a reply on a "Behavior Question" post from steveo23 that I
think describes what I'm trying to do! Thumbnails that will enlarge on the
same page (I want to choose where) all in the same spot!

<<I think the only way you could do that would be in Flash. (if you don't want
to change pages) but other wise you would have to make different pages for each
picture. (index1.htm, index2.htm ) and so on. UNLESS you want to do somthing
like have all the images as a thumbnail on the top and so when you click on one
the image shows up in a image place holder on the page. steveo23 Member.>>

Then Murray referred us to his earlier answer to "the original poster" -- but
who is that / which post?








Reply With Quote
  #2  
Old   
Murray *TMM*
 
Posts: n/a

Default Re: How Did They Do That? (Mouseover / JavaScript?) - 09-09-2004 , 02:32 PM






It was me. Here's the content -

Luke:

The more images you add to your disjoint rollover (that's what you are
talking about), the heavier your page will become. So, generally speaking,
it's a bad idea to do it this way. However, there are several ways to
overcome this.

1. Investigate the use of PVII's ShowPic extension ->
http://www.projectseven.com/. This is an extremely clever method of using
dynamic javascript to swap an external image onto the page. This method
adds *nothing* to the page's base weight, other than the weight of the code.

2. Investigate the use of the SetTextofLayer extension as an alternative
way of achieving the save effect (a sort of "poor man's" approach.

As an example, consider that you have three links, each of which is to
trigger three corresponding larger images (image1.jpg, image2.jpg,
image3.jpg) in the images folder (e.g., /images/image1.jpg, etc.).

Imagine also that your page had an absolutely positioned division (a
Dreamweaver "layer") named imageLayer, placed on the page where you want the
larger images to appear, but empty of content.

Now - select link1 and apply the SetTextofLayer behavior. Make sure that
imageLayer is the chosen layer, and then enter this code into the text
area -

<img src=/images/image1.jpg width="350" height="480">

and press OK.

Repeat this process for image2.jpg and image3.jpg. Make sure that your
event for each application is onClick. Preview the page. Click a link.
What do you see?

You can see an example here -
http://www.great-web-sights.com/stol_slideshow.html

--
Murray --- ICQ 71997575
Team Macromedia Volunteer for Dreamweaver
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.dreamweavermx-templates.com - Template Triage!
http://www.projectseven.com/go - DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs, Tutorials & Resources
http://www.macromedia.com/support/search/ - Macromedia (MM) Technotes
==================

"Catherine_B" <webforumsuser (AT) macromedia (DOT) com> wrote

Quote:
Well now, I just saw a reply on a "Behavior Question" post from steveo23
that I
think describes what I'm trying to do! Thumbnails that will enlarge on
the
same page (I want to choose where) all in the same spot!

I think the only way you could do that would be in Flash. (if you don't
want
to change pages) but other wise you would have to make different pages for
each
picture. (index1.htm, index2.htm ) and so on. UNLESS you want to do
somthing
like have all the images as a thumbnail on the top and so when you click
on one
the image shows up in a image place holder on the page. steveo23
Member.

Then Murray referred us to his earlier answer to "the original poster" --
but
who is that / which post?










Reply With Quote
  #3  
Old   
Catherine_B
 
Posts: n/a

Default Re: How Did They Do That? (Mouseover / JavaScript?) - 09-09-2004 , 05:59 PM



Murray, that simple is somewhat like what I'm thinking of.

I think the process I'm trying to recreate was something that could be done
without extensions and add-ons. Maybe my description is insufficient.

I have also seen this in Flash; I wonder if that makes more sense?



Reply With Quote
  #4  
Old   
Murray *TMM*
 
Posts: n/a

Default Re: How Did They Do That? (Mouseover / JavaScript?) - 09-09-2004 , 06:11 PM



Good grief no. What is it you want to do?

--
Murray --- ICQ 71997575
Team Macromedia Volunteer for Dreamweaver
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.dreamweavermx-templates.com - Template Triage!
http://www.projectseven.com/go - DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs, Tutorials & Resources
http://www.macromedia.com/support/search/ - Macromedia (MM) Technotes
==================

"Catherine_B" <webforumsuser (AT) macromedia (DOT) com> wrote

Quote:
Murray, that simple is somewhat like what I'm thinking of.

I think the process I'm trying to recreate was something that could be
done
without extensions and add-ons. Maybe my description is insufficient.

I have also seen this in Flash; I wonder if that makes more sense?





Reply With Quote
  #5  
Old   
.: Nadia :TMM :.
 
Posts: n/a

Default Re: How Did They Do That? (Mouseover / JavaScript?) - 09-09-2004 , 08:04 PM



In addition to Murrays' sample, I put this together following his advice:
http://dreamweaverresources.com/tutorials/settextoflayer.htm

You can set the action to onMouseover or onClick for text links or for
thumbnail images....

--
Nadia
Team Macromedia Volunteer for Dreamweaver
---------------
http://www.DreamweaverResources.com
Free Templates | Free Nav Bar Sets
Dropdown Menu Designs | CSS Layouts
Ecommerce - YVStore | SEO Articles
Table Tutorials | Background image Tutorials
------------------------------------------------
MM Dreamweaver Tutorials
http://macromedia.com/devnet/mx/dreamweaver/
-----------------


"Catherine_B" <webforumsuser (AT) macromedia (DOT) com> wrote

Quote:
Murray, that simple is somewhat like what I'm thinking of.

I think the process I'm trying to recreate was something that could be
done
without extensions and add-ons. Maybe my description is insufficient.

I have also seen this in Flash; I wonder if that makes more sense?





Reply With Quote
  #6  
Old   
Catherine_B
 
Posts: n/a

Default Re: How Did They Do That? (Mouseover / JavaScript?) - 09-10-2004 , 03:15 PM



Nadia ~

What a nifty sample page you made out of Murray's helpful info. Somehow
seeing it the way you laid it out made more sense, coupled with careful
rereading of Murray's thorough text and reviewing his earlier link to a sample.


I haven't tried using layers in some time, so I'm out of practice and need to
read up on them again. Then I think I'll be all set. Hopefully your new link
sample page will stay up awhile.

You guys are GREAT!



Reply With Quote
  #7  
Old   
.: Nadia :TMM :.
 
Posts: n/a

Default Re: How Did They Do That? (Mouseover / JavaScript?) - 09-10-2004 , 08:31 PM



Thanks Catherine,

Yes that page will stay up (will clean it up a a bit as well), just need to
link to it from the actual tutorials page.

Playing with css is a lot of fun - but can also drive you nuts :-)

Good Luck !

--
Nadia
Team Macromedia Volunteer for Dreamweaver
---------------
http://www.DreamweaverResources.com
Free Templates | Free Nav Bar Sets
Dropdown Menu Designs | CSS Layouts
Ecommerce - YVStore | SEO Articles
Table Tutorials | Background image Tutorials
------------------------------------------------
MM Dreamweaver Tutorials
http://macromedia.com/devnet/mx/dreamweaver/
-----------------




"Catherine_B" <webforumsuser (AT) macromedia (DOT) com> wrote

Quote:
Nadia ~

What a nifty sample page you made out of Murray's helpful info. Somehow
seeing it the way you laid it out made more sense, coupled with careful
rereading of Murray's thorough text and reviewing his earlier link to a
sample.


I haven't tried using layers in some time, so I'm out of practice and need
to
read up on them again. Then I think I'll be all set. Hopefully your new
link
sample page will stay up awhile.

You guys are GREAT!





Reply With Quote
  #8  
Old   
Catherine_B
 
Posts: n/a

Default Re: How Did They Do That? (Mouseover / JavaScript?) - 09-13-2004 , 09:14 PM



Nadia & Murray - I hope you see this.

I have been trying out your rollover text-to-layer solution for the site I
need to build that has lots of thumbnail art where I need the visitor to be
able to mouse over the thumbnail and see a simultaneous enlargement on the same
page.

Is there any step left out of the tutorial you set up that someone new might
not pick up on? Something obvious is sailing right by me. My code doesn't
match yours; and the images to the right don't come up. And I've checked them
over and over and also used the pointer to point to them so there's no chance
of a typo.

I also tried plugging my pictures into Nadia's code on a practice page, and
when I do that it doesn't work either! I can't figure it out. Since I've
already spent longer on this conundrum that I want to admit, I am crying
"uncle" and going back to the book to see if I can figure it out.

Weary of banging my head,

Catherine

Re: Nadia's post:

<<In addition to Murrays' sample, I put this together following his advice:
<<http://dreamweaverresources.com/tutorials/settextoflayer.htm

<<You can set the action to onMouseover or onClick for text links or for
<<thumbnail images....

<<Nadia




Reply With Quote
  #9  
Old   
Catherine_B
 
Posts: n/a

Default Re: How Did They Do That? (Mouseover / JavaScript?) - 09-13-2004 , 09:29 PM



PS - Regarding browsers -

I keep reading that layers aren't visible on all browsers. It will be a
catastrophe if I create all this stuff in layers and then his clients cannot
see it.

Whatever I do needs to be "safe". I tried to figure out the javascript to
make the rollovers on the left show the enlargment in a cell on the right as in:

http://www.osei.noaa.gov/

... but I cannot quite recreate it properly, and I cannot locate a tutorial on
doing just that OR something simple that will assist. There are a number of js
slideshows available, but nothing with thumbnails and the enlargement on the
same page.

{{I've spent two days going in circles; I can't make either the js or the
layers work properly.}}



Reply With Quote
  #10  
Old   
Murray *TMM*
 
Posts: n/a

Default Re: How Did They Do That? (Mouseover / JavaScript?) - 09-14-2004 , 07:00 AM



Quote:
I keep reading that layers aren't visible on all browsers. It will be a
catastrophe if I create all this stuff in layers and then his clients
cannot
see it.
You should make note of where you are reading such poop and never read
anything else there again. "Layers" are supported in all v4+ browsers.

Show me what you have got so far, please.

--
Murray --- ICQ 71997575
Team Macromedia Volunteer for Dreamweaver
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.dreamweavermx-templates.com - Template Triage!
http://www.projectseven.com/go - DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs, Tutorials & Resources
http://www.macromedia.com/support/search/ - Macromedia (MM) Technotes
==================

"Catherine_B" <webforumsuser (AT) macromedia (DOT) com> wrote

Quote:
PS - Regarding browsers -

I keep reading that layers aren't visible on all browsers. It will be a
catastrophe if I create all this stuff in layers and then his clients
cannot
see it.

Whatever I do needs to be "safe". I tried to figure out the javascript to
make the rollovers on the left show the enlargment in a cell on the right
as in:

http://www.osei.noaa.gov/

... but I cannot quite recreate it properly, and I cannot locate a
tutorial on
doing just that OR something simple that will assist. There are a number
of js
slideshows available, but nothing with thumbnails and the enlargement on
the
same page.

{{I've spent two days going in circles; I can't make either the js or the
layers work properly.}}





Reply With Quote
Reply




Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

vB code is On
Smilies are On
[IMG] code is On
HTML code is Off



Powered by vBulletin Version 3.5.4
Copyright ©2000 - 2009, Jelsoft Enterprises Ltd.