Swap Image Thumbnail Borders In IE

I'm creating a web site and am using swap image on a Photo Gallery page. In Internet Explorer the thumbnails in the swap image function show blue borders. In Mozilla Firefox the borders display as light green and changing to rust when I hover over the thumbnail which is what I want.
Is there a work around to solve this problem in IE?
The web site being created is http://www.aspenmountaincabin.com/photos.html
Thank you.

Add the below css styles to your css stylesheet:
#mainContent a img {
border: 2px solid #cccc99;
#mainContent a:hover img {
border: 2px solid #996633;

Similar Messages

Swap Image Behavior with Text

I am trying to figure something out but can't seem to find
it. I'm sure it must be pretty simple, but I'm stumped. Basically,
I have a main image and a few thumbnail images below it. I've
attached the Swap Image behavior to each thumb to change the main
image to a different photo and then changed the onMouseOver to
onClick.
The problem is I want to also have some photo text or caption
below the main image to change. Does anyone know how to do this
with more or less stock DW behaviors? Or if not, how to do it in
the most efficient way possible?
Thanks in advance.
-Bill

You could always embed the caption information in the image,
you know? That
would be the simplest way. Is that possible?
Alternatively you could create a series of stacked
containers, each hidden,
in the location where you want your captions. Then you would
make your
onclick event do both the image swap and the Show/Hide on the
associated
caption container (*and* a hide on all the rest of the
caption containers).
This can be pretty tedious when there are lots of images, and
you are using
only the DW User interface (as opposed to Code view). It will
also take you
into the realm of positioned elements (probably) which can be
troublesome
themselves.
Finally, if this is all too much for you, there are EXCELLENT
alternatives
over at projectseven ($) for doing something like this right
out of the box.
http://www.projectseven.com/
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
==================
"captcashew" <[email protected]> wrote in
message
news:[email protected]...
>I am trying to figure something out but can't seem to
find it. I'm sure it
>must
> be pretty simple, but I'm stumped. Basically, I have a
main image and a
> few
> thumbnail images below it. I've attached the Swap Image
behavior to each
> thumb
> to change the main image to a different photo and then
changed the
> onMouseOver
> to onClick.
>
> The problem is I want to also have some photo text or
caption below the
> main
> image to change. Does anyone know how to do this with
more or less stock
> DW
> behaviors? Or if not, how to do it in the most efficient
way possible?
>
> Thanks in advance.
>
> -Bill
>
> <p><img src="images/215-suite-2.jpg" alt="Main
Photo" name="mainImage"
> width="300" height="225" id="mainImage" /></p>
> <p> </p>
> <p> </p>
> <p><img src="images/215-suite-2.jpg"
alt="Thumbnail Photo 1"
> name="thumb1"
> width="100" height="75" id="thumb1"
>
onclick="MM_swapImage('mainImage','','images/215-suite-2.jpg',1)"
/>
> <img src="images/renovations_02-after.jpg"
alt="Thumbnail Photo 2"
> name="thumb2" width="100" height="75" id="thumb2"
>
onclick="MM_swapImage('mainImage','','images/renovations_02-after.jpg',1)"
> />
> <img src="images/renovations_03-after.jpg"
alt="Thumbnail Photo 3"
> name="thumb3" width="100" height="75" id="thumb3"
>
onclick="MM_swapImage('mainImage','','images/renovations_03-after.jpg',1)"
> /></p>
>

Linking to a swapped image...help

I'm trying to set up a page that has a rightside column of thumbnail images, which, when clickedon opens a larger image in another area. I have done this using swap image. That's all set up, but now I would like to link that larger image to a different page...one with zoomify to show large details. I can't find any way in DW cs4 to do that...the only way the swapped image appears is in Live View and in Vive View the image is unselectable.
Thanks for any help.

<div id="BigPic">
    <p id="box1"><a href="" id="box1link"><img src="http://barbarabaum.com/images/BBis760px.jpg" name="largePix" width="600" height="400" id="largePix" /></a></p>
    </div>
