CSS hover/ image map?

HTML & CSS
1

Don’t laugh, I’m running a temperature, but I’ve promised to work on a project and ran into the following issue.

Oh… Apparently, I’ve stumped myself and another designer. SO, I’ve got an image 850x450 that may need to be image mapped or some type of javascript target to change the middle image on the hover… so there are 6 images of the lady in the middle that go with each of the words/ links.

I’m either thinking image map… or css

CSS, I’ve split the area into 3 division layers. Links in left and right, and then in the middle.

I’m kind of stumped on the css to make the magic happen for the image in the middle to change as I hover from one link to the next. I must be thinking too much into this.

If you look at the image attached to this, you will see that there are 6 words, which are links. Now, the middle image is just one of 6, where each word when hovered over needs to change the middle picture.

However, I have’t done anything like this in years and I don’t dabble in flash.

Anyone have any suggestions. I brought this to my FB timeline last nite and ended up stumping one person.

2

Personally I would use JS, but if you absolutely have to do it with CSS, then you’ll have to wrap each word in a div, with an image div inside:


<div id="home">
<p>Home</p>
<div class="image">
<img src="/path/to/image">
</div>
</div>

<div id="about">
<p>About<p>
<div class="image">
<img src="/path/to/image">
</div>
</div>

etc...

Then you can absolutely position the parent divs, then absolutely position the image divs so that they all sit in the center of the page. Then you can use :hover to show/hide the image. You’ll need to change the z-index so the other words are not covered by the div that’s being hovered.


div {position:absolute; z-index:1000;}
.image {display:none}
#home:hover{z-index:1}
#home:hover .image {display:block}
etc
3

HI,

As Mickyginger said above you can absolutely place the image into position on hover.

Here’s a codepen example.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
.nav {
	width:820px;
	min-height:450px;
	bprder:1px solid #000;
	margin:auto;
	position:relative;
}
.nav ul {
	margin:0;
	padding:0;
	list-style:none;
}
.fl {
	float:left;
	clear:left
}
.fr {
	float:right;
	clear:right;
}
.nav li, .nav li a {
	font-size:170%;
	color:#000;
	text-decoration:none;
}
.nav li { margin:40px 0; }
li.about { margin-left:70px }
li.blog { margin-left:140px }
li.services { margin-right:70px }
li.contact { margin-right:140px }
.frame {
	border:1px solid red;
	position:absolute;
	left:300px;
	top:0;
	height:450px;
	width:220px;
	z-index:1;
}
.nav span {
	position:absolute;
	left:-999em;
	top:1px;
	width:220px;
	height:450px;
	line-height:450px;
	text-align:center;
	background:red;
	z-index:2;
}
.nav span img {
	display:inline;
	vertical-align:middle;
}
.home span { background:blue}
.about span { background:green}
.blog span { background:teal}
.services span { background:black}
.products span { background:red}
.contact span { background:yellow}
.nav a:hover{color:red}
.nav a:hover span { left:301px}
</style>
</head>

<body>
<div class="nav">
		<ul>
				<li class="home fl"><a href="#">Home <span><img src="http://placehold.it/120x350" width="120" height="350" alt="example 1"></span></a></li>
				<li class="products fr"><a href="#">Products <span><img src="http://placehold.it/100x150" width="100" height="150" alt="example 1"></span></a></li>
				<li class="about fl"><a href="#">About <span><img src="http://placehold.it/140x250" width="140" height="250" alt="example 1"></span></a></li>
				<li class="services fr"><a href="#">About <span><img src="http://placehold.it/120x350" width="120" height="250" alt="example 1"></span></a></li>
				<li class="blog fl"><a href="#">Blog <span><img src="http://placehold.it/120x300" width="120" height="300" alt="example 1"></span></a></li>
				<li class="contact fr"><a href="#">Contact <span><img src="http://placehold.it/200x400" width="200" height="400" alt="example 1"></span></a></li>
		</ul>
		<!-- default image -->
		<div class="frame"><img src="http://placehold.it/220x450" width="220" height="450" alt="example"></div>
</div>
</body>
</html>

If the image isn’t important content then you could simply apply the image as a background to the span. The span is needed to rub out the image that is placed into the frame by default.

If you want persistence then you would need some JS ( as in this example).

4

Here an example with the images as background-images.

You can put all images together in a “sprite” ([U]this one[/U]), then the images are downloaded simultaneously and instantly present at the hovers. For each item the corresponding part of the sprite is lifted upwards with the background-position property.

  • The “frame” container as above is not needed now, for the default image can be placed as background-image of the list itself.
  • The <span>'s in the html are the containers for the hover-images, covering the default image as Paul O’B said already.
<!DOCTYPE HTML>
<html lang="en">
<head>
<title>hover-menu-images</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<!-- http://www.sitepoint.com/forums/showthread.php?1178383-CSS-hover-image-map -->

<style type="text/css">
html {
	background: #FFF6E1;
	height: 100%;
	padding-bottom: 1px;
	}
body {
	width: 990px;
	min-height: 100%;
	font-family: "Trebuchet MS",arial, helvetica, sans-serif;
	font-size: 100.1%;
	margin: 0 auto;
	padding-top: 1px;
	background: #FFFFFF;
	}
#menu {
	height: 450px;
	margin: 50px auto;
	padding: 0;
	list-style: none;
	background: url(images/hover-menu-sprite.jpg) no-repeat 50% 0;
	position: relative;
	}
#menu li {
	padding: 0;
	text-align: center;
	}
#menu a {
	display: block;
	width: 4.1em;
	padding: 5px 0;
	font-size: 3em;
	font-style: italic;
	text-decoration: none;
	color: black;
	background: #F1F1F1;
	border: 1px solid #EBEBEB;
	border-radius: 5px;
	}
#home,
#about,
#blog {
	clear: left;
	float: left;
	}
#products,
#services,
#contact {
	clear: right;
	float: right;
	}
#home      { margin: 50px 0 0 25px}
#about     { margin: 40px 0 0 100px }
#blog      { margin: 40px 0 0 175px }

#products  { margin: 50px 25px 0 0}
#services  { margin: 40px 100px 0 0}
#contact   { margin: 40px 175px 0 0}

#menu a:hover,
#menu a:focus {
	color: blue;
	border-color: blue;
	}

#menu li:hover span,
#menu li:focus span {
	position: absolute;
	top: 0; 
	left: 50%; 
	margin-left: -100px;
	width: 200px;
	height: 450px;
	background-image: url(images/hover-menu-sprite.jpg);
	border-radius: 5px;
	}
#home span     { background-position: 0 -450px }
#about span    { background-position: 0 -900px }
#blog span     { background-position: 0 -1350px }

#products span { background-position: 0 -1800px }
#services span { background-position: 0 -2250px }
#contact span  { background-position: 0 -2700px }

</style>
</head>

<body>

<ul id="menu">
	<li id="home"><a href="#">Home</a><span></span></li>
	<li id="products"><a href="#">Products</a><span></span></li>
	<li id="about"><a href="#">About</a><span></span></li>
	<li id="services"><a href="#">Services</a><span></span></li>
	<li id="blog"><a href="#">Blog</a><span></span></li>
	<li id="contact"><a href="#">Contact</a><span></span></li>
</ul>

</body>
</html>
5

lol - you put a lot more work into that than I did. Good job :slight_smile: