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.
Hereâs a similar example (except with thumbnail images):
http://www.visibilityinherit.com/code/the-jamieruth2-example.php
These are the codes that I have so far currently.
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.
This is the trial work on the website I have done so far.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
.popup {
zoom:1.0;
position:relative;
text-decoration:none;
}
.popup span {
position:fixed;
top:170px;
left:500px;
width:350px;
padding:10px;
border:10px solid #000;
border-radius:10px;
left:-999em;
z-index:990;
}
.popup:hover {visibility:visible}
.popup:hover span {left:350px;}
* html .popup span {position:absolute;}
</style>
</head>
<body>
<p><a class="popup" href="#">Ship 1<span><img src="http://insurancecommissionrefund.com/testwebsite/wp-content/uploads/2012/04/AccomodationWorkBoats_2.jpg"></span></a> </p>
<p><a class="popup" href="#">Ship 2<span><img src="http://insurancecommissionrefund.com/testwebsite/wp-content/uploads/2012/04/AccomodationWorkBoats_3.jpg"></span></a> </p>
</body>
</html>
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.
.boatz {
set the width you want here. This will automagically limit the width of the anchors too;
}
/*all anchors in this ul*/
.boatz a {
display: block;
width: 100%; /*this Haslayout trigger taking the place of zoom and therefore passes the validator, if it matters. Width is already naturally 100% by default anyway so we haven't changed anything except trigger Haslayout for IE*/
position:relative;
text-decoration:none;
}
/*all images inside boat ul*/
.boatz img {
position: absolute;
display: block; /*abso-position is already block context; you only need this line if IE is squirrely without it. Otherwise, take this line out*/
width:350px;
padding:10px;
border:10px solid #000;
border-radius:10px;
margin-left:-9999px; /*IE likes margins better than "left" for some reason*/
top:170px;
left: 0; /*but set a left and top for stability*/
}
.boatz a:hover, .boatz a:focus {
give users some visual feedback on the anchor itself too, like underline or colour change or something;
}
.boatz a:hover img, .boatz a:focus img {
margin-left: 500px; /*set the image where you want it on hover/focus of anchor*/
}
</style>
</head>
<body>
<ul class="boatz">
<li><a id="boat1" href="#boat1">Ship 1 <img src="http://insurancecommissionrefund.com/testwebsite/wp-content/uploads/2012/04/AccomodationWorkBoats_2.jpg" [b] alt="I'm on a boat!"[/b]></a></li>
<li><a id="boat2" href="#boat2">Ship 2 <img src="http://insurancecommissionrefund.com/testwebsite/wp-content/uploads/2012/04/AccomodationWorkBoats_3.jpg" [b]alt="LIKE A BOSS"[/b]></a> </li>
</ul>
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.
Hello Stomme poes, thanks for the help so far.
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?
These are my codes so far. This is my test site.
CSS
.gallerycontainer{
position: relative;
/*Add a height attribute and set to largest image's height to prevent overlaying*/
}
.thumbnail img{
border: 1px solid white;
margin: 0 5px 5px 0;
}
.thumbnail:hover{
background-color: transparent;
}
.thumbnail:hover img{
border: 1px solid blue;
}
.thumbnail span{ /*CSS for enlarged image*/
position: absolute;
background-color: lightyellow;
padding: 5px;
left: -1000px;
border: 1px dashed gray;
visibility: hidden;
color: black;
text-decoration: none;
}
.thumbnail span img{ /*CSS for enlarged image*/
border-width: 0;
padding: 2px;
}
.thumbnail:hover span{ /*CSS for enlarged image*/
visibility: visible;
top: 0;
left: 230px; /*position where enlarged image should offset horizontally */
z-index: 50;
}
Body
<div class="gallerycontainer">
<a class="thumbnail" href="#thumb">Ship 1<span><img src="http://insurancecommissionrefund.com/testwebsite/wp-content/uploads/2012/04/AccomodationWorkBoats_2.jpg" /></span></a>
<br />
<a class="thumbnail" href="#thumb">Ship 2<span><img src="http://insurancecommissionrefund.com/testwebsite/wp-content/uploads/2012/04/AccomodationWorkBoats_3.jpg" /></span></a>
</div>
To get this working you will need JS as Stomme has said. So that being said, many of us here in the CSS forum arenât well versed in the JS section of things.
Iâll request a move to the JS forum for you :).
Thanks for the help, much appreciated.
Hi,
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.
Itâs pretty basic JS but thatâs where Iâm at 
Thanks for the example, this is what I am looking for.
Currently I am having some positioning issue. This is what I would like to achieve. â>Link to Image.
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.
These are my current codes.
CSS
.outer {
width:450px;
margin:auto;
position:relative;/* stacking context*/
overflow:auto;
}
.image-holder {
float:right;
margin:88px 10px 10px 0;
width:300px;
height:300px;
background:#fffccc;
border:1px solid #000;
padding:3px;
position:relative;
z-index:1;
display:inline;
padding:10px 10px 20px;
}
ul.links {
list-style:none;
margin:0 20px;
padding:0;
width:50px;
}
.links li {
width:50px;
list-style-type: none;
}
.links li a {
display:block;
width:90px;
padding:5px;
text-decoration:none;
}
.links li a span, .links li a b {
position:absolute;
right:24px;
top:-999em;
width:300px;
height:300px;
z-index:2;
}
.links li a span img {
display:block;
margin:0 0 5px
}
.links li a:hover, .links li.over a {
visibility:visible;
}
.links li a:hover span, .links li.over a span { top:100px; }
.links li a:hover b, .links li.over a b {
top:200px;
left:50px;
height:auto;
}
BODY
<div class="outer">
<p class="image-holder"><img src="http://insurancecommissionrefund.com/testwebsite/wp-content/uploads/2012/04/GeneralPurposeBoats_1.jpg" width="350" height="250" alt="example image" /></p>
<ul id="over" class="links">
<li><a href="">Link 1<span><img src="http://insurancecommissionrefund.com/testwebsite/wp-content/uploads/2012/04/GeneralPurposeBoats_1.jpg" width="350" height="250" alt="example image" /></span></a></li>
<li><a href="">Link 2<span><img src="http://insurancecommissionrefund.com/testwebsite/wp-content/uploads/2012/04/GeneralPurposeBoats_2.jpg" width="350" height="250" alt="example image" /></span></a></li>
<li><a href="">Link 3<span><img src="http://insurancecommissionrefund.com/testwebsite/wp-content/uploads/2012/04/GeneralPurposeBoats_3.jpg" width="350" height="250" alt="example image" /></span></a></li>
</ul>
</div>
Hi,
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.
Regarding the rollover then here is the updated code:
.outer {
[B]width:480px;[/B]
margin:auto;
position:relative;
overflow:auto;
}
.image-holder {
float:right;
[B]margin:0 8px 10px 0;[/B]
width:350px;
height:250px;
background:#fffccc;
border:1px solid #000;
padding:3px;
position:relative;
z-index:1;
display:inline;
padding:10px 10px 10px;
}
ul.links {
list-style:none;
margin:0 20px;
padding:0;
width:40px;
}
.links li {
width:40px;
list-style-type: none;
}
.links li a {
display:block;
width:40px;
padding:5px;
text-decoration:none;
}
.links li a span, .links li a b {
position:absolute;
[B]right:19px;
top:-999em;
width:350px;
height:250px;[/B]
z-index:2;
overflow:hidden
}
.links li a span img {
display:block;
margin:0 0 5px
}
.links li a:hover, .links li.over a { visibility:visible; }
[B].links li a:hover span, .links li.over a span { top:11px; }[/B]
Make sure your html is well formed as you have many missing end tags and broken and invalid structures as mentioned above.
As an example the bottom of the page should look like this:
<script type="text/javascript">
<!--//--><![CDATA[//><!--
startList = function() {
var sfEls = document.getElementById("over").getElementsByTagName("LI");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
//first remove all existing classes of .over
for (var j=0; j<sfEls.length; j++){
sfEls[j].className=sfEls[j].className.replace(new RegExp(" over\\\\b"), "");
}
this.className+=" over";// now add class
}
}
}
// addLoadEvent
function addLoadEvent(func) {
var oldonload = window.onload;
if (typeof window.onload != 'function') {
window.onload = func;
} else {
window.onload = function() {
if (oldonload) {
oldonload();
}
func();
}
}
}
addLoadEvent(startList);
//--><!]]>
</script>
<script type='text/javascript' src='http://insurancecommissionrefund.com/testwebsite/wp-includes/js/jquery/ui/jquery.ui.core.min.js?ver=1.8.16'></script>
<script type='text/javascript' src='http://insurancecommissionrefund.com/testwebsite/wp-includes/js/jquery/ui/jquery.ui.widget.min.js?ver=1.8.16'></script>
<script type='text/javascript' src='http://insurancecommissionrefund.com/testwebsite/wp-includes/js/jquery/ui/jquery.ui.tabs.min.js?ver=1.8.16'></script>
</body>
</html>
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.
Thanks for the great help so far, I am still new and starting out.
How do I set the alignment of the links on the left so that it is aligned together with the caption âPlease select a ship to view.â?
Best Regards,
Chris.
Like this
.outer{width:100%}
ul#over{
margin:0;
padding:0;
list-style:none;
}
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?
Thanks so far for bearing with a newbie like me.
Best Regards,
Chris.
Hi,
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.
Ah yes, this is precisely what I wanted, thanks!
Hi Paul,
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.
You can take a look over here again.
Best Regards,
Chris
Hi,
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.
e.g.
.dropv{position:relative;z-index:99}
Hi, thank! I have learned a lot from you.
Hi There,
I looked at the codes provided in this forum and i tried it out. Works real well. Thanks for sharing such an awsome piece.
I have just one problem. 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.
Your help will be very much appreciated.
My Current Code is:
<meta content=âtext/html; charset=utf-8â http-equiv=âContent-Typeâ /><style type=âtext/cssâ>
.popup {
zoom:1.0;
position:relative;
text-decoration:none;
}
.popup span {
position:fixed;
top:100px;
left:300px;
width:350px;
padding:10px;
border:10px solid #000;
border-radius:10px;
left:-900em;
z-index:900;
}
.popup:hover {visibility:visible}
.popup:hover span {left:-20px;}
Hi krizhlal. Welcome to the forums.
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.