Steven Posted January 22, 2009 Share Posted January 22, 2009 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 More sharing options...
jeffman Posted January 22, 2009 Share Posted January 22, 2009 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 More sharing options...
Steven Posted January 23, 2009 Author Share Posted January 23, 2009 Sounds great, thanks! I don't have time at the moment to test it out, but I'll let you know how it goes. Link to comment Share on other sites More sharing options...
Steven Posted January 26, 2009 Author Share Posted January 26, 2009 The effect is working alright, but I can't get the span.something to get outside of the right column :S Link to comment Share on other sites More sharing options...
jeffman Posted January 26, 2009 Share Posted January 26, 2009 My bad. I wrote this:left something;when I should have added the colon:left: something; Link to comment Share on other sites More sharing options...
Steven Posted January 26, 2009 Author Share Posted January 26, 2009 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 More sharing options...
jeffman Posted January 26, 2009 Share Posted January 26, 2009 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 More sharing options...
jeffman Posted January 26, 2009 Share Posted January 26, 2009 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 More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.