Pic Ratio and Swap Image Behaviour

Alrite guys, iv been picking up my web design skills by
developing my own site, and as part of that iv design a gallery
with thumbnails circling a central picture. now iv used the swap
image behaviour to change the thumnail to the central large pic,
unfortunatly the pictures are stretching to the limit of the slice,
is their anyway to fix the ratio of all the pics am using so they
come up in their original size rather than being stretched beyond
the original?
Cheers
Dark

You can do this many ways ways -
1. Don't use swap image - use Show/Hide layer instead. Have
the alternate
image in a hidden layer that is shown when the trigger is
'tickled'. Using
this method you can have images that are any dimension.
2. Use swap image, but remove the dimensions from the
original image's tag,
i.e., change this -
<img name="original" width="150" height="220" ...
to this -
<img name="original" ...
Now when you swap in your offsize image, there is no
predefined size to
change it to. Be aware that this method may well result in an
unpleasant
and undesirable 'rearrangement' of your page layout as it
adjusts to your
new image's dimensions.
3. Pad the smaller image with canvas background color on all
sides so that
all the images *are the same size*.
4. Use a SetTextofLayer behavior to change the image
reference in a layer
positioned so that it will show the desired larger image in
the proper
place.
5. Use the PVII ShowPic extension -
http://www.projectseven.com/
Take your pick....
Murray --- ICQ 71997575
Adobe Community Expert
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.projectseven.com/go
- DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs,
Tutorials & Resources
==================
"Dark7722" <[email protected]> wrote in
message
news:fusck6$of2$[email protected]..
> the issue iv got is not the large images being reduced
(am quite happy to
> crop
> them to fit) but the much smaller images being stretched
from a horizontal
> rectangle to a much large vertical rectangle, their a
different shape from
> the
> central image to begin with
>

Similar Messages

Swap Image behaviour mis-behaving

Hi All
Not sure whats happening here, returned to FW CS5 after a few months of doing other things and I cant seem to get the swap image behaviour to function...
Well thats not quite right, it does but the wrong way round...
If I have state one green square and state two red square and I place a slice over green square on state one and add the swap image behaviour and select the corresponding slice area in state two, when I press F12 you'd expect to see the green square which would turn rd on mouse over - wrong, I get the red square and if I mouse over if flickers green.
FW is showing me whats on state two...
CS5 Win764
Tony

Genius - never thought to check animated gif export bit and never realised you could have all the swap images on one state!
I guess because there are less states the page will load quicker?
Many thanks for your time and patience
Tony

"swap image" behaviour

Hi,
Could anyone help me with the following code:
When the mouse rolls over my thumnail images the picture in
the centre changes.
All of them work apart from a picture that is bigger that and
has a scroll bar. This picture will not appear.
Is it because behaviour "swap image" doesn't work on images
that require a scroll bar?
I'd appreciate anyones help.
Rich
<div id="thumb_04"> is the problem one. The code is
below:
<div id="thumbnails">
<div id="thumb_01"><img
src="../skateboard/00_thumbs/th_skateboard_01.jpg" alt="pic_01"
name="pic_01" width="113" height="80" id="pic_01"
onmouseover="MM_swapImage('main_pic_01','','../skateboard/01_large/lg_skateboard_01.jpg', 1)"
/></div>
<div id="thumb_02"><img
src="../skateboard/00_thumbs/th_skateboard_02.jpg" alt="pic_02"
name="pic_02" width="113" height="80" id="pic_02"
onmouseover="MM_swapImage('main_pic_01','','../skateboard/01_large/lg_skateboard_02.jpg', 1)"
/></div>
<div id="thumb_03"><img
src="../skateboard/00_thumbs/th_skateboard_03.jpg" alt="pic_03"
name="pic_03" width="113" height="80" id="pic_03"
onmouseover="MM_swapImage('main_pic_01','','../skateboard/01_large/lg_skateboard_03.jpg', 1)"
/></div>
<div id="thumb_04"><img
src="../skateboard/00_thumbs/th_skateboard_04.jpg" alt="pic_04"
name="pic_04" width="113" height="80" id="pic_04"
onmouseover="MM_swapImage('main_pic_scroll','','../skateboard/01_large/lg_skateboard_04.j pg',1)"
/></div>
<div id="thumb_05"><img
src="../skateboard/00_thumbs/th_skateboard_05.jpg" alt="pic_05"
name="pic_05" width="113" height="80" id="pic_05"
onmouseover="MM_swapImage('main_pic_01','','../skateboard/01_large/lg_skateboard_05.jpg', 1)"
/></div>
<div id="thumb_06"><img
src="../skateboard/00_thumbs/th_skateboard_06.jpg" alt="pic_06"
name="pic_06" width="113" height="80" id="pic_06"
onmouseover="MM_swapImage('main_pic_01','','../skateboard/01_large/lg_skateboard_06.jpg', 1)"
/></div>
</div>

