SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Guru
    Join Date
    Oct 2010
    Location
    Portland, Or
    Posts
    724
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)

    back when i used dreamweaver,fireworks i could set slices

    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. #2
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,791
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    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.

    Code:
    <img src="image.png" alt="image alternative text" usemap="#mapname" />
    <map name="mapname">
      <area shape="rect" coords="9,372,66,397" href="http://en.wikipedia.org/" alt="area alternative text" title="hover text" />
      <area shape="circle" coords="90,58,3" 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:

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


    Code:
    <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. #3
    SitePoint Mentor silver trophy
    Rubble's Avatar
    Join Date
    Dec 2005
    Location
    Cambridge, England
    Posts
    2,358
    Mentioned
    80 Post(s)
    Tagged
    3 Thread(s)
    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. #4
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,791
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    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.

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

  5. #5
    SitePoint Guru
    Join Date
    Oct 2010
    Location
    Portland, Or
    Posts
    724
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    this is sort of what I am aiming for...
    http://www.manpower.com/

  6. #6
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,791
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    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. #7
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,791
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    the particulars of this would get a bit complex...

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

    Code:
    <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. #8
    SitePoint Guru
    Join Date
    Oct 2010
    Location
    Portland, Or
    Posts
    724
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    will try it out thank you!


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •