Rollover image question

Is it possible to make the swap image dominant over the images on the page? Right now when the swap (larger) image appears, any other images on the page overlap it.
http://02cada7.netsolhost.com/Stasik_Family_Website/janzofiastasik.html
Or is colorbox/lightbox a better alternative?

Is it possible to make the swap image dominant over the images on the page?
No. Simply put more distance between the primary images and it should work better.
#jan {
width:110px;
height:130px;
margin-top:15px;
margin-left:275px;
margin-right: 100px;
background-color:#000;
float:left;
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
http://alt-web.com/
http://twitter.com/altweb

Similar Messages

Rollover images question + site deffinition tool

Hi, I took a course in Dreamweave but unfortunately lost my notes. I am making a gallery site for myself and would like to have roll over images where one rolls over a thumbnail at the bottom of the page and a larger image in the middle changes to the thumbnailed one. Prefferably without the larger image reverting back to whatever image 0 was. If wome one could please explain the simpleset way to do this, or direct me to a really simple explination, I would be very greatful.
Also I have a question about the site deffinition tool. Is there a way to use it that does not involve creating an extra folder? I already have defined folders for a site and I would like that to be just it.
Thank you for your help.

Pure CSS Disjointed Image Rollovers.
http://alt-web.com/DEMOS/CSS-Disjointed-Image-Rollover.shtml
When you define your Local Site, DW asks you which folder to use. If you've already created one on your local drive, use that one.
Nancy O.
Alt-Web Design & Publishing
Web : Print : Graphics : Media
http://alt-web.com/
Twitter: http://twitter.com/altweb
Blog: http://alt-web.blogspot.com/

Rollover Image Question.....Help!

http://www.amandacarpenterphotography.com/gallery.php
Im building this web page more or less as a favor for my
sister-in-law, and Im building it to further educate myself about
Web Design.
Simple question, the link above takes you to the "Gallery"
section.
What I want to do is when the you roll the mouse over the
text on the left, (Gallery, Senior Photos, Engagements, etc) I want
the picture on the right to change to whatever the mouse is
hovering over. So like Engagements shows an engagement photo, while
weddings shows a sample wedding photo, directly to the right of the
text. I also want the image to pre-load.
How can I do this? It sounds so simple but I can not figure
out how to do it
Thanks in advance
Joe

http://www.dwfaq.com/tutorials/basics/disjointed.asp
"JSloanSDRE" <[email protected]> wrote in
message
news:f5g0dh$ngv$[email protected]..
>
http://www.amandacarpenterphotography.com/gallery.php
>
> Im building this web page more or less as a favor for my
sister-in-law,
> and Im
> building it to further educate myself about Web Design.
>
> Simple question, the link above takes you to the
"Gallery" section.
>
> What I want to do is when the you roll the mouse over
the text on the
> left,
> (Gallery, Senior Photos, Engagements, etc) I want the
picture on the right
> to
> change to whatever the mouse is hovering over. So like
Engagements shows
> an
> engagement photo, while weddings shows a sample wedding
photo, directly to
> the
> right of the text. I also want the image to pre-load.
>
> How can I do this? It sounds so simple but I can not
figure out how to do
> it
>
> Thanks in advance
>
> Joe
>

Can't get rollover images to work as links [was: I have a question if someone could answer?]

I have fixed my page so I can preview it and everything is working fine but now I cant get my rollover images to work as links. When I go to put in the link like normal the rollover behavior stops working and it is just the original image. Any way for me to turn it into a link but still keep the rollover image change?
[Subject line edited by moderator. Please use more meaningful subject lines in future.]

Can you provide a link to your website so we can see what you're seeing?
Without one, you're asking for an answer based on guesswork.

Question on Rollover Image - dropdown

