Dreamweaver - Targeting Images...

Author

Targeting Images...

r_tist

2004-08-26, 12:19 pm

Can someone please explain how I can target an image? Tutorial links would be
handy also.
Just how difficult is this?
When hovered over, I want tiny thumbnails to show the photo larger on a
different spot or section on the same page.

Appreciated,

Christine

Joe Makowiec

2004-08-26, 12:19 pm

On Tue 24 Aug 2004 07:44:21p, r_tist wrote in macromedia.dreamweaver:

> Can someone please explain how I can target an image? Tutorial links
> would be handy also. Just how difficult is this?
> When hovered over, I want tiny thumbnails to show the photo larger on
> a different spot or section on the same page.

Google for [disjoint rollover dreamweaver]. Warning, however: watch your
page weight. If you do this with, say, 10 images, each of which has a 10K
larger image, your page is suddenly 100K just in the rollover images.
Because the images preload, this will take forever to download on a dialup
connection.

Murray *TMM*

2004-08-26, 12:19 pm

In DW we call this a disjointed (or disjoint) rollover - here's a tut for
you........

http://www.dwfaq.com/tutorials/basics/disjointed.asp

--
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
==================

"r_tist" <webforumsuser@macromedia.com> wrote in message
news:cggjsl$7qf$1@forums.macromedia.com...
> Can someone please explain how I can target an image? Tutorial links would
> be
> handy also.
> Just how difficult is this?
> When hovered over, I want tiny thumbnails to show the photo larger on a
> different spot or section on the same page.
>
> Appreciated,
>
> Christine
>

r_tist

2004-08-26, 12:20 pm

Not connecting ...

I followed the tutorial but it isn't what I want. I want the large image to
appear in a completely different section on the same page when the thumbnail
image is hovered over. How can I get them to connect? Swap image is swapping
the large image to compress into the thumbnail image dimensions.
I have all the images ready to go & sized up properly...just need a way to
connect the small to the large.

Please help me.

DiMa *TMM*

2004-08-26, 12:20 pm

r_tist <webforumsuser@macromedia.com> wrote:
> Not connecting ...
>
> I followed the tutorial but it isn't what I want. I want the large
> image to appear in a completely different section on the same page
> when the thumbnail image is hovered over. How can I get them to
> connect? Swap image is swapping the large image to compress into the
> thumbnail image dimensions. I have all the images ready to go &
> sized up properly...just need a way to connect the small to the large.

Then you're not doing something right. Did you follow the tutorial EXACTLY?
Can you show us the page where you did the tutorial that isn't working for
you?

--
--
--
DiMa
Team Macromedia Member for Dreamweaver MX
--------------------
WEB FORUM USERS: Please log on to the Newsgroup for quicker replies to
your posts: news://forums.macromedia.com/macromedia.dreamweaver
For Answers, check here first:
http://groups.google.com/advanced_g...dia.dreamweaver
http://www.macromedia.com/support/d.../technotes.html
http://www.projectseven.com/faqbase
http://dwfaq.com

http://www.macromedia.com/support/forums/etiquette.htm

www dot flyingtigerwebdesign dot com

TC2112

2004-08-26, 12:20 pm

