Back when i used dreamweaver,fireworks i could set slices

HTML & CSS
1

I was wondering if/how I can do that w/css.
I have an image and when the viewer hovers over half of it i want a diff image/animation to display.
And when the hover over the other half a diff image/animation should display.
What is the best way to go about this?
Thank you
D

2

I believe the actual term for what you want is an image map. Possibly the only thing DW was kinda useful for simplifying ( you’ll see why in a second).

Tho the technique has fallen in popularity ( because of accessibility reasons). What you need is the MAP tag, and some very specific knowledge of the pixel dimensions of your image… and possibly geometry.


<img src="image.png" alt="image alternative text" usemap="#mapname" />
<map name="mapname">
  <area [B]shape="rect" coords="9,372,66,397"[/B] href="http://en.wikipedia.org/" alt="area alternative text" title="hover text" />
  <area [B]shape="circle" coords="90,58,3"[/B] href="mercur.htm" alt="Mercury">
</map>

The AREA tags INSIDE the MAP tag ( the only VALID tags inside an image map), define the SHAPE(shape) and COORDinates(coords) and LINK( href) (oh and alt text is also good to have) of each ‘hot spot’ . One thing that can’t be beat about an image tag is the ability to do circles and custom shapes.

If you don’t want to wrangle with the MAP and AREA tags, AND all your hot spots are rectangular or square. you could just simply use AP:


<html>
	<head>
		<title></title>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<meta name="viewport" content="width=device-width">
		<style type="text/css">
			 .janus {position: relative; display: inline-block;}
			 .janus img { background: pink;  height:150px ; width:150px; display:block;}
			 .janus a { position: absolute; top:0; bottom: 0; left:0; width: 50%}
			 .janus a:hover { background: orange}
			 .janus a +a{left:50%}
		</style>
	</head>
	<body>
<div class="janus">
	<img src="yourimage.jpg">
	<a href="#" id="link1"><span>Link1: Left</span></a> 
	<a href="#" id="link2"><span>Link2: right</span></a> 
</div>
	</body>
</html>

Technically you dont even need the IMG tag there , you can make it the BG image for the div…


<html>
	<head>
		<title></title>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<meta name="viewport" content="width=device-width">
		<style type="text/css">
			 .janus {position: relative;  background: pink;  height:150px ; width:150px;}
 			 .janus a { position: absolute; top:0; bottom: 0; left:0; width: 50%}
			 .janus a:hover { background: orange}
			 .janus a +a{left:50%}
		</style>
	</head>
	<body>
<div class="janus">
 	<a href="#" id="link1"><span>Link1: Left</span></a> 
	<a href="#" id="link2"><span>Link2: right</span></a> 
</div>
	</body>
</html>

hope that helps

3

I do not think your answer is quite what the OP is looking for Dresden_phoenix:

I have an image and when the viewer hovers over half of it i want a diff image/animation to display.

Need something to happen on a mouseover or hover?

4

I focused on this part of the Q:

I have an image and when the viewer hovers over half of it

Still, the answer is similar ( tho DW doesnt actually do rollovers well),
Use a sprite on the A tags, and an containing DIV.


 .janus a { background: url(sprite.jpg) no-repeat;}
#link1 {background-position: 0, 0; }
#link1:hover {background-position:0, 150px; }
5

this is sort of what I am aiming for…

6

alright.

this site does that effect with .js. Dont be fooled by the WYSIWYG which probaly inserted the darn thing out of a library.

7

the particulars of this would get a bit complex…

but here is a rough ‘proof of concept’ on how to achieve the effect.


<html>
	<head>
		<title></title>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<meta name="viewport" content="width=device-width">
		<style type="text/css">
			form {margin:0;}
			.log{
					overflow:hidden;
					margin:20%;
					border: 1px solid
			
			}
			.half{
				background: pink;
				min-height: 150px;
				overflow: hidden;
 			}
			.half, .half:hover form, .half:hover .imgSide{width: 50%;}
 			.half +.half {background: orange}
 			.half  form, .half .imgSide, .half {float:left;}
 			.half +.half .imgSide, .half +.half form {float:right;}
 			.half +.half form {margin-right:-100%}
 			.half form {margin-left:-100%}
 			.half:hover {width: 100%}
 			.half:hover form{margin:0;}
 			.half:hover +.half{width: 0;}
 			.half +.half:hover  {position: relative; margin-left: -50%; z-index: 50; width: 100% }

   		</style>
	</head>
	<body>
<div class="log">
	<div class="half">
		<div class='imgSide'>the image and message here </div>	
		<form>
				<div>the log in form here</div> 
		</form>
	</div>
	<div class="half">
		<div class='imgSide'>the image and message here </div>	
		<form>
				<div>the log in form here</div> 
		
		</form>
	</div>
</div>
	</body>
</html>
8

will try it out thank you!