Hi everyone. I have a big school project and i need your help! I just wanna ask how do you make rollover images to stay on hover or selected when you are on it's link like for example i clicked the "home button" then the home button stays "OnMouseOver" or Image2 just because you are on the Home page but then reverts back to original image when you click another link. Also for the pop-up menu, I made a button with a pop-up menu and i want when navigating to the pop-up menu the button will stay OnMouseOver. Is that possible? any help would be appreciated.
The image below shows the hover disappears when i navigate the pop-up menu.
[URL=http://img189.imageshack.us/i/rollover.jpg/][IMG]http://img189.imageshack.us/img189/8130/r ollover.th.jpg[/IMG][/URL]

So do you want the parent link on the dropdown to stay hovered or the child link? You could definitely pull off the parent but i dont think it would work on the fly out
Itll help if you can post your code or a link to your site

Bringing rollover images to the front

Just wondering if it's possible to select the rollover image as 'bring to the front' on a question slide. At the moment the question and answer buttons show ontop of the rollover image preventing people from being able to see the image clearly. Any help would be much appreciated.Thanks!

I'm afraid the buttons and other default elements of a question slide are always on top. The best you can do is make them smaller or move them off to the side so that they are not ove the top of the image.

Bounding box around rollover images

Can anyone tell me how to remove a visible bounding box on
rollover images. The bounding box does not appear until you click
on the rollover image. This does not show up in Safari but does
show in IE and Firefox. Any help is appreciated.

> I have
> one other question, do you know why some browsers are
set for seeing this
> bounding box and others (like Safari) are not?
No, I have no idea. But I realize, I may have given you a bum
steer. What
I was describing was the a:focus functionality which happens
BEFORE you
click. What you are asking about is something that you see
AFTER clicking,
right? In that case, try the CSS rule -
a img { outline:none; }
and see if that works.
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
==================
"webimom" <[email protected]> wrote in
message
news:gav2ut$qie$[email protected]..
> Murray, Thanks for the code and for the information, I
had no idea it
> could be
> useful. It just looked odd on my rollover buttons. I am
a newbie at all
> this,
> barely knowing HTML (planning on taking a class) but
loving Dreamweaver. I
> have
> one other question, do you know why some browsers are
set for seeing this
> bounding box and others (like Safari) are not?
>
> I really appreciate your help and going to take your
advice and leave it
> alone.
>

Rollover Images and Captions

Can anyone give me a short, step by step way to
create rollover images with captions. I couldn't manage to get that
done, and when I read the Help screens within the application, it
didn't help either.
In particular, here was the problem: I was in Storyboard with
the slide highlighted that I wanted to add the rollover image and
caption. When I went up to the Insert drop-down menu and clicked on
Rollover Images, there were no images; I was simply taken to My
Documents.
I hope somebody can help. I've spent more than 4 hours trying
make this work. I'm SURE it's some little detail that I've failed
to pay attention to.
THANK YOU!
Dean

Hi Dean,
The "little detail that (you) failed to pay attention to" is
just that. In order to insert an image, you have to select the
image to insert. Use Windows Explorer (from \\My Documents\) to
navigate to \\My Documents\My Pictures\ or whereever else you keep
the image you wish to insert, and select it. Understand, it is up
to you to provide the image . . . it's not like you are selecting
from Captivate's own image gallery (though that is a cool idea, now
that I think of it - LOL!)
Your question indicates to me there might be some confusion
about what you want. You said you want "rollover images with
captions". There are rollover images which are just images to which
a mouseover action has been applied, and there are rollover
captions which are just normal captions to which a mouseover action
has been applied ... but there are no rollover images
with captions. The only way to have a rollover display a
caption is to create it yourself. And the "step-by-step" for doing
that is totally dependent on which image editor you are using
(Photoshop, Paintshop Pro, Paint, etc.). But the gist of it is
below.
1) Open the image in your image editor - or create it there
2) Expand the canvas to create extra "blank" space on the
image (for the caption)
3) Use the "Text" tool to create your caption text and add it
to that blank space.
4) Save the image - BMP format works very well, but any
format supported by Captivate.
5) Close the image editor
6) Open or switch to Captivate and the slide on which you
want to place it.
7) Select "Insert > Rollover Image"
8) Select the image (with its included caption)
9) Set its attributes and position it on the slide.
Hope this helps. The reason you wont' find this in the "Help"
files is because it is a creative use of images that is not a
supported function of Captivate itself. If you would like to see
future versions of Captivate support the creation of
images-with-captions, the way to do it is to submit it as a feature
request. The form to do that
is
located at this link
Hope this helps.

Editing rollover images

Hi all,
Two questions:
Once I place a rollover image in a webpage, how can I go back and modify the rollover image? Once I click the "OK" button in the Insert Rollover Image dialog box, it seems I can't pull this up again.
Also...is there a way to "copy" a rollover image from one webpage document to another and retain the functionality? I tried dragging and dropping the image, but it doesn't act like a rollover--it just shows the original image and retains the link.
Thanks in advance.

Once I place a rollover image in a webpage, how can I go back and modify the rollover image?
DW can't modify a rollover image. You need to modify images in your graphics app. That's one of the big drawbacks to using images for menus or anything else that is likely to change during the life of your site.
For these and other reasons, I use CSS styled lists for navigation.
CSS Horizontal Drop Menu
http://alt-web.com/DEMOS/CSS2-Horiz-Drop-Menu.shtml
is there a way to "copy" a rollover image from one webpage document to another and retain the functionality?
Rollovers rely on JavaScript code in the <head> and <body> tags of your document. You would need to copy & paste all required code in Code View.
Or just use File > SaveAs > New-file-name.html.
See also -
Guidance on when to use DW Templates, Library Items and SSIs -
http://www.adobe.com/devnet/dreamweaver/articles/ssi_lbi_template.html
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
www.alt-web.com/
www.twitter.com/altweb
www.alt-web.blogspot.com

