rollover image

[homestead]

does anyone know how to do rollovers, i want to show a thumbnail (90 x 90 px) and when the mouse rolls over a larger image shows (170 x 170px). I've tried to use dreamweavers default but keep getting the second image the same size as the first, any ideas?

[aversion]

If your image is a link you can do this using just CSS without any JS.

I don't have time to go through it right now but basically you set the image as a background to your a tag:

<a href"#" class="yourlink">Some text</a>

a.yourlink {
  background: url(*yourimageurl*) no-repeat;
  text-indent: -3000px // this moves the text out of the element
  width: 90px
  height: 90px;
}
a.yourlink:hover {
  background: url(*yoursecondimageurl*) no-repeat;
  width: 170px
  height: 170px;
}

There's more to it than this but I only have a minute. Most developers use one image file for any rollover image these days, just moving the background position on rollover. A whole menu bar might only use one image.

For example, the menu bar on this site, http://www.shorecg.com/ , consists of this one image only, http://www.shorecg.com/i/navbg.jpg

It's a technique worth learning.

[homestead]

OK cheers for that i'll have a go.
By the way there's a spelling mistake 'mangement consulting' presumably it should read 'management'

[aversion]

lol, I'll let them know.

[yasunobu13]

This has a good explanation

http://www.alistapart.com/articles/sprites/

[homestead]

here's an example of what i mean

http://search.live.com/images/result....y=0&go=Search

cheers

[yasunobu13]

Oops, I was way off, I don't know what I was thinking. Similar, but different

Did you try Aversion's code?

[homestead]

If your image is a link you can do this using just CSS without any JS.

I don't have time to go through it right now but basically you set the image as a background to your a tag:

[CODE]
<a href"#" class="yourlink">Some text</a>

a.yourlink {
background: url(*yourimageurl*) no-repeat;
text-indent: -3000px // this moves the text out of the element
width: 90px
height: 90px;
}
a.yourlink:hover {
background: url(*yoursecondimageurl*) no-repeat;
width: 170px
height: 170px;
}

i'm not all too familiar with doing rollovers as a CSS, where do i put the code?

[Genesis F5]

In either your external style sheet or style tag area (<style type="text/css"></style>). Position:absolute; will also break your object out of the element if the indent doesn't work.

[aversion]

The rollovers you link to on the Microsoft site are far more than just image rollovers, they're bringing up a whole DIV full of content, including images and links. The way those are implemented aren't simple by any means and there's no easy answer, I doubt they're CSS only.

If you just want links with images to get larger then it's easier. There's a page here that shows what happens. As expected everything else will shift when one element in the group gets larger. To avoid this you need to take the element out of the normal document flow by using positioning.

so this is without positioning: http://rigent.com/junk/css/rollover.htm
and this is with absolute positioning: http://rigent.com/junk/css/rollover_positioned.htm

I suspect neither is what you're really after, and neither is particularly well thought out. They're just examples. The css is in the source code, it's pretty simple and I would suggest you figure out how it works for yourself so you remember this stuff.

[jimmy bob]

Hey homestead, if you look in a previous thread (started yesterday by mallen) you will find some useful links to help further your css navigation.
http://board.flashkit.com/board/showthread.php?t=712223

I belive the Live Search link you list uses javascript to achieve the rollover detailed effect.

jb

[JPnyc]

That's javascript/css. The pics enlarge in 2 stages, which rules out pure CSS. Also, the surrounding div appears after the 2nd enlargement which means javascript. CSS can't do delay of any sort

[homestead]

so this is without positioning: http://rigent.com/junk/css/rollover.htm
and this is with absolute positioning: http://rigent.com/junk/css/rollover_positioned.htm

Thats the one... how do you do that again

[homestead]

OK, now i'm confused. I've been onto Text>css styles>new and tried to create a new style

<!--
body {
position: relative;
}
a {
overflow: visible;
display: block;
position: absolute;
margin: 10px;
background: url(HelenParrot.jpg) 45px 45px no-repeat;
width: 170px;
height: 170px;
text-indent: 0px;
}
a:hover {
background: url(HelenParrot.jpg) center no-repeat;
text-indent: 0px;
}
a#one {
left: 0;
}
a#two {
left: 125px;
}
a#three {
left: 250px;
}
-->

and the screen goes blank or the elements start flashing arounfd the screen
what am i doing wrong?

[aversion]

You'll have to show us it working online, you can delete that second 'text-indent' because it will be inherited from the a styles, though if you're setting it to 0 you won't need text-indent at all, which is 0 by default.

If you're using the same image on 'hover' as you are for the unmolested a tag you won't see any difference.

[1stbite]

If you did want to go down the DOM route, heres a script i never got to finish, needs focus adding to the rollover and XMLHttpRequest to pull the data dynamically to replace the click image text.

NOTE: you will need to use your own images (gfx/image_1_tmb.jpg - gfx/image_4_tmb.jpg in a 'gfx' folder size 88pxx100px) to see example work.

<!DOCTYPE html PUBLIC "-//W3C//liD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/liD/xhtml1-transitional.lid">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Detailed Image Rollover</title>
<script language="javascript" type="text/javascript">
function addLoadEvent(func) {
  var oldonload = window.onload;
  if (typeof window.onload != 'function') {
    window.onload = func;
  } else {
    window.onload = function() {
      oldonload();
      func();
    }
  }
}

function initiate () {
	if(!document.getElementById) return false;
	if(!document.getElementsByTagName) return false;
	if(!document.createTextNode) return false;
	if(!document.createElement) return false;
	if(!document.appendChild) return false;
	if(!document.removeChild) return false;
	var imgList = document.getElementById("thumbnails");
	var imgListItems = imgList.getElementsByTagName("a");
	for (i=0; i<imgListItems.length; i++) {
		imgListItems[i].onmouseover = function () {
			return showDetails(this);
		}
	
	}
	for (i=0; i<imgListItems.length; i++) {
		imgListItems[i].onmouseout = function () {
			return hideDetails(this);
		}
	}
}

function showDetails (elem_var) {
	
	elem_var.onmouseover = function () {
		return false;
	}

	var src_var = elem_var.getElementsByTagName("img")[0].getAttribute("src");;
	var parent_node = elem_var.parentNode;
	var display_container_details = document.createElement("div");
	var img_elem = document.createElement("img");
	var br_elem = document.createElement("br");
	var txt_node_1 = document.createTextNode("Click image");
	
	display_container_details.setAttribute("id", "display_container_details");
	img_elem.setAttribute("src", src_var);
	img_elem.setAttribute("alt", "");
	img_elem.setAttribute("width", "108px");
	img_elem.setAttribute("height", "120px");

	parent_node.appendChild(display_container_details);
	display_container_details.appendChild(img_elem);
	display_container_details.appendChild(br_elem);
	display_container_details.appendChild(txt_node_1);
	
}

function hideDetails (elem_var) {
	
	elem_var.onmouseover = function () {
			return showDetails(this);
	}
	
	var display_container_details = document.getElementById("display_container_details");
	var parent_node = display_container_details.parentNode;
	parent_node.removeChild(display_container_details);
	
}

addLoadEvent(initiate);
</script>
<style type="text/css">
<!--
body {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
	color: #333333;
	background-color: #999900;
}
#thumbnails {
	width: 500px;
	padding: 20px;
	margin: 0px;
}
#thumbnails li {
	filter: alpha(opacity=50);
	filter: progid:DXImageTransform.Microsoft.Alpha(opacity=50);
	-moz-opacity: 0.50; 
	opacity:0.50;
	z-index: 1;
	display: inline;
	float: left;
	width: 120px;
	height: 120px;
	list-style: none;
}
#thumbnails img {
	border: 0px;
}
#display_container_details {
	position: relative;
	top: -50px;
	left: -10px;
	width: 108px;
	padding: 20px;
	text-align: center;
	z-index: 99;
	clear: none;
	color: #FFFFFF;
	background-color: #666666;
	border: 2px solid #FFFFFF;
}
#footer {
	clear: both;
}
-->
</style>
</head>

<body>
<div id="content">
	<div id="header">Detail Image RollOver by Derek O'Brien</div>
	<div id="thumbnails">
		<ul>
			<li><a href="gfx/image_1.jpg"><img src="gfx/image_1_tmb.jpg" alt="Image 1"/></a></li>
			<li><a href="gfx/image_2.jpg"><img src="gfx/image_2_tmb.jpg" alt="Image 2"/></a></li>
			<li><a href="gfx/image_3.jpg"><img src="gfx/image_3_tmb.jpg" alt="Image 3"/></a></li>
			<li><a href="gfx/image_4.jpg"><img src="gfx/image_4_tmb.jpg" alt="Image 4"/></a></li>
			<li><a href="gfx/image_1.jpg"><img src="gfx/image_1_tmb.jpg" alt="Image 1"/></a></li>
			<li><a href="gfx/image_2.jpg"><img src="gfx/image_2_tmb.jpg" alt="Image 2"/></a></li>
			<li><a href="gfx/image_3.jpg"><img src="gfx/image_3_tmb.jpg" alt="Image 3"/></a></li>
			<li><a href="gfx/image_4.jpg"><img src="gfx/image_4_tmb.jpg" alt="Image 4"/></a></li>
			<li><a href="gfx/image_1.jpg"><img src="gfx/image_1_tmb.jpg" alt="Image 1"/></a></li>
			<li><a href="gfx/image_2.jpg"><img src="gfx/image_2_tmb.jpg" alt="Image 2"/></a></li>
			<li><a href="gfx/image_3.jpg"><img src="gfx/image_3_tmb.jpg" alt="Image 3"/></a></li>
			<li><a href="gfx/image_4.jpg"><img src="gfx/image_4_tmb.jpg" alt="Image 4"/></a></li>
			<li><a href="gfx/image_1.jpg"><img src="gfx/image_1_tmb.jpg" alt="Image 1"/></a></li>
			<li><a href="gfx/image_2.jpg"><img src="gfx/image_2_tmb.jpg" alt="Image 2"/></a></li>
			<li><a href="gfx/image_3.jpg"><img src="gfx/image_3_tmb.jpg" alt="Image 3"/></a></li>
		</ul>
	</div>
	<div id="footer">Copyright &copy; 2006</div>
</div>
</body>
</html>

Should look like tooltip with an image and text in.