Jump to content

Looking For A Roll-over Effect


Steven
 Share

Recommended Posts

Hi there,I'm looking for a simple way to present text in a separate <div> on a rollover.Here's the page I'm working with: http://www.designingsigns.com/new1/services.htmlThe page is split into two columns (<divs>). The right column contains a list of services; while the left column is basically blank. What I would like to happen, is upon rolling-over a listed service in the right column, a picture and a paragraph of text to appear in the left column. What is the best way to do this? I'm not sure where this should be placed (what forum), so I chose JavaScript. My first thought was iFrame, but I'd like to stay away from frames if at all possible. I'm pretty much just an XHTML/CSS guy, so if it could be kept relatively simple (coding-wise) that would be great :)Thanks in advance!

Link to comment
Share on other sites

Have your links set up like this (you could live without the IDs, but they might come in handy):<a href="java script:void(0)" id="something_0" class="whatever">some text<span class="something">PUT ANY ELEMENTS YOU WANT IN HERE</span></a><a href="java script:void(0)" id="something_1" class="whatever">some text<span class="something">PUT ANY ELEMENTS YOU WANT IN HERE</span></a><a href="java script:void(0)" id="something_2" class="whatever">some text<span class="something">PUT ANY ELEMENTS YOU WANT IN HERE</span></a>etc.CSS like this (just the bare bones):span.something {   position: absolute;   top: something;   left: something;   display: none;}In other words, all spans of that class occupy the same coordinates, wherever you want, and all are initially invisible. You could have a unique class to modify the coordinates of individual spans if that works better. I wasn't clear on the exact look.a.whatever:hover span.something {   display: block;}So when you rollover the link, the span appears exactly where you want it. No JS required.

EDITED THE "LEFT" DEFINITION SO IT WORKS

Link to comment
Share on other sites

Hehe, I did notice that; however, it doesn't help moving it over to the other <div> :)I tried using "right," and tried moving the "something span" over to the other div but then it broke. That span needs to be inside the <a> tag?

Link to comment
Share on other sites

As I wrote the CSS, yes, the span needs to be inside the <a>. The trick depends on absolute positioning. It's still "in" the original div; only its placement isn't.Post your code, markup and css. A link would be better.

Link to comment
Share on other sites

Here's my test page. It works in Firefox 3 and IE7. Now, you're problem is that it's showing up, but in the wrong place? I'm asking because I haven't done anything with z-index, which you'd need to add if there's anything already in the destination space and the span needs to cover it.

<!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=iso-8859-1">		<title></title>		<style type="text/css">			div {				width: 200px;			}			span.something {			   position: absolute;			   top: 100px;			   right: 100px;			   display: none;			}			a.whatever:hover span.something {			   display: block;			}				</style>	</head>	<body>		<div>			<a href="java script:void(0)" id="something_0" class="whatever">some text<span class="something">PUT ANY ELEMENTS YOU WANT IN HERE</span></a><br>			<a href="java script:void(0)" id="something_1" class="whatever">some text<span class="something">PUT ANY ELEMENTS YOU WANT IN HERE</span></a><br>			<a href="java script:void(0)" id="something_2" class="whatever">some text<span class="something">PUT ANY ELEMENTS YOU WANT IN HERE</span></a><br>				</div>	</body></html>

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...