<div id="SmlPix">
<table width="240" border="0" cellpadding="10">
<tr>
    <td width="120" align="center" valign="top"><a href="javascript:;" onclick="MM_swapImage('largePix','','http://barbarabaum.com/images/1.jpg',1);document.getElementById('box1link').href='http://w ww.great-web-sights.com';" ondblclick="MM_swapImgRestore()"><img src="http://barbarabaum.com/images/small/1.jpg" name="cvr" width="100" height="39" border="0" class="pixBox" id="cvr" /></a></td>
    <td width="120" align="center" valign="top"><a href="javascript:;" onclick="MM_swapImage('largePix','','images/2.jpg',1)" ondblclick="MM_swapImgRestore()"><img src="images/small/2 copy.jpg" width="100" height="100" border="0" class="pixBox" /></a></td>
</tr>
I must have done something wrong It's not going to your site. Do you see the problem? Thanks once again.

Swapping images - need to change size

I am trying to create a disjointed rollover so that when I
click on a picture thumbnail in one frame, the full-size image
changes on another frame (it is for a photo website - there are
about 20 thunbnails on a page and a space for only one full-size
image).
It works perfectly fine with "Swap Images" behavior as long
as all full-size images are of the same size - you just set one of
the full-size images as an original as then swap images as you
click on different thumbnails. The problem I am struggling with is
that my full-size images are of different size - "Swap Images"
functions distorts them since it resizes all full-time images to
the same size. What is a solution?

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 (SetText of Element in CS3) behavior
to change the
image reference in a layer (or non-positioned container)
placed 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
==================
"ADoubov" <[email protected]> wrote in
message
news:[email protected]...
>I am trying to create a disjointed rollover so that when
I click on a
>picture
> thumbnail in one frame, the full-size image changes on
another frame (it
> is for
> a photo website - there are about 20 thunbnails on a
page and a space for
> only
> one full-size image).
>
> It works perfectly fine with "Swap Images" behavior as
long as all
> full-size
> images are of the same size - you just set one of the
full-size images as
> an
> original as then swap images as you click on different
thumbnails. The
> problem
> I am struggling with is that my full-size images are of
different size -
> "Swap
> Images" functions distorts them since it resizes all
full-time images to
> the
> same size. What is a solution?
>

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
>

Help wih swap image. I think?

I'm trying to get images to appear in a part of the page
when I roll over the thumbnail of the image.
Here's the page:
http://www.jonathanjamesphoto.com/wedds2.htm
I did a swap image behavior. It worked!
It shows the swapped image from an image file in a slice I
made.
BUT, when I upload the site I can't get the images to swap.
Is it something to do with where the image file is stored?
Can someone help?
Thanks,
Jonathan
[email protected]

jjamespix wrote:
> I'm trying to get images to appear in a part of the page
> when I roll over the thumbnail of the image.
>
> Here's the page:
> <a target=_blank class=ftalternatingbarlinklarge
> href="
http://www.jonathanjamesphoto.com/wedds2.htm
>
> I">
http://www.jonathanjamesphoto.com/wedds2.htm
>
> I</a> did a swap image behavior. It worked!
There's no swap image behavior on that page. Rather, it's an
image map.
It appears to be changing the image on click, but it is
actually opening
a new HTML page.
Linda Rathgeber [PVII] **Adobe Community Expert-Fireworks**
http://www.projectseven.com
Fireworks Newsgroup:
news://forums.projectseven.com/fireworks/
CSS Newsgroup: news://forums.projectseven.com/css/
Design Aid Kits:
http://www.webdevbiz.com/pwf/index.cfm

Swap image actionscript