> Is it because behaviour "swap image" doesn't work on
images that require a
> scroll bar?
An image is an image. So, no.
Can you post a link to the page, please?
Murray --- ICQ 71997575
Adobe Community Expert
(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
==================
"snowboardingrich" <[email protected]> wrote
in message
news:f573k5$jsc$[email protected]..
> Hi,
> Could anyone help me with the following code:
> When the mouse rolls over my thumnail images the picture
in the centre
> changes.
> All of them work apart from a picture that is bigger
that and has a scroll
> bar. This picture will not appear.
> Is it because behaviour "swap image" doesn't work on
images that require a
> scroll bar?
>
> I'd appreciate anyones help.
> Rich
>

Rollover and swap image

Hi, I've created a rollover image that also replaces another
image elsewhere when rolled over. The original rollover does not
return to it's original state on roll out.
Any ideas?
Thanks Chris
<td width="100" height="20"><a
href="philosophy/philosophy.htm" onmouseout="MM_swapImgRestore()"
onmouseover="MM_swapImage('philosophy','','images/navigation/philosophy_over.jpg',1);MM_s wapImage('black_band','','images/navigation/philosophy.jpg',1)"><img
src="images/navigation/philosophy_up.jpg" alt="Philosophy"
name="philosophy" width="100" height="20" border="0"
id="philosophy" /></a></td>

Do not use the automatic restore.
Apply a standard mouseover rollover to image1 to swap in
image1b and to swap
image2 to image2b. Do not enable the restore option. Make the
event
onmouseover.
Apply a second image swap behavior to swap image1 back to
image1, and image2
back to image2. Do not enable the restore option. Make the
event
onmouseout.
I note from your code that you have applied TWO onmouseover
events for the
original swap. Don't do that. Apply the behavior once, but
make that one
application swap both images, i.e., do not swap one image,
click OK, and
apply it again. Swap the first image, then find and select
the second
image, and swap it as well before clicking OK.
Murray --- ICQ 71997575
Adobe Community Expert
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.projectseven.com/go
- DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs,
Tutorials & Resources
==================
"Tun Tun bags of fun" <[email protected]>
wrote in message
news:fm7jg5$f4c$[email protected]..
> Hi, I've created a rollover image that also replaces
another image
> elsewhere
> when rolled over. The original rollover does not return
to it's original
> state
> on roll out.
>
> Any ideas?
>
> Thanks Chris
>
> <td width="100" height="20"><a
href="philosophy/philosophy.htm"
> onmouseout="MM_swapImgRestore()"
>
onmouseover="MM_swapImage('philosophy','','images/navigation/philosophy_over.jpg
>
',1);MM_swapImage('black_band','','images/navigation/philosophy.jpg',1)"><img
> src="images/navigation/philosophy_up.jpg"
alt="Philosophy"
> name="philosophy"
> width="100" height="20" border="0" id="philosophy"
/></a></td>
>

Transparent Image and swap image

When I Fix the Trasparent png issue that i have been having
my swap image doesnt work in IE with the png could someone please
help?

link to your page?
Nancy Gill
Adobe Community Expert
Author: Dreamweaver 8 e-book for the DMX Zone
Co-Author: Dreamweaver MX: Instant Troubleshooter (August,
2003)
Technical Editor: DMX 2004: The Complete Reference, DMX 2004:
A Beginner''s
Guide, Mastering Macromedia Contribute
Technical Reviewer: Dynamic Dreamweaver MX/DMX: Advanced PHP
Web Development
"Monarky2000" <[email protected]> wrote in
message
news:ep8631$has$[email protected]..
> When I Fix the Trasparent png issue that i have been
having my swap image
> doesnt work in IE with the png could someone please
help?

UpdateContent and Swapping images

I have a function built to swap photos of a div:
var imageCount = 0;
setInterval ("updateImage()", 4000 );
function updateImage()
Spry.Effect.DoFade('proImg',{ duration: 700, from: 100, to:
0, finish: function(){
imageCount++;
if ( imageCount > dsPhotos.getRowCount() - 1 )
imageCount = 0;
dsPhotos.setCurrentRowNumber(imageCount);
The photos change every four seconds, this works. The problem
I am having is when I click on a link that uses this function:
function fadeIt(ele,url){
Spry.Effect.DoFade(ele,{ duration: 500, from: 100, to: 0,
finish: function() {
Spry.Utils.updateContent(ele, url, function() {
Spry.Effect.DoFade(ele,{ duration: 500, from: 0, to: 100 });
It replaces the content in the same div that has the rotating
images. But, after four seconds I either get an error message
saying the "proImg" div does not exist or it starts rotating
through the images again.
Is there a better way to do this?
Help!
Thanks!

Here is the body code:
<body onload="updater();">
<div id="container">
<div id="logo"><img src="images/logo.png"
/></div>
<div id="header">
</div>
<div id="menu">
<div class="menubg">
<cfinclude template="menu.cfm">
</div>
</div>
<div id="photos" spry:detailregion="dsPhotos">
<img src="images/site/{picfile}" id="proImg" style="
height: 475px; width: 955px;" title="" />
</div>
<div id="spacer"> </div>
<div id="footer">
<div id="footer_text">

</div>
</div>
</div>
</body>

Moving pics location and removing images from iphoto

Here is the basic breakdown.
1. Imported pics from camera into iphoto.
2. I want to remove some of the pics from iphoto.
3. I do not want to use delete due to I want to burn/move a copy to CD or a different folder on my HD.
4. I moved a couple for test purposes from my iphoto lib to my home folder.
5. Reboot.
6. In iphoto I can still see the photos in the smaller views. but when I try to full screen the photo I get an grey screen ?x type of thing.
I do not want the small pic either.
Advice or direction?
Thanks.
T

T Slap:
To add to Terence's suggestions I'd like to expand on:
3. I do not want to use delete due to I want to burn/move a copy to CD or a different folder on my HD.
To copy those photos to another folder use the File->Export->File Export menu option. This will copy the files to the location of your choice.
To burn the photos to disk so that iPhoto can access them at a later date then use the method described by Terence. To burn just the jpg files to a disk without the iPhoto format use the Export route again to a folder on the desktop and then burn that folder via the Finder.
And do not take the warning about messing with files via the Finder lightly. As you found out it can really mess up the library.
Do you Twango?
TIP: For insurance against the iPhoto database corruption that many users have experienced I recommend making a backup copy of the Library6.iPhoto database file and keep it current. If problems crop up where iPhoto suddenly can't see any photos or thinks there are no photos in the library, replacing the working Library6.iPhoto file with the backup will often get the library back. By keeping it current I mean backup after each import and/or any serious editing or work on books, slideshows, calendars, cards, etc. That insures that if a problem pops up and you do need to replace the database file, you'll retain all those efforts. It doesn't take long to make the backup and it's good insurance.

Rollovers and swap images not working

since i've upgraded to Dreamweaver CS3 i've not been able to create rollovers.. i need to now
is there a bug? a patch that i need? what is going on? I need help please - been able to make do with flash buttons & text until this job.
Running Mac OS10 - if it helps.. these pages were originally designed in go-live and redesigned since - / i wonder if i'm holding my tongue in the correct position. be gentle with your answers - i'm a graphic designer not a web guru

here is the code to three of the rollovers.. it's tabs
i even thought that if i went ahead and uploaded it might work online.. no such luck
<td height="38" colspan="2" align="center" valign="middle"><spacer type="block" width="1" height="379">
                  <spacer type="block" width="1" height="1">
                  <a href="index.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('home','','images/tabs/rimtymehomeover.jpg',1)"><img src="images/tabs/rimtymehome.jpg" alt="Home Page" name="home" width="154" height="38" border="0"></a></td>
            </tr>
            <tr height="38">
              <td height="38" colspan="2" align="center" valign="middle"><a href="malone.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('aboutus','','images/tabs/rimtyme_about_over.jpg',1)"><img src="images/tabs/rimtyme_about.jpg" alt="About us page" name="aboutus" width="154" height="38" border="0"></a></td>
            </tr>
            <tr height="38">
              <td height="38" colspan="2" align="center" valign="middle"><a href="storephotos.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('storegallery','','images/tabs/rimtyme_storephotos.jpg',1)"><im g src="images/tabs/rimtyme_storephotos_over.jpg" alt="Click here for images of each of our locations!" name="storegallery" width="154" height="38" border="0"></a></td>
            </tr>
            <tr height="38">
              <td height="38" colspan="2" align="center" valign="middle"><a href="credit.html"><img src="images/tabs/rimtyme_getstarted.jpg" alt="GETTING STARTED" width="154" height="38" border="0"></a></td>
            </tr>
            <tr height="38">

I have a project in FCP that is a 2:1 aspect ratio. When I send to compressor to author a DVD I lose the aspect ratio and the image fills the 16x9 frame. How do I preserve the original ratio thru compressor?

Aspect ratio lost in compressor

Hi Tom, thanks so much for answering. I totally get the need to letterbox but my issue is, how do I get the best quality in letterbox format?
Should I export it thru QT Conversion or just Export to Quicktime Movie? I exported as a self contained movie to keep the quality but when I send it thru the MPEG-2 compressor for DVD it fills the 16x9 frame without letterbox.
How would I modify the MPEG-2 preset to give me the letterbox in the MPEG-2?
I've been playing around but haven't hit the jackpot yet.
If there's any info you have, it would be greatly appreciated.
Thanks so much
James

Javascript swap images help

hi
i used the swap images behaviour for a gallery i am making
and the result is that he smallimages have blue borders around them
how can i get rid of this without losing functionality
cheers Link

If you don't want any of your linked images to have a border,
put this into
your CSS
a img { border: 0; }
Jo
"talknaija" <[email protected]> wrote in
message
news:gcl5qr$mkr$[email protected]..
> hi
> i used the swap images behaviour for a gallery i am
making and the result
> is
> that he smallimages have blue borders around them how
can i get rid of
> this
> without losing functionality
>
> cheers Link
>

How to apply Swap Image Restore for only one behaviour?

Hi, I have two behaviors for one hotspot..
the first, swaps another image on mouse over..
the second, swaps another image on click..
So, i want the "swap image restore" behaviour to apply only for the first, Is there a way to do that? cuz when i try it applies to both.

@ NancyO
I am trying to do the same thing as Magdi_alafifi - I have two swapImages on click that I want to stay and then another swapImage on mouseover with a "swap image restore" on mouse out.
Here is my code:
<img src="360.png" width="26" height="26" id="Image5" onclick="MM_swapImage('InnerSS','','innersolarsystemON.png',1);
MM_swapImage('outerSS','','outersolarsystemON.png',1)" onmouseover="MM_swapImage('Image5','','360ON.png',1)" onmouseout="MM_swapImgRestore('Image5','','360.png',1)" />
The first swapImage on click works fine, but the second one swaps on click, and resores on mouseout. The swapImage and swapImgRestore on mouseover and mouseout works fine.
I hope this makes sence.

Have a MacBook Pro running Lion and an IMac running Snow Leopard. Want to Back up both images and restore on opposite machine. Essentially swapping images between hard drives. Is this possible and any "gotcha's" to look for? Thanks

Have a MacBook Pro running Lion (10.7.9) and an IMac running Snow Leopard (10.6.8). Want to Back up both images and restore on opposite machines. Essentially swapping images between hard drives. Is this possible and any "gotcha's" to look for? Thanks

If the MBP came with Lion, it most likely won't boot with SL. Easiest thing to do is create a bootable backup/clone of each to an ext HD, partitioned to hold each on a separate volume, ensure that the original machines can boot with their respective clones, and finally, try booting the other machine with the other clone. Images are useless since you can't boot with them to test them out.

Swap images and hover features

Here is a page to help explain my question better - http://www.leadbitterglass.com/etched_glass_designs/dragdroptest.htm
Hi all, I am trying to create a page where visitors can click one small image (containing a corner of the border) to make a larger image appear somewhere else on the page (the full border design). Once the image has been clicked, I want to be able to allow the user to then hover over other images (flowers and vase image) and these images will then appear 'over' the original clicked image result, showing the border and vase together. I can create the images as transparent gifs so that isn't the hard part. The image below is what I want the final result to look like for the user once the corner border image is clicked and then the vase image is hovered over.
Does anyone know how to create this with dreamweaver? many thanks
PS I am using Dreamweaver cs5.5

Explore "disjointed rollover" or "set text of container" techniques.
You can use a "disjointed rollover" assigning an onclick behavior to the small corner image to trigger the display of the large border-only image and assigning a mouseover behavior to the small vase image to trigger display of the image you posted above.

Swap Images and URLs at the Same Time

I would like to not only to swap images when one rolls over a thum image, but at the same time I would like to have a link swapped in the new image. I am using behaviors to swap multiple images on a page. So to be clear I have several thums that one can roll over. When a thum is rolled over with the mouse a large image is swaped in a different location on the page. I would like to be able to attach a unique link to a URL to each of these new large images when they are swapped.

The link below will take you to a life page. In this example, the changing
text below the large changing image is in fact an image that is swaped out
as one moves the mouse over a thum on the right side of this page. This
changing text image will have an "Add to Cart" button. The button could be
part of the text or perhaps yet another image that changes as one moves
over the thums on the right. Here is where I need the help. As one clicks
on this text image that is changing (or changing button) I would like to
have a link associated with this image that will add the customors choice
of pillows to their cart. Need help with how to associate a unique link to
unique URLs with this changing text image.
Life page: http://katetroyer.com/Pillows.html

Swapping images/text question?

Hi, I am moving this question to this forum from general as I got a response suggesting that dynamic html could be the solution to my problem. Any guidance on how to set up the behaviour would be much appreciated.
The problem I have is that I have created a navigation menu using plain text that changes colour on hover and two images in different divs swap images. It all works fine using a standard behaviour but now the client has asked if I can also make the opposite work ie. when the user rolls over the image, then the text changes colour. Is this possible without creating the text elements as images and swapping them using a standard behaviour?
I am not very familiar with the capabilities of javascript so some guidance would be great.
The present draft site is here, so you can see the problem.
Many thanks
Richard

Hi Richard,
I suggest you to use javascript. I will try to give you a basic examle for this problem with a short explanation. Let's say you have the following html code
Here comes the default text of the elementThe image has the id of firstimage and the div#first will be the object where the text will swapped at onmouseover event.
The code above will catch the rollower event of the #firstimaged object and will make the ChangeTextofDivIdfirst javascript function run. With the used innerHTML property you may specify any html code instead of the 'the swapping text' .
Regards
Zoli

Pic Ratio and Swap Image Behaviour

Similar Messages

Maybe you are looking for