Image swap rollover nav div expands in mobile platform.

DW CS6, MacPro
Sidebar, ID "navMenu", Nav button "ORDER PARTS" and "After Hours" seem to add padding when viewed in mobile environment. The "After Hours" button appears to add more than the other.
The background image is exactly the same size. (Photoshop, layers, one file)
I didn't use "H" tags, so line height not an issue.
Only difference is one all caps, other is mixed case.
View at test site:
http://02ca0d2.netsolhost.com/action_appliance_02/pages/order_parts.html
Thanks in advance,
Joe Satterwhite
SatGraphics

Your html width and height are partially overriding your css.
Try removing the width="175" height="42" from the nav_order.jpg image in the html.
That should allow the css to regain full control.

Similar Messages

Multiple image swap behaviours for complex rollover affects?

’m working on a site where there is ‘menu’
style bar which when you hover over with the cursor, needs to make
a large image swap in the body of the page. This would be simple
enough, but the area that changes is made up of a number of smaller
images that need to work as rollover images individually.
I could do all of this manually with normal swap image
behaviours, so that each of the small images behave as roll-over
buttons individually. And also so that they all change at the same
time when you hover over the menu style bar.
This is obviously quite a slow way of working and I will need
to go through it every time a change is made. Is there a better
way?
Thanks

I've just previewed this site in firefox and it looks fine,
even though it look wrong in dreamweaver!
I then previewed it in IE and it everything has gone all over
the place (i think its ignoring the clear left rule). Is there a
general way this is normally done? I've been watching a number of
different video tutorials so i'm quite sure i'm doing things by the
book.

Is it possible to swap images into an AP div from a list of images, not only one?

I've figured out how to change images in an AP div on a Mouseover using Set Text of Container, but it would be great if the swapped in file would change over time, or was randomized. Is there a way to do this?
Or, is there a way to have images load in the AP div every few seconds? Thanks.

Not possible with DW behaviors alone. What you want is a slideshow.
http://alt-web.com/sandbox/Spry-test.html
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
http://alt-web.com/
http://twitter.com/altweb

Image swap from a ul

Hi,
please see my link http://www.denotestationery.com/denote_localroot1/weddingvintage.html
I am trying to achieve an image swap in the stationerycontainer div that houses the invite image, by rolling over each list item (stationeryinfo ul down the side of the image), as the user rolls over the stationeryinfo ul, the image in the stationerycontainer div will change accordingly.
Is there a way to achieve this by just using the html in the stationeryinfo ul & without the use of images in that list? I basically want it to look like the sidebar nav when you roll over it but I don't need the stationery info list to link to anything.
I hope I am making sense!

Hi, yes, well kind of, I don't need the list to link to anything, it's purely to show the user what each design peice looks like by rolling over the list. I have done this before, but with the use of the list as images rather than html. But I want to be able to allow the html to do it instead & as I am a newbie the only way I have found to do it is by adding a link to the code. and then linking is straight back to the same page. Like below. I hope I am making sense.
Weddingvintage.html is the page the user will be on.
<li><a href="weddingvintage.html" onmouseover="MM_swapImage('vintageday','','denoteWebimages/gallery_chrysanth.gif',1)" onmouseout="MM_swapImgRestore()">Day invitation</a></li>
Is there another attribute rather than the a href that will work with the swap image?
Thanks in advance

Show/hide lots of layer, image swaps and page size

Hi - I am working on a webpage that requires 39 thumbnails to
show 39 large
images when clicked and to also show some text on mouseover -
take a look.
http://www.redsea.co.nz/lipitor/slidekit.shtml
I have been asked to use scrolling divs to house the
thumbnails and so i
have.
I'm working through the image behaviours (up to slide no. 10
you'll see) and
I'm wondering if there is a better way to do all this. 39
rollover show/hide
layers and image swaps seems very laborious to me, not to
mention the page
is getting far too heavy........
Anyone got any better ideas? (apart from a dynamic page) -
all thoughts much
appreciated.
Also, any other issues spotted around this site please let me
know, I'm
supposed to have this finished by monday am..
Thanks in advance
Karen