Hi there.
I'm a beginner in flash actionscript. I want to basically swap images using actionscript. So if you click on a thumbnail, the main big image will change corresponding to the thumbnail being clicked. I don't want to use a simple on click go to and play actionscript...
I'll try to paint a picture of what I'm trying to achieve.
There is a background image, middle ground and foreground image... people will have a selection of thumbnails to chose from to change these images (so they are creating their own big picture)
Once the user clicks on a thumbnail for the background, the main image will change corresponding to the thumbnail.. and the same for middleground image and foreground image.
I can acheive this in director using lingo but I am required to use flash and actionscript. Hope you can help!
Thanks in advance!

Hi, I have tried messing around with this inorder to make it work. I have implemented the code you kindly suggested however it still isn't working. Sorry to be a pain and thank you for your patience. I think I am on the right track as when I hover over the thumbnails the cursor changes to a hand, however the main image is not changing. I can not figure out what I am missing or doing incorrectly..
Have you any idea?
Thanks again!

Swap Image + Multiple Frames

New to FW ... figured out how to take a PS document and slice
it up and create simple rollovers (sliced image > created a
second frame for the rollover items/layers) ... now I need to
create a basic image swap (roll over thumbnail and larger pic
appears in center). I put each large picture / image in a new frame
- everything works fine - BUT - when I export, I'm getting slices
for every frame. Can I easily remove the web layer from the large
pic frames? I tried turning off the visibility but that didn't seem
to do the trick. Please advise! Would love a simple solution so I
don't have to take the time to delete all of the duplicate slices
in DW after the fact. THANKS.

Something like this?
http://www.dynamicdrive.com/dynamicindex14/fadeinslideshow.htm
Cheers
Nick
"Fun Leprechaun" <[email protected]> wrote
in message
news:fru4dm$mc3$[email protected]..
> Hey there,
>
> How can I use the Swap Image Behavior for multiple
images on Load - I
want the
> images to loop WITHOUT the user having to have their
mouse over the image
to
> enable it to change. I've also seen the images come in
from the left and
then
> the right etc. (hopefully you get what I mean!)
>
> Any suggestions?
>
> Thanks a mill folks!
>

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

Swap Image Setup?

I have always done my swap image setup in tables. I have recently upgraded to Dreamweaver CS4 and would like to know if there is a more efficient way to do this using CSS? (Layout sketch attached)

I have the three column layout figured out, but now how do I create five
equal sections on the right column and five equal sections on the left
column.
You don't. The left and right section would be width constrained. Just placing 5 thumbnail images into each will cause them to align vertically down the column, e.g.,
<div id="leftside"><img><img><img><img><img></div>
(pseudo-code at best - each image would need to be wrapped in an anchor tag, and the behavior would be applied to that anchor.)
And within the middle section how do I add a left section,
right section and bottom section?
Left/right? I don't see those on your diagram. But again, you don't really need to -
<div id="middleSection">
<div id="enlargedImage"><img></div>
<p id="imageCaption">blah blah</p>
</div>
The SetText behavior would be used to specify the HTML for the image tag in the 'enlargedImage" div, and the text content in the "imageCaption" paragraph. OR, you could scrap those inner elements and just have the middleSection container, with the behavior specifying the HTML for both inner containers, which would be styled by virtue of the ID values and the existing CSS.

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
>

Rollover Thumb & Swap Image

Hello Fellow Knowledge Seekers,
I want to do a standard swap image rollover, but I want the
thumbnail to change too.
http://www.shutterstutter.com/Ancestor.htm
If you look at the link you'll see the rollovers, but the
thumb is not altered...
How do I change the thumb at the same time???
I am perplexed because I was able to do this last year but
have since forgotten...
I have been playing with behaviors with no luck...
Thanks Alan...

<a href="javascript:;"
onMouseOver="MM_swapImage('thumbtest','','index%20files/THUMBNAIL-OVER.gif','BOX
-------------------------------------------------------------------------^^^
(space character)
','','index%20files/PLACE%20HOLDER%20with%20Image%20copy.gif',1)"
------------^^^--------------------^^^---------------^^^^-------^^^-----------^^^
(space characters)
onMouseOut="MM_swapImgRestore()"><img
src="index%20files/THUMBNAIL-1.gif"
--------------------------------------------------------------------------------^^^
(space character)
name="thumbtest" width="40" height="39" border="0"
id="thumb"></a></div></td>
Try file/pathnames like this -
'index-files/thumbnail-over.gif'
'index-files/placeholder-with-image-copy.gif'
'index-files/thumbnail-1.gif
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
==================
"churchill25" <[email protected]> wrote in
message
news:f0nglk$dqt$[email protected]..
>
quote:
You should eliminate spaces from your file/pathnames. They
will bite
> you
> when you least expect it. Use only letters, numbers,
hyphens, and
> underscores.
>
> Hey Murray, thanks for all the help...
>
> Would you mind explaining a bit more about the above
quote?
> I'm still a beginner so "eliminate spaces from your
file/pathnames" is
> above
> my head.
> Unless you mean, photos should only have one word titles
rather than
> two...?
>
> As far at the roll over, this is just right.
> Restoring both images on mouse out is prefect for my
needs,
> This highlights the small thumbnail that the person is
viewing...
>
>
>

"While executing applyBehavior in Swap image.htm, a JavaScript error occurred."

What should be a simple web update is turning into a nightmare. I can't select any of my images to apply onMouseOver Swap Image behaviors, and I keep getting the message above.
Can I just say right now that I hate Dreamweaver CS6 and what it's doing to this project?
Ugh!

Is this a plea for help or a rant?
Javascript Errors in CS4, CS5, CS6 (the whole enchilada of trouble shooting)
http://helpx.adobe.com/dreamweaver/kb/troubleshoot-javascript-errors-dreamweaver-cs4.html
Start with #4, #10 and #12
Nancy O.

Viewing DNG's in Windows 8.1 file explorer as image thumbnails ... how to do this?

Does anyone know why you can't view .dng RAW files as image thumbnails in Windows 8.1 file explorer even with the Microsoft Camera Codec Pack installed.
Other RAW files show up as thumbnails no problem (e.g. Nikon .NEF files). I could view dng's as thumbnails in Windows 7 but not with Windows 8.1. Perhaps Adobe hasn't shared the appropriate info. for Microsoft to make it happen?
Cheers if you know how to see the dng thumbnails and can help me do the same.
Michael

I know the DNG Codec for Windows 7 allowed one to view DNG thumbs in Win 7. Wouldn't it work for Windows 8.1 too?

Swap images while rolling over popup menu

Hello,
I've been playing with fireworks CS5 for some days now and made a first attempt on a website.
So far, i've made a navigation bar with two states in order to be able to add a simple roll over behavior, e.g. darkening text on rollover. I also have been able to make a dropdown menu (popup) via slices.
Then I decided to swap images when on nav bar headings. So far, so good.
When I did a preview in my browser, it appeared that as soon as I was leaving the nav bar, the image swapped back to the old setting. Perfect.
But when I did a mouse over on one of the dropdown menu's of the navigation bar, the image swapped back as well.. I've been trying, but didnt manage to find out how to fix this.
So, is there anyone here that knows if it is possible, and if so, how to keep images swapped to a second stage as long as the mouse is on the dropdown menu, but swaps back to the original state when leaving the dropdown and/or the navigation bar.
Thanks in advance,

Hi Bryan,
It may be possible to cheat and put this onto the button:
the option that you want is called TITLE.
if you set one of the other parameters (e.g. the label)
to be:
LABEL_TEXT" TITLE="TITLE_TEXT
basically when it adds the text onto the form it will wrap it in "
If it doesn't strip out the " from your text you should get your extra parameter.
it may slip past the portal checking.
I can't test it as I only have WebDB, but I have done something similar with javascript in WebDB.
good luck
Michael

Swap Image Thumbnail Borders In IE

Similar Messages

Maybe you are looking for