First of all, great forum for me so far, one of the best support for CSS!

I have few links on the left side and a default image on the right. When I mouse over any of the links on the left, a image would be displayed(Fixed position on the right). The image will only be changed when I mouse over another link and not on mouse out. This is the website of the mouse over example that I would like to achieve. Any help rendered is much appreciated.

If you are familiar with HTML and CSS, you can just look 'under the hood' and see all the code that's used for that gallery. Have you been able to make a tart with that? If so, you can show us what you have so far and we can help you with any issues.

If you are familiar with HTML and CSS, you can just look 'under the hood' and see all the code that's used for that gallery. Have you been able to make a tart with that? If so, you can show us what you have so far and we can help you with any issues.

What I would like to have is, upon loading of the website, there will be a default image(which is the first image for the left link). When I mouseover another link, the image will change but will remain the same even when mouse is not hover over link and will only change again when mouseover another link.

The image will only be changed when I mouse over another link and not on mouse out.

This requires Javascript. In CSS, setting something on :hover or :focus or whatever, that state is temporary. You're no longer :hovering over something when the mouse isn't sitting over the link, right?

There is :target, which doesn't work in IE less than 9 I don't believe, which sortof does what you want: the user has to click another link to change the CSS. Seeing's how it's not cross-browser at a low level and requires your URL history to get polluted, I think Javascript is the better route.

One thing to mention: neither the current work-in-progress, nor the original nautical site, is keyboard friendly. Web sites should not require that the user has a mouse simply to work. CSS has :focus for a reason, and Javascript also has onfocus() and onblur() to complement onmouseover() and onmouseout(). Use the keyboard versions with every mouse version, and when you need :hover or onmouseover() on something that cannot normally receive keyboard focus (anything not an anchor or form input), you can add (the illegal in HTML4 but works everywhere and is perfectly fine in HTML5) a tabindex="0" to those elements, so then with Javascript you can now haz onfocus() and onblur() events.

A last thing to keep in mind is, the ship site and your work in progress are okay as far as distance, but don't let your distance grow much between where the user does his/her action and where the image appears. For accessibility and usability reasons, try to keep the event and the result physically close to each other.

.popup span {
position:fixed;

Fixed is in relation to the user's monitor and not the web site. You know, it's as if you stuck a Post-It note on the user's screen: it doesn't move when the user scrolls and stuff. I don't think you meant to use that. Position: absolute generally is what you want with these kinds of things.

It's "safer" (more stable) to make the positioned parent (the anchor) a block of some sort. Opera for example had issues with loosy goosy inlines being positioned parents, and I'm not sure if this has been fixed yet. IE of course has been notorious for similar issues. Also, for IE, we've learned we don't want to change someone's "state" (whether they're a block or not, setting display: or position: etc) on the pseudo-classes like :hover. IE is a whiny brat in that way.

If the images aren't just fun decoration, they get an alt text that either describes the image, or "says" whatever the image says to users (the meaning/reason for the images).The id's/hrefs on the anchors is so that if your page is long and the anchors are not already at the top, the user will not be brought up to the top of the page (what "#" does) when they click. You can remove the id if the anchor will ultimately go somewhere instead. Some people just click on links immediately without waiting to see if something pops up.

You can also put the images in CSS alone, which is when you'd use the span.The span would refer to the anchor's unique ID to each have a separate background image. If you do it this way, then the span is pre-styled as a abso-po'd block with dimensions and the background image, and all that changes on hover/focus is, again, the left or margin-left position. If you do it this way, Javascript would probably best be used to add/remove a class that sets if the span is on-screen or not. So you'd be setting the class on mouseover/onfocus and only removing it when another onmouseover/onfocus event occurs.

I have managed to do up a bit and would need the coding for the following. I want the image on the right to stay even after I have mouse out the link and the image will only change until I mouse over another link on the left. What additional codes would I require to perform this?

Here's an old example that shows a persistent image after you mouseover a link.

The JS adds a class of .over to the list item when rolled over and you use that class to make the image appear rather than using hover (although the demo uses both so that it still mostly works with JS off).

When the item is rolled over the JS first clears all previous instances of the class called .over and then just applies it to the current one only.

I try playing around with ".image-holder" and ".outer" but I failed to achieve what I wanted. Please be slow on me as this is the first time I am getting my hands on css stuff, thank you for the patience and understanding. If this is not the correct section, please kindly help me to move back to the CSS section.

You have a lot of errors on that page that you should fix Pop over the w3c html validator and get it validated before you move on with this. Don't worry we all have to start somewhere but the most important thing is to use the correct code logially and semantically.

You have two or three html and body closing tags plus odd p elements all around the place. There is no need to wrap everything in a table either.

Also don't invent your own elements.

<SideBar>General Purpose Boats</SideBar>

There is no html element called SideBar!

You would need to use a class instead.

<h3 class="SideBar">General Purpose Boats</h3>

As the text is a heading then it should be a heading tag at the correct level (it depends on document structure so the h3 may not be the correct level depending n the rest of the page so keep it logical).

I'm not sure why you have so much code in that page for such a simple site.:)

It works but when I mouse over the link, the picture is not displayed at the correct position.

Is there a better way to align the picture by taking onto reference point on something?

Currently, I am using one of this ccs is to adjust the location of the picture --> .links li a:hover span, .links li.over a span { top:254px; left: 531px; }

If so, if I have different pages on different types of ship, I think the display of the image will change since the position is taking reference to px and if the page length is different, the positioning will be out?

You removed the position:relative that I had placed on .outer in my demo.

Its the position:relative that creates the stacking context for the absolutely placed span and therefore the element will always be placed in relation to .outer (which should only contain your links and image etc).

Put position:relative back on .outer and then change the absolute co-ordinates for the span and the whole block will move as a whole should content be placed above or below as required.

You removed the position:relative that I had placed on .outer in my demo.

Its the position:relative that creates the stacking context for the absolutely placed span and therefore the element will always be placed in relation to .outer (which should only contain your links and image etc).

Put position:relative back on .outer and then change the absolute co-ordinates for the span and the whole block will move as a whole should content be placed above or below as required.

I have an enquiry that is puzzling. As of right now, when I mouse over my "Nautika Fleet" tab, a drop down box will appear. Whenever, I tried to mouse over the drop down menu link that is overlapping the links on the left, the drop down menu will automatically disappear. I hope I am explaining correctly here.

Positioned elements gain a stacking context and assuming all things are equal than positioned elements that follow later in the html will stack on top of elements that went before. This is what is happening to your positioned menu when it meets the positioned .outer (where position:relative was added).

To control the stacking of positioned elements you can use the z-index property (it only applies to positioned elements) and you can therefore raise the z-index of the menu so that it stays on top of other elements.

Positioned elements gain a stacking context and assuming all things are equal than positioned elements that follow later in the html will stack on top of elements that went before. This is what is happening to your positioned menu when it meets the positioned .outer (where position:relative was added).

To control the stacking of positioned elements you can use the z-index property (it only applies to positioned elements) and you can therefore raise the z-index of the menu so that it stays on top of other elements.

My image appears to be far right of the page. Is there any way i could get the image to be centred on the window.

Indeed there is. The image can be positioned in relation to its container instead of the window itself. The container just needs to have position: relative; applied to it. But we'd need to see your page (HTML and CSS) to advise properly.