Mouse Over Text To Display Image On A Fixed Location

**Stormy Para** · Apr 9, 2012 11:52

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.

**ralph.m** · Apr 9, 2012 18:02

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/cod...h2-example.php

**Stormy Para** · Apr 10, 2012 00:26

Originally Posted by ralph.m

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/cod...h2-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.

Code:

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

**Stomme poes** · Apr 10, 2012 02:10

Originally Posted by stormy

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.

Code:

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

Code:

.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"  alt="I'm on a boat!"></a></li>
  <li><a id="boat2" href="#boat2">Ship 2 <img src="http://insurancecommissionrefund.com/testwebsite/wp-content/uploads/2012/04/AccomodationWorkBoats_3.jpg" alt="LIKE A BOSS"></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.

**Stormy Para** · Apr 10, 2012 09:22

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

Code:

.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

Code:

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

**RyanReese** · Apr 10, 2012 10:50

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

.

**Stormy Para** · Apr 10, 2012 21:17

Thanks for the help, much appreciated.

**Paul O'B** · Apr 11, 2012 01:35

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

**Stormy Para** · Apr 11, 2012 04:48

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.

Link to website

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

Code:

.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

Code:

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

**Paul O'B** · Apr 11, 2012 06:57

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:

Code:

.outer {
	width:480px;
	margin:auto;
	position:relative;
	overflow:auto;
}
.image-holder {
	float:right;
	margin:0 8px 10px 0;
	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;
	right:19px;
	top:-999em;
	width:350px;
	height:250px;
	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; }
.links li a:hover span, .links li.over a span { top:11px; }

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:

Code:

<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);
//--><!]]&gt;
</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.

Code:

	<SideBar>General Purpose Boats</SideBar>

There is no html element called SideBar!

You would need to use a class instead.

Code:

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

**Stormy Para** · Apr 11, 2012 08:47

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.

**Paul O'B** · Apr 11, 2012 09:22

Like this

Code:

.outer{width:100%}
ul#over{
margin:0;
padding:0;
list-style:none;
}

**Stormy Para** · Apr 11, 2012 09:34

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.

**Paul O'B** · Apr 11, 2012 10:50

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.

**Stormy Para** · Apr 11, 2012 12:35

Originally Posted by Paul O'B

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!

**Stormy Para** · Apr 11, 2012 13:13

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

**Paul O'B** · Apr 11, 2012 13:28

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.

Code:

.dropv{position:relative;z-index:99}

**Stormy Para** · Apr 11, 2012 20:54

Originally Posted by Paul O'B

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.

Code:

.dropv{position:relative;z-index:99}

Hi, thank! I have learned a lot from you.

**krizhlal** · May 20, 2012 17:20

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;}
* html .popup span {position:absolute;}</style><a class="popup" href="#"><font color="#ff0000">ClICK HERE</font><span><img alt="" src="/content/groups/public/@empl/@apacsc/@asc/documents/webcontent/cnt163625462578.png" /></span></a> to view the APAC Process Flow Stage and Status.</p>

**ralph.m** · May 20, 2012 17:30

Hi krizhlal. Welcome to the forums.

Originally Posted by krizhlal

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.

User Tag List

Thread: Mouse Over Text To Display Image On A Fixed Location

Thread Tools

Display

Mouse Over Text To Display Image On A Fixed Location

Mouse Over Text to Display Image "Centred"

Bookmarks

Bookmarks

Posting Permissions