Yes, I have a better idea. Use the ShowPic extension from
PVII -
http://www.projectseven.com/,
or even do it yourself with the SetTextOfLayer
behavior in DW -
http://dreamweaverresources.com/tutorials/settextoflayer.htm
Either of those would be much better ways, since the page is
not encumbered
with the weight of all of the enlarged images UNTIL you click
on the
corresponding thumbnail.
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
==================
"Karen J" <karen@don'tmailmeredsea.co.nz> wrote in
message
news:eaeto3$758$[email protected]..
> Hi - I am working on a webpage that requires 39
thumbnails to show 39
> large images when clicked and to also show some text on
mouseover - take a
> look.
>
>
http://www.redsea.co.nz/lipitor/slidekit.shtml
>
> I have been asked to use scrolling divs to house the
thumbnails and so i
> have.
>
> I'm working through the image behaviours (up to slide
no. 10 you'll see)
> and I'm wondering if there is a better way to do all
this. 39 rollover
> show/hide layers and image swaps seems very laborious to
me, not to
> mention the page is getting far too heavy........
>
> Anyone got any better ideas? (apart from a dynamic page)
- all thoughts
> much appreciated.
>
> Also, any other issues spotted around this site please
let me know, I'm
> supposed to have this finished by monday am..
>
> Thanks in advance
>
> Karen
>
>

Image swap and IE7 in DW CS4

I have thumbnails 80px square and a div set at 600px square I select and name a loctor image and put in the div.
When I set up image swap all works fine in Safari, IE8 but in IE7 after the image has swapped, if I move the mouse over or near the large image the image disappears and I get a black 600px size square with a red X in it in the top LH corner, this stays untill I click the next thumbnail. Any help would be appriciated.William

Delete line 372 from...wait...move over a little bit so I can see better...uh oh. My crystal ball just went on the fritz again and I can't see your code from here.
Can you provide a link to the problem page?
Mark A. Boyd
Keep-On-Learnin' :-)

Help building image swap in flash cs4?

Hello all,
I've been trying to research 'flash cs4 image swap' but most everything I find is related to dreamweaver, so I appreciate anyone's help to point me in the right direction.
I have a project in which I have an opening scene of a main image and 8 thumbnail buttons. This opening scene is pretty basic, as the thumbnails would link to a new scene or frame label (however I build it). This 2nd scene or instance in the timeline is where I would display another large image, and 6 new thumnail images that, upon rollover, would swap the large main image with the large version of the active thumbnail.
Basically I have a main 'menu' of category thumbnails that link to an instance in the timeline that displays the initial large image for that category, and allows the user to mouseover the other thumbnails to see the large images, and then click to go to a specific URL for more information.
The trouble I have with my rusty, limited AS knowledge is how to effeciently write the AS so that the image swap works. I quickly ran into a wall trying to acomplish this using a very OLD method that would require a LOT of jumping around the timeline. If there is ANYTHING out there that can help me figure out how to do this efficiently, I would very much appreciate the help.
Thanks in advance

that's really what I'm asking, is if there is any such AS to do this.... I would normally do it just using CSS & HTML, but I have to keep it all contained within one page, I can't click to a new page from the opening scene to show the sub category of graphics. I figured I could set the opening scene up easily with a goto frame label 'category 1'.... then at category one is where I need to figure out what to do to swap the images....
If I keep it very simple with no fade effects or anything, yes I could just jump to a frame and back, and so on.... Instead of animating all the different elements, is there a way to activate an instance of a mc, like a white to transparent fade, and just have that animate in place and out, chaning the images in a layer below it while it's in place? I'm really green to AS so I may be talking outta my ear on this,
your feedback is greatly appreciated.

Why is image over flowing content div into footer div?

My content div is set at 975px wide padding 20px. I insert a image that is 700x525. Content div expands to fit image. As soon as I set the alignment on the image to left Content div shrinks, image overflowing into footer and text in footer is wrapped around image. If I set a height for the Content div larger than height of image all is well. My problem is images on different pages will all be different sizes.
Code:
<div id="content">
<h1><img src="Oral/OralCavity_Labeled.jpg" alt="Oral Cavity" width="700" height="525" align="left" />Content for id "content" Goes Here</h1>
</div>
<div id="footer">
<h5>Property of College of the Canyons Biology Department. All rights reserved. <a href="mailto:[email protected]">Contact Us</a>.</h5>
</div>
<h5> </h5>
</div>
</body>
Please help, can't proceed with website until this problem is solved.

Try this:
#content {
width: 975px;
background: #FFF;
padding: 20px;
overflow:hidden;
The magic of overflow hidden:
http://colinaarts.com/articles/the-magic-of-overflow-hidden/
PS. I'm glad I'm not squeamish.
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
http://alt-web.com/
http://twitter.com/altweb

IE6 child div expands width of parent div

I have a problem that has been vexing me...hopefully someone can answer it.
I want to have a child div expand to overlap the div next to it. It is for a calendar so that all day events that stretch for multiple days can stretch over and cover multiple days.
In IE6, the child div expands the width of the parent div and wrecks my display. The "proper" way that FF, Safari, and IE 7 & 8 do is that the child div will overlay the parent. The parent div's width remains unchanged, no matter what the width of the child is. IE6 incorrectly expands the width of the parent div to match that of the child div.
I've set up a small example so you can see the difference. Check it out in FF and then in IE 6. Notice that in IE6 the "parent" div is too wide. In FF it looks fine.
Any way to get IE6 to behave like FF in this case?
Thanks!
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Div Test</title>
<style type="text/css">