Rollover image not displaying second image, please help me

Hello,
I am trying to get 4 buttons on my page to display one image and then when a mouse rollsover to display a second image. I have created 8 images. 2 for each of the 4 buttons.
http://caliberproductsinc.com/Caliber%20Marine/boatrollers.htm
Here is my page. The 4 buttons I am concerend with are the "questions, manuels brochure, news" at the bottom. The image displayed is the first image the second "rollover" image is the same except our logo turns red.
I placed them by using insert, image objects, rollover image. I pointed the first to the image that you are seeing and the "rollover image" to the red version. The first image shows up fine. The second never shows up? Can anyone tell me why? What am I doing wrong?
Thanks

"...dry roted...." - I assume you mean "dry rotted"?
Anyhow, on line 35 of your code, change this -
function MM_swapImgRestore() { //v3.0
to this -
function MM_swapImgRestore() { //v3.0
That slash doesn't belong there.

Trouble with rollover image in div

Hello there,
I am having some trouble with the following.
I want to create a rollover image 90 pxl x 90 pxl and put it inside a div 90 pxl x 90 pxl.
The div is inside other divs and makes up a kind of a table. I checked that all the div and image sizes are the same but when I place the cursor inside the div and select 'insert rollover image', my images are all squashed up and don't appear normal size. Very odd.
Here is some of my code:
CSS of div (I want to put my image inside smallBox01a)
#Header #rightColumn #smallBox01 {
    height: 90px;
    width: 270px;
#Header #rightColumn #smallBox01 #smallBox01a {
    float: left;
    height: 90px;
    width: 90px;
HTML
      <div id="smallBox01a"><a href="tobi.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('tobi','','Images/TobiOver.jpg',1)"><img src="Images/TobiOff.jpg" alt="Tobi" name="tobi" width="90" height="90" border="0" id="tobi" /></a></div>
Poor old Tobi cat's face is all squashed up. Any idea what is going wrong? I don't have any padding within the div either.
Thanks!
PS I also should add that when I tried to simply add in one of the Tobi images instead of the rollover image, it appeared perfectly fine within the div. It is only the rollover that is getting vertically squashed up.

So, I've been playing around with your page in dreamweaver and I put a <div> container around your entire web page and then set the width to 1200px. That contained all the contents so that when you re-size the web page the contents don't colapse.
Not sure if that's what Murray or Nancy mean and am curious if their is a better way.
That would work although 1200px is too wide. Something along the lines of 1000px would be better, since you want the page to display in a maximized browser viewport on a 1024 screen without dropping horizontal scrollbars. I still use 960px as a maximum width....
Re the centering of the page: Good question I would like to know how to do it "properly"
In the CSS body rule I put: margin-left: 20%;
                                            margin-right: 20%;
Again, I'm not sure if that's the correct way to center the page, and would like to know a better way.
It's not the best way to do this, which would be to use a fixed width container (as you have done) and just assign it left/right margin settings of 'auto', e.g.,
#container { width:960px; margin:0 auto; }
You can center *any* block element within its container with this method.

How do I show multiple rollover images on a page inserted dynamically (pulled out of a sql database

How do I show multiple rollover images on a page inserted dynamically (pulled out of a sql database table) using Dreamweaver’s Repeat Region. Example: I have different products each one associated (through their productID) with two images (one that’s showing in the page and one for the rollover effect) that are pulled from a database using Dreamweaver’s Recordset. So I want to end up with a page containing row after row of images(one for every product).When moused over each image will reveal the second (rollover) image for the same product which in turn can be a link(the image itself ) that when clicked leads to a detailed page with more information about the product the image is associated with. To show row after row with images for the different products in the database table I am using Dreamweaver’s Insert Rollover Image command and then the Repeat Region – I have no problem to complete the steps, to insert the image and the rollover one at once and set the paths so they are pulled dynamically depending on the productID they are associated with .I have also no problem to apply the Repeat Region so not only the first image associated with the first product in the table is shown but all of them-a routine and standard procedure when using the Repeat Region to dynamically generate and display multiple rows of data. However, when I preview the page the rollover effect is lost –the images are shown but when moused over the second image does not show. The problem is caused when the Repeat Region is applied-once again I am allowed to apply it but the rollover stops working, a kind of interference. ANY SOLLUTION PLEASE, ANY WORK AROUND.

I gotta tell you, using multiple images for rollover effects is going to be a big challenge in your dynamic scenario.
If this were my product page, I would use thumbnails with a bit of CSS opacity or filters to desaturate and make them full opacity/color on mouse over. Nice effect with much less bandwidth. Easily done globally with CSS code.
Two examples:
http://alt-web.com/GALLERY/GalleryTest.php
http://alt-web.com/TEMPLATES/CSS-Semi-liq-photo-sheet.shtml
Nancy O.

How do you add multiple links to a rollover image?

Hi guys,
I'm pretty much a novice when it come to DW, but i understand some things and can get by with a simple website(i only use design mode).
Anyways, i understand how to use rollovers if its a basic image over image swap. My issue is, I have a link that says "T-shirts" and what i want is when you roll the mouse over that text, it swaps to another text -"1 or 2". Now on the "1 or 2" image, i want to have 2 seperate links on them. I tried using hotspots but to no avail. Everytime, the "1 or2" text comes out as a single link. Is doing this possible? I'm using CS4 if that helps btw.
Thanks!!

I think you're trying to make something that is more complicated than it needs to be... First, as far as I know there is no easy way to accomplish what you're trying to do with a single image...
The first option would be to split your initial image in half, and create a rollover effect on the left half on rollover with the specified link 1, and add a second rollover effect on the right side image so that it also changes. Do the same with the right half image - create the rollover effect along with the link for that image only, then add a rollover script that affects the left side image (I've attached a very basic sample to demonstrate in the zip folder - note that there are two rollover images - each with a separate web link, and each has a rollover effect that affects both buttons...)
Second option is perhaps using a "Dropdown" menu that (on rollover) shows two more links... there are many ways this can be accomplished - the easiest (in my opinion) is by using the "spry menu bar". Once created, you can adjust the colors, fonts etc., and an image could be replaced on the initial link within the css... (my website is still under construction, but hopefully will show what I mean: http://www.jgigandet.com/) If you google "drop-down menu html, you'll find several other alternatives to spry as well...
Hope that helps...
Jesse

Why are my rollover images not appearing correctly in my browser?

I have created rollover images for some of my site navigation, and when I view it in my browser, they are not in the correct place on the page. When I click on each rollover, it eventually goes to the right place when I return to that page, but I must do this to all rollover navigation buttons in order for them to show up in the correct place. The links work fine. I am relatively new to this, so not sure if I am providing all the correct info here. My site is www.pfeiferdesign.com. I am using DW CS4. Would appreciate any suggestions!! Thanks

Where is it you want the navigation to appear?
Try this CSS -
#mainnav {
clear: both;
display: block;
float:right;
margin-right:50px;
margin-top:25px;
overflow:hidden;
padding:0;
width:350px;
Is that anywhere close?

CP7 Rollover images Show up every OTHER slide

I am using CP7 and I have a number of graphics on slide 1 that I have defined to have a 'rest of project' timing. I have made multiple groups of graphics on slide 1 and I have made them to NOT be 'visible in output' this way, when I need them, I can use advanced actions to hide/show them (by group name) when I need them for subsequent slides. I am using slide 1 for this instead of the master slide because I need to define the stacking of graphics fairly specifically (slide 3 and further have some graphics that need to be in front of some things and behind some other things).
The set up is that I have a smart shape with a graphic and I am using it as a button on slide 1 (NOT visible in output and lasts for rest of project). Overlayed over top of my smart shape/button is a rollover image. The two objects work just like a rollover button you would see on the web. There is an advanced action that opens the group that the button is a part of and a few other graphic groups that I need to make it look good. When you click the button, there is another advanced action that is supposed to hide the group that both of those graphics are in, plus the other graphics that make it look good, and then go to the next slide. There is an advanced action on the next slide OnEnter that shows the what is needed for the beginning of the next slide.
So, here's the problem. When I click my button, everything disappears and goes to the next slide EXCEPT the rollover graphic, which stays on the screen and on top of all other graphics in slide 2. The SAME EXACT advanced action is used on slide 2 to go to slide 3 (with the same exact button because they are all really on slide 1 the whole time and just being made visible or invisible). When I click, I go to slide 3 and the rollover graphic is gone. I click the button again (to go to slide 4) and I go to slide 4 but the rollover graphic is BACK AGAIN!
I know that this is a complicated write-up, and I am going to go start from scratch to see if I can replicate the problem with a stripped down version of the advanced actions in a new file, but I am hoping someone can point me in the right direction about what is going on. I have deleted and re-inserted the rollover image, but it still does the same thing. I have re-coded the advanced action and it still does it. I have copied rollover images that DONT have this weird glitch and it still does it.
Anyone have any ideas?

I found a 'workaround' to this problem, but I would still like to know what is going on underneath to make this happen. Since I have all the rollover graphics on the first slide with timing or 'rest of project' I just made an animated button in Flash and imported it as a .swf to replace the rollover image. I changed the smart shape underneath from having the image of the button to being transparent (still have it being used as a button with all the same advanced actions as before). Now the swf handles the rollover and the transparent smart button underneath handles the OnClick action and everything works great.
Not sure what was going on with the rollover images, but at least I was able to get the result I needed.

Rollover image question

Similar Messages

Maybe you are looking for