Hello,
The first thing you need to do if you want large images to appear somewhere
else on the page when you mouseover the thumbnails is to set a large image in
the spot you want your large images to appear. There needs to be an image there
to begin with, so swap image has a source to swap with. If you have nothing but
thumbnails on your page, and select swap image, the only choices you'll have to
swap with are those thumbnails. It sounds like that is what happened. Here's
how to do it.
1. Make sure all of your large images that will be appearing are the same size
(height and width) .
2. Place a large image on the page where you want the large images to appear
when you mouseover the thumbnails.
If you want that spot to start out looking empty, you'll still need an image
there but you can make the spot look empty. Make a transparent gif or a gif
that's the same color as your background, so it will be "invisible". Make sure
you make it the same size as the large images you'll be showing, as the size of
this image will determine the size of the other large images that swap with it.
Be sure to name this image in the property inspector, in the leftmost box, so
it will be easy to see it and select it in the Swap Image user interface.
(I'll name it bigpics here)
Of course, if you want the page to start with an image showing in that spot;
just insert that image there. (Again, same size as all large images you'll be
using).
4. Select your thumbnail, and open the Behaviors panel. Click the Plus (+)
button and select Swap Image from the pop-up menu.
The user interface opens and in the "images" list you should see the name of
the large image (bigpic). Click and highlight it. In the "Set source to:" box,
browse to the large image that will appear on mouseover. Click OK.
5. Repeat step 4 for each of your other thumbnails, choosing that first large
image's name (bigpic) for each swap.

If your images are different sizes, here's a great tutorial using layers:
http://www.projectseven.com/tutoria...owpic/index.htm
Good luck, take care.

Murray *TMM*

2004-08-26, 12:20 pm

And here's another example using an entirely different method
(SetTextofLayer)....

http://www.great-web-sights.com/stol_slideshow.html

The problem with just using ordinary disjoint rollovers (as has been pointed
out) is that the page becomes heavier and heavier as you add more and more
large images to the scheme. A heavier page means a longer download time.
Neither this method linked above nor the ShowPic method have that problem.

--
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
==================

"TC2112" <webforumsuser@macromedia.com> wrote in message
news:cghpf9$cuo$1@forums.macromedia.com...
> Hello,
> The first thing you need to do if you want large images to appear
> somewhere
> else on the page when you mouseover the thumbnails is to set a large image
> in
> the spot you want your large images to appear. There needs to be an image
> there
> to begin with, so swap image has a source to swap with. If you have
> nothing but
> thumbnails on your page, and select swap image, the only choices you'll
> have to
> swap with are those thumbnails. It sounds like that is what happened.
> Here's
> how to do it.
> 1. Make sure all of your large images that will be appearing are the same
> size
> (height and width) .
> 2. Place a large image on the page where you want the large images to
> appear
> when you mouseover the thumbnails.
> If you want that spot to start out looking empty, you'll still need an
> image
> there but you can make the spot look empty. Make a transparent gif or a
> gif
> that's the same color as your background, so it will be "invisible". Make
> sure
> you make it the same size as the large images you'll be showing, as the
> size of
> this image will determine the size of the other large images that swap
> with it.
> Be sure to name this image in the property inspector, in the leftmost box,
> so
> it will be easy to see it and select it in the Swap Image user interface.
> (I'll name it bigpics here)
> Of course, if you want the page to start with an image showing in that
> spot;
> just insert that image there. (Again, same size as all large images you'll
> be
> using).
> 4. Select your thumbnail, and open the Behaviors panel. Click the Plus (+)
> button and select Swap Image from the pop-up menu.
> The user interface opens and in the "images" list you should see the name
> of
> the large image (bigpic). Click and highlight it. In the "Set source to:"
> box,
> browse to the large image that will appear on mouseover. Click OK.
> 5. Repeat step 4 for each of your other thumbnails, choosing that first
> large
> image's name (bigpic) for each swap.
>
> If your images are different sizes, here's a great tutorial using layers:
> http://www.projectseven.com/tutoria...owpic/index.htm
> Good luck, take care.
>
>

Joe Makowiec

2004-08-26, 12:20 pm

On 24 Aug 2004 in macromedia.dreamweaver, r_tist wrote:

> I followed the tutorial but it isn't what I want. I want the large
> image to
> appear in a completely different section on the same page when the
> thumbnail image is hovered over. How can I get them to connect?
> Swap image is swapping the large image to compress into the
> thumbnail image dimensions.
> I have all the images ready to go & sized up properly...just need a
> way to connect the small to the large.

<a href="java script:;"
onmouseover="MM_swapImage('LargerImage','','image1.jpg',1)"
onmouseout="MM_swapImage('LargerImage','','standard.jpg',1)">
<img src="image1thumb.jpg" alt="My First Picture" width="36" height="36" /></a>
....
<img src="standard.jpg" alt="Enlarged Picture" name="LargerImage" width="132" height="132" id="LargerImage" />

Expand as needed; make sure to include the MM_swapImage script.

--
Joe Makowiec
http://makowiec.net/
Email: http://makowiec.net/email.php

.: Nadia :.TMM :.

2004-08-26, 12:20 pm

My page has a white background - yours is a brilliant Hot Pink - maybe
matches those comfy slippers of yours ? Þ

this is my example after seeing a post by you a while back - great use of
the behaviour.. thanks for the tip Murray .....
http://dreamweaverresources.com/tut...textoflayer.htm

--
Nadia
---------------
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/
------------------------------------------------
Team Macromedia Volunteer for Dreamweaver

"Murray *TMM*" <forums@HAHAgreat-web-sights.com> wrote in message
news:cghrsj$f57$1@forums.macromedia.com...
> And here's another example using an entirely different method
> (SetTextofLayer)....
>
> http://www.great-web-sights.com/stol_slideshow.html
>
> The problem with just using ordinary disjoint rollovers (as has been
pointed
> out) is that the page becomes heavier and heavier as you add more and more
> large images to the scheme. A heavier page means a longer download time.
> Neither this method linked above nor the ShowPic method have that problem.
>
> --
> 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
> ==================
>
> "TC2112" <webforumsuser@macromedia.com> wrote in message
> news:cghpf9$cuo$1@forums.macromedia.com...
image[color=darkred]
image[color=darkred]
same[color=darkred]
Make[color=darkred]
box,[color=darkred]
interface.[color=darkred]
you'll[color=darkred]
(+)[color=darkred]
name[color=darkred]
to:"[color=darkred]
layers:[color=darkred]
>
>

Murray *TMM*

2004-08-26, 12:20 pm

Yes - my fuzzy pink mules....

Hey - I like pink.

--
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
==================

".: Nadia :.TMM :." <forums@-ozzie-perrelink.com.au> wrote in message
news:cgi04m$j8l$1@forums.macromedia.com...
> My page has a white background - yours is a brilliant Hot Pink - maybe
> matches those comfy slippers of yours ? Þ
>
> this is my example after seeing a post by you a while back - great use of
> the behaviour.. thanks for the tip Murray .....
> http://dreamweaverresources.com/tut...textoflayer.htm
>
>
> --
> Nadia
> ---------------
> 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/
> ------------------------------------------------
> Team Macromedia Volunteer for Dreamweaver
>
>
>
> "Murray *TMM*" <forums@HAHAgreat-web-sights.com> wrote in message
> news:cghrsj$f57$1@forums.macromedia.com...
> pointed
> image
> image
> same
> Make
> box,
> interface.
> you'll
> (+)
> name
> to:"
> layers:
>
>

.: Nadia :.TMM :.

2004-08-26, 12:20 pm

"Murray *TMM*" <forums@HAHAgreat-web-sights.com> wrote in message
news:cgi0gf$jnn$1@forums.macromedia.com...
> Yes - my fuzzy pink mules....

Hope they match your pjs though......

> Hey - I like pink.

Join the club - especially when it comes to fuzzy slippers <lol>

--
Nadia
---------------
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/
------------------------------------------------
Team Macromedia Volunteer for Dreamweaver

Murray *TMM*

2004-08-26, 12:20 pm

But, I changed it....

--
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
==================

".: Nadia :.TMM :." <forums@-ozzie-perrelink.com.au> wrote in message
news:cgi1aj$kp0$1@forums.macromedia.com...
>
> "Murray *TMM*" <forums@HAHAgreat-web-sights.com> wrote in message
> news:cgi0gf$jnn$1@forums.macromedia.com...
>
> Hope they match your pjs though......
>
>
> Join the club - especially when it comes to fuzzy slippers <lol>
>
> --
> Nadia
> ---------------
> 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/
> ------------------------------------------------
> Team Macromedia Volunteer for Dreamweaver
>
>
>
>
>

r_tist

2004-08-26, 12:20 pm

Thanks TC2112...your info makes clear sense to me & I am going to try out what
you've written when I get home tonight.
I must be on the right track because I somehow knew to create the transparent
..gif to the same size as all the "big" pics will be.
* Note: there will only be 4 images which enlarge so I suppose that's not so
bad as far as memory is concerned.

Thanks!

Christine

r_tist

2004-08-26, 12:20 pm