</style>
</head>
<body>
    <div class="parent">
    Parent Content
    </div>
    <div class="parent">
    Parent Content
    </div>
    <br>
    <br>
    <div class="parent">
      <div class="child">Child Content</div>
    </div>
    <div class="parent">
    Parent Content
    </div>
</body>
</html>

I see now you posted your code. Thanks.
For best cross browser results, the floated container needs to be wide enough to accomodate everything inside it. Some browsers will resize others won't.   For another approach see my code. This uses a disjointed rollover method.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Div Test</title>
<style type="text/css">
.parent {
     padding: 8px;
     width: 200px;
     background-color: #FFC;
     border: 1px solid #000;
     float: left;
/**formerly know as .child**/
.parent a span {
     width: 300px;
     padding: 10px;
     background-color: #CAEDFF;
     border: 1px solid #000;
     position:absolute;
     top:55px; /**adjust as required**/
     left:55px; /**adjust as required**/
     display:block;
     visibility:hidden;
.parent a:hover span,
.parent a:active span,
.parent a:focus span {visibility:visible}
.parent a:hover,
.parent a:active,
.parent a:focus {text-decoration:none; visibility:visible;}
</style>
</head>
<body>
<div class="parent">
<p>Parent content</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sit amet iaculis purus. </p>
<a href="http://alt-web.com/DEMOS/CSS-Disjointed-Text-Rollover.shtml">Link to Child Layer<span>Child Content renamed to <strong>.parent span</strong>. Content inside the span tag is absolutely positioned. <br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sit amet iaculis purus.</span></a>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sit amet iaculis purus. </p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sit amet iaculis purus. </p>
</div> 
</body>
</html>
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
http://alt-web.com/
http://twitter.com/altweb
http://alt-web.blogspot.com

Change a link with Image Swap?

Okay so far I have my website designed. Here is what I have so far...
... I have successfully managed to have all the thumbnails keep their rollover behaviors while also making the main image change whenever any of the thumbnails are clicked. So that takes care of the main image problem. Now I need to find a way to get the "click image for larger" action to work. The problem I have is that in Dreamweaver CS3 the main image stays put. It is sort of the anchor that holds the Image Swap behavior in place. So in a web browser if anyone were to actually click on that main image it would not open a new browser window that is specific to the new main image they see. No matter what the main image switched to, if anyone clicked on it, the new browser would always open a window for the big PEARL STREET GYM flier.
I am wondering if there is a way to get the main image link to swap along with the image so that the new browser window will also follow along with the coinciding main image that is shown. Is there a way to do this (without using spry)?
(the reason I don't want to use spry is because I am still learning and so far spry just confuses the hell out of me. I'm sure I'll learn it one day... but just not right now)

if anyone reads this... turns out this can be done with the Set Text behavior.
Basically, you make your "click here for larger image" text and apply the Open Browser Window behavior.
Then with the text highlighted you go to Code View and copy the code that makes this behavior function.
Then you redo these steps for all the thumbnails you have. In my case I have 8 thumbnails so I need to adjust the Open Browser Window 8 times, one time for each of the large pictures i want to pop open, copying the code for each and pasting each code into a blank word document for later.
Then you clear this behavior and click on the container that is holding your "click here for larger" text. Give this container an ID in the attributes panel.
Okay so now you click on the first thumbnail you want to use. Give that thumbnail a Set Text in Container behavior. Direct the drop down menu to the container ID you just applied. Then in the new HTML box copy and paste the code you copied from the Open Browser Window behavior.
Go through each of your thumbnails and repeat these steps, being sure to paste in the correct Open Browser Window code for each thumbnail.
After you get done with adding all of your Set Text behaviors preview your site in a web browser. When you click on any thumbnail the "click for larger" text should look the same but when you click on the text your browser should pop open a new window that matches the corresponding thumbnail. (unless i left out a step here)
it isn't exactly what i was looking for when i asked if there was a way to make the image itself clickable. but the small line of text under the image working as a link accomplishes the same task.

Image swap not working once live

So I have made some webpages in fireworks then imported the code to dreamweaver. Everything works fine when it is local. I then try to put it onto the website, where it comes up, everything works except the image swap behavior. This is the page:
http://community.dur.ac.uk/foundation.science/?q=node/619
HERE is meant to change colour on rollover and words are meant to turn up on rolling over the cliffs. The links haven't been sorted yet in the code, so they are all still dead ends (but do appear to work in principle.
This is one of the pieces of code for the swapping images:
<tr>
   <td rowspan="3"><img name="Harbour_r5_c6" src="http://community.dur.ac.uk/foundation.science/Staithes/Harbour_r5_c6.png" width="151" height="76" id="Harbour_r5_c6" alt="" /></td>
   <td colspan="2"><a href="Harbour pano - zoomed in.htm" onmouseout="MM_swapImgRestore();" onmouseover="MM_swapImage('Harbour_r5_c7','','Harbour_r5_c7_s2.png',1);"><img name="Harbour_r5_c7" src="http://community.dur.ac.uk/foundation.science/Staithes/Harbour_r5_c7.png" width="113" height="44" id="Harbour_r5_c7" alt="" /></a></td>
   <td rowspan="3"><img name="Harbour_r5_c9" src="http://community.dur.ac.uk/foundation.science/Staithes/Harbour_r5_c9.png" width="205" height="76" id="Harbour_r5_c9" alt="" /></td>
   <td><img src="http://community.dur.ac.uk/foundation.science/Staithes/spacer.gif" width="1" height="44" alt="" /></td>
</tr>
Thanks for any help you can give me, I'm really not used to this
Thanks
Hannah

You have a fair number of major structural errors in your html that need to be repaired. Run your page through the validator at http://validator.w3.org and clean those up, especially the extra <body> and <head> tags.
I'm not sure if maybe your page is being constructed by server side includes that have some extra code in them or if something else is going on, but it could be the root of your problems.
If you clear up the coding errors and it still doesn't work, post back and we can take a closer look at the clean code.

Why is my container div expanding past the 1170px max width in preview mode?

Why is my container div div expanding past the 1170px max width in preview mode?
Thanks again,
Marc

#wrapper #leftside img {
float: left;
width: 399px;
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
==================
"Ruby7829" <[email protected]> wrote in
message
news:gdkr52$m6b$[email protected]..
> I'm trying to get the image on my homepage (which is 320
x 214) to sit
> inside
> my "leftside" div (which is 380 width). Why is it
expanding to 380 px if
> I put
> it in it's own div which is 320 px? What am I doing
wrong? Should I not
> have
> nested divs?
>
> Originally I sliced the leftside out of Fireworks but
I'm really trying to
> learn CSS and I want to do this the "right" way.
>
>
http://www.faceyourspaceorganizing.com/test_index.html
>
>

Image Swap and Image Map

Hello,
I am going through some very rudimentary steps of setting up
site.
I have an index page with four simple areas I wish to turn
into hotspots- I created them as slices in Fireworks then as Image
Swap rollovers in DW. Now, when I try to apply a hotspot/image map
to the rollover area, I can get it to link to the appropriate page,
but it seems to have disabled the rollover/image swap attribute.
How do I keep both properties enabled? Any suggestions are
appreciated.

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
==================
"Jay S B" <[email protected]> wrote in
message
news:eme8i7$6mf$[email protected]..
> Hello,
>
> I am going through some very rudimentary steps of
setting up site.
>
> I have an index page with four simple areas I wish to
turn into hotspots-
> I
> created them as slices in Fireworks then as Image Swap
rollovers in DW.
> Now,
> when I try to apply a hotspot/image map to the rollover
area, I can get it
> to
> link to the appropriate page, but it seems to have
disabled the
> rollover/image
> swap attribute.
>
> How do I keep both properties enabled? Any suggestions
are appreciated.
>

Variable Image Swap

Project requirement: Variable Image swaps within a single div
tag, using several different "onClick" initiators.
I'm fairly comfortable with using the "Behaviors" in order to
swap images, but not so great on the javascript hardcoding. When I
use the Behaviors, I must specify the image that I want to be
replaced with another.
My question: Is there some tweeking of the code I can do to
swap whatever image happens to be showing in the div, without
specifically naming a "starting" image?
Thank you in advance for your input!-)

For anyone who might find interest of this in the future,
here is the answer to my own question:
• Select Initiator
• Behaviors > Set Text of Layer
• Select appropriate layer
• code: <img src="ENTERpath/filename.jpg"
width="ENTER" height="ENTER">
• determine action to initiate

Image swap

Anyone know how I can make an image swap for another image in
Dreamweaver by clicking on an image button?
Thanks in advance for any help.

Not sure if this is what you mean, but I thought I'd put it
out there, just in case.
For a rollover:
name all of your images that will be involved in the swap,
first of all.
select the image button that you want to trigger the event.
under the Tag panel on the right, under the behaviors tab,
click the Add Behavior (+) button.
Select Swap Image from the menu.
Select the Image name of the image that you want to change
browse for the file that you want the image to change to
select/ deselect the restore imgage option accordingly.
Hope that helps!

Image swap rollover nav div expands in mobile platform.

Similar Messages

Maybe